Otimizador de SVG
Solte arquivos aqui ou clique para selecionar
- Seguro
- O processamento roda no seu dispositivo, então entrada/saída não é enviada para lugar nenhum.
Explicação
Analisa a estrutura do SVG e remove marcações desnecessárias quando isso não afeta a renderização. Expande estilos, otimiza dimensões, reduz atributos e simplifica dados numéricos e de caminhos para diminuir o tamanho sem perder qualidade visual.
O que a otimização faz
| Estilos | Sempre que possível, o CSS de <style> é distribuído para atributos style de cada elemento. Depois, ele pode ser convertido em atributos de apresentação, como fill e stroke; elementos <style> que ficarem vazios e desnecessários são removidos. |
|---|---|
| Dimensões | Remove as declarações width e height de style, além dos atributos width e height do elemento raiz <svg>. O viewBox, necessário para renderização responsiva, é preservado. |
| Atributos | Remove atributos desnecessários adicionados por ferramentas de design como Figma, Adobe XD e Illustrator, por exemplo data-name. id e class também podem ser removidos quando não são referenciados ou deixam de ser necessários após a mesclagem ou conversão de elementos, como de <line> para <path>. |
| Referências | Verifica atributos de referência como filter, clip-path e mask e os remove quando o destino referenciado não existe. Referências válidas que afetam a aparência são preservadas. |
| Números e caminhos | Compara a renderização com diferentes precisões de arredondamento (floatPrecision) e escolhe automaticamente a opção mais leve que minimize diferenças visuais. Também simplifica dados de caminho, como o atributo d de <path>, remove espaços e redundâncias desnecessários e aplica multipass para repetir a otimização e reduzir ao máximo o tamanho. |
| Compatibilidade | Para evitar problemas de renderização, o viewBox é preservado. Quando o SVG contém elementos <text>, o xml:space, que controla o tratamento de espaços, também é mantido; ele pode ser removido quando não há <text>. Em SVGs com animação, algumas otimizações são desativadas por segurança. CSS complexo e difícil de incorporar também pode ser mantido para preservar a aparência original. |
Observações
A redução de tamanho e o resultado final podem variar conforme a estrutura e a marcação do SVG. Estilos difíceis de expandir ou incorporar automaticamente, como seletores complexos ou media queries, podem ser mantidos para preservar a renderização.
Ao mesclar ou converter elementos, como de <line> para <path>, os atributos id e class dos elementos originais podem ser removidos se deixarem de ser necessários após a mudança de estrutura.
Atributos de referência como filter, clip-path e mask são removidos automaticamente quando o destino não existe, como em referências url(#...) quebradas, para manter a consistência do SVG.
SVGs com animações, como animações CSS ou tags <animate>, podem ser otimizados, mas algumas operações são limitadas porque o comportamento da animação pode ser quebrado facilmente. Se o SVG contiver scripts (JS), a otimização pode causar comportamentos inesperados.