Fluxo de otimização SVG e Data URI

Ícones SVG inline e pequenos assets de UI costumam vir com espaços extras, metadados de editor ou markup arriscado. Você pode otimizar SVG como texto no navegador e copiar snippets Data URI sem enviar arquivos.

Quando otimizar SVG

Otimize quando precisar de:

• Arquivos sprite ou ícone menores antes do commit
• Um URI data:image/svg+xml para background-image em CSS
• Um snippet SVG limpo para documentação ou exemplos de componentes

Pule otimização agressiva quando ainda precisar de formatação legível para edição manual — use Safe primeiro.

Fluxo local

1. Copie SVG da exportação de design, componente ou sprite sheet.
2. Abra o Otimizador SVG.
3. Cole o markup ou envie um arquivo .svg.
4. Revise a pré-checagem para <script>, atributos de evento ou URLs externas.
5. Execute otimização Safe por padrão.
6. Copie SVG otimizado, Data URI URL-encoded ou snippet CSS background-image.

Safe vs Aggressive

• Safe mantém viewBox, title, desc, role e aria-* quando possível.
• Aggressive minifica mais e pode remover metadados de acessibilidade.

Nota de segurança

Trate SVG colado como código, não como texto inofensivo. A ferramenta não renderiza SVG na página, mas revise padrões de alto risco antes de usar em produção.

Ferramentas relacionadas

• Base64 — inspecione ou converta outros payloads codificados.
• Conversor de unidades CSS — combine fundos Data URI com cálculos de layout.
• Compressor de imagem — compressão bitmap quando SVG não for o formato certo.