Entrada
Preparando seu ambiente de trabalho…
Como usar
- Cole o código SVG ou abra um arquivo SVG UTF-8.
- Selecione Otimizar SVG e compare a prévia e os bytes.
- Baixe o SVG ou expanda Resultado para inspecionar e copiar o markup.
Otimizar markup vetorial
Um SVG pode conter metadados de editor e instruções extensas além das formas exibidas. A otimização reescreve esse markup para reduzir bytes desnecessários.
Esta ferramenta usa SVGO com precisão de coordenadas de três casas e mantém viewBox e IDs. Guarde a origem para comparar a saída no contexto final.
O que pode mudar
A otimização pode remover metadados e simplificar instruções. A precisão de três casas pode alterar levemente a geometria, sobretudo em arte muito pequena ou muito ampliada.
viewBox permite dimensionamento responsivo; IDs podem ser referenciados por formas, estilos ou código ao redor. Esta configuração os mantém, em vez de encurtá-los ou removê-los.
<svg viewBox="0 0 10 10"><metadata>demo</metadata><path d="M0 0 L10 10"/></svg><svg viewBox="0 0 10 10"><path d="m0 0 10 10"/></svg>Comparação abreviada destacando a remoção de metadados e um path compacto. O download também inclui o namespace SVG.
Prévia e incorporação
A prévia carrega a saída como uma imagem isolada, sem inserir markup ativo na página. Seu comportamento pode diferir de um SVG inline na aplicação.
Otimização não é sanitização. Revise SVG não confiável antes de embuti-lo inline e teste estilos, referências ou comportamentos dependentes do documento ao redor.
Inspecionar e salvar
Baixar salva optimized.svg. Expanda Resultado para ver o código gerado e Copiar; uma redução de bytes não prova equivalência visual.
PNG, JPEG e WebP estáticos: 20 MiB, 24 megapixels e 8192 pixels por lado. Base64: 2 MiB. SVG: 1 MiB. Inspeção de arquivos: 1 GiB, lendo apenas os primeiros 256 bytes. A compatibilidade de codecs varia entre navegadores. Nenhum arquivo é enviado.
Perguntas frequentes
A saída está sanitizada para uso inline?
A otimização não sanitiza a origem. Revise elementos, atributos, URLs e estilos não confiáveis antes de usar SVG inline.
viewBox e IDs são preservados?
Sim, nesta configuração. Outros trechos podem ser reescritos; teste referências e estilos no documento de destino.
A otimização pode alterar a imagem?
Arredondamento de coordenadas e reescritas estruturais podem afetar a renderização. Compare a prévia e teste onde o arquivo será usado.
Por que a prévia isolada difere da minha página?
Ela não compartilha o CSS ao redor nem o comportamento do SVG inline. O contexto externo e referências do documento podem importar.
Onde fica Copiar?
Depois da otimização, expanda Resultado abaixo da prévia. Ali aparecem o código SVG e Copiar; Baixar SVG fica acima da prévia.