SVG para HTML

Converter SVG para HTML online

Importe um arquivo SVG ou cole o código dele e obtenha um SVG inline para usar em uma página HTML. Pré-visualize o resultado, ajuste as configurações de otimização e copie o código. A análise, a otimização e a conversão acontecem localmente no seu navegador, sem enviar o SVG a nenhum servidor.

Prepare um SVG inline responsivo

Mantenha o viewBox para preservar o sistema de coordenadas do SVG. Remova a largura e a altura fixas quando o SVG tiver um viewBox utilizável e, depois, defina o tamanho no seu próprio CSS.

Entenda o tamanho do SVG e a economia

Tamanho original corresponde ao SVG de entrada. Tamanho do SVG otimizado é o tamanho dele depois do processamento com as opções escolhidas, como remover comentários, arredondar coordenadas e minificar o código. Os tamanhos aparecem em kB, e 1 kB equivale a 1.000 bytes. Economia é a porcentagem de redução: passar de 10 kB para 7 kB economiza 30%. Se o resultado for maior, por exemplo por causa de uma formatação legível, aparece Aumento de tamanho no lugar. Esses números comparam o código SVG, não o tamanho das exportações em JSX, React, Data URI CSS ou Base64.

Precisão decimal e indentação

A precisão decimal define quantas casas decimais são mantidas nas coordenadas e nos atributos numéricos. Com precisão 2, 12.34567 vira 12.35. Menos casas decimais podem reduzir o tamanho do arquivo, mas também alterar detalhes finos; o padrão de 3 é um ponto de partida, então confira a pré-visualização. A indentação usa 2 espaços, 4 espaços ou tabulações para deixar o código HTML e JSX mais fácil de ler, sem mudar a imagem. A opção Minificar SVG remove os espaços de formatação desnecessários para compactar o resultado; por isso, a indentação fica desativada enquanto a minificação está ativa.

HTML, JSX, React e Data URIs de SVG

O resultado em HTML é código SVG inline e é baixado como arquivo SVG. O JSX adapta os nomes dos atributos e os estilos inline para React. O formato Componente React envolve esse código em uma função TypeScript que aceita as props padrão de SVG. O formato Data URI CSS gera uma declaração background-image; o Base64 gera uma URI de imagem SVG codificada. As estatísticas de tamanho descrevem o SVG otimizado, não os formatos codificados, que são maiores. Revise os IDs antes de usar várias cópias inline na mesma página.

Um fluxo de trabalho SVG estático e local

A pré-visualização é uma imagem isolada, e não um código executável na página. Scripts, HTML incorporado, animações, imagens externas e folhas de estilo são removidos. Os estilos de apresentação inline compatíveis e as referências a fragmentos locais são mantidos. Esta ferramenta foi pensada para desenhos estáticos; recursos não compatíveis podem alterar a aparência do desenho. O currentColor altera preenchimentos e contornos de cor sólida e herda a cor quando usado inline; a pré-visualização em imagem usa seu próprio contexto de cor.