SVG
Grátis, sem cadastro, roda no seu navegador.
A versão simples: um elemento `<svg>` com um caminho por camada. Cole na sua marcação, ou baixe como arquivo e trate como qualquer outro recurso. Esta é a exportação a usar quando você pode acrescentar um elemento à página.
Uma exportação de SVG, cortada nas primeiras linhas
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path d="M100 38L153.69 69L153.69 131L100 162L46.31 131L46.31 69Z" fill="#4f46e5"/></svg>O que vale saber
- Funciona em todo lugar, sem nenhuma ressalva de compatibilidade que valha mencionar.
- Cada camada é um `<path>` separado, então você pode reestilizá-las individualmente depois de colar.
- Ondas levam `preserveAspectRatio="none"` para esticar até qualquer largura; blobs mantêm as proporções.
- Sem comentário do gerador, sem marcação identificadora, sem link de volta para cá.
Compatibilidade de navegadores
Universal. SVG é suportado em todos os navegadores contra os quais alguém ainda testa há bem mais de uma década, e nada nesta saída usa um recurso recente — são caminhos e preenchimentos.
Tamanho em todas as predefinições
Todas as predefinições que este formato consegue expressar, medidas como o gerador as emite. A menor é Hexágono com 151 bytes; a maior é Ondas em camadas com 898 bytes. A contagem de pontos é o que determina a diferença — cada ponto extra adiciona um segmento cúbico inteiro de coordenadas.
| Formato | Tamanho |
|---|---|
| Hexágono | 151 B |
| Cristal | 156 B |
| Gema facetada | 182 B |
| Triângulo arredondado | 217 B |
| Picos de montanha | 231 B |
| Arco | 246 B |
| Ziguezague marcado | 264 B |
| Onda profunda | 282 B |
| Seixo | 294 B |
| Borda de nuvem | 295 B |
| Arcos recortados | 319 B |
| Onda suave | 322 B |
| Blob suave | 330 B |
| Degraus | 358 B |
| Festão | 382 B |
| Blob orgânico | 402 B |
| Brilho | 408 B |
| Onda orgânica | 478 B |
| Onda de rodapé | 551 B |
| Estrela | 551 B |
| Flor | 557 B |
| Bolha | 559 B |
| Borda pixelada | 579 B |
| Respingo | 641 B |
| Ondulação | 655 B |
| Ondas em camadas | 898 B |
Em mais detalhe
O único atributo que vale entender é `preserveAspectRatio`. Numa onda ele está em `none`, o que deixa a forma esticar horizontalmente até a largura que o contêiner tiver — é isso que faz um mesmo divisor funcionar num celular e num monitor widescreen sem tarjas. Num blob ele é deixado em paz, porque um blob esticado até a proporção de um contêiner é só uma elipse com passos a mais.
Perguntas
Quais formas funcionam como SVG?
Este formato cobre Onda, Blob. Isso é uma restrição real e não uma limitação desta ferramenta: onde um gerador falta nessa lista, o formato realmente não consegue expressá-lo, e oferecê-lo mesmo assim entregaria a você algo que desenha silenciosamente a forma errada.
Qual o tamanho de uma exportação de SVG?
Entre 151 e 898 bytes nas 26 predefinições que o suportam. Menos pontos é a alavanca que importa; suavidade e cor não custam nada.
Posso editar à mão depois?
Pode. A saída é texto puro sem comentário do gerador, sem marcação identificadora e sem link de volta para cá. Mude as cores, renomeie a classe ou cole o caminho no seu próprio SVG — nada mais adiante depende de ele continuar como estava.
Cada número e cada forma desta página foram produzidos rodando o gerador no momento do build, então descrevem a ferramenta que você está prestes a usar e não uma versão dela que já existiu.