Otimizador SVG
HigienizadoOtimize e limpe arquivos SVG.
- Fluxo de ícones
Input bytes
0
Output bytes
0
Colors
0
ViewBox
—
Colors
fill/stroke/stop-color
Preview an SVG to extract colors.
Preview
No preview yet.
Output SVG
Sanitization
SVG can execute scripts or load external resources. This tool sanitizes the markup before preview and removes risky elements/attributes.
- Removes
<script>,<foreignObject>, and event handler attributes (on*). - Strips external
href/xlink:hrefunless it’s an internal#idreference.
O que é SVG?
SVG (Scalable Vector Graphics) é um formato de imagem vetorial baseado em XML para gráficos bidimensionais, com suporte a interatividade e animação. Diferente de formatos raster como JPEG ou PNG, os SVGs são definidos por caminhos matemáticos, o que significa que podem ser redimensionados para qualquer tamanho sem perder qualidade. Isso os torna perfeitos para logotipos, ícones e ilustrações na web, onde permanecem nítidos em qualquer dispositivo, de telas de celular a monitores de desktop de alta resolução.
Como usar esta ferramenta
Cole seu código SVG na área de texto SVG Input à esquerda. Clique em Preview para ver o gráfico e extrair sua paleta de cores. Use os botões Optimize ou Minify para limpar o markup e reduzir o tamanho do arquivo. Opcionalmente, substitua cores específicas informando novos valores no painel Colors e clicando em Apply. Clique em Copy ou Download para salvar seu SVG higienizado e otimizado.
Casos de uso comuns
Gerenciamento de ícones para limpar SVGs exportados de ferramentas de design como Figma ou Illustrator. Temas para alterar rapidamente as cores de um conjunto de ícones e combinar com a paleta da sua marca. Segurança para higienizar SVGs de fontes não confiáveis e remover possíveis scripts ou referências externas. Desempenho para minificar o markup SVG, reduzindo o tamanho de gráficos inline e melhorando os tempos de carregamento da página.
Dicas avançadas
Use o botão currentColor para converter todos os fills e strokes explícitos para currentColor, tornando seu SVG facilmente estilizável via CSS. Sempre otimize seus SVGs antes de usá-los em produção para garantir que fiquem o menor possível. Ao criar SVGs em ferramentas de design, use os recursos Outline Stroke e Simplify Path para reduzir a complexidade do código gerado antes da otimização.