Otimizador de SVG
Limpa e reduz ficheiros SVG removendo metadados do editor, comentários e espaços em branco redundantes, localmente no teu navegador.
A carregar Otimizador de SVG… Se nada acontecer, ativa o JavaScript.
SVG, abreviatura de Scalable Vector Graphics (gráficos vetoriais escaláveis), é um formato baseado em XML para gráficos bidimensionais que descreve as formas como traçados matemáticos em vez de uma grelha de pixéis. Como é texto, um SVG escala para qualquer tamanho sem ficar desfocado, comprime bem com gzip, pode ser estilizado com CSS, animado e editado num editor de texto simples. O senão é que os ficheiros SVG exportados pelas ferramentas de design raramente são leves. Editores como o Inkscape, o Illustrator e o Sketch enchem a sua saída de espaços de nomes privados, histórico de edição, comentários do gerador, metadados do documento e uma indentação generosa, tudo o que o navegador ignora quando renderiza a imagem, mas que ainda assim tem de descarregar e analisar.
Perguntas frequentes
O meu SVG é enviado para um servidor?
O que é que o otimizador remove exatamente?
Otimizar vai mudar o aspeto da minha imagem?
Devo manter o elemento title?
Porque é que os ficheiros do Inkscape e do Illustrator são muito maiores do que o necessário?
Quão mais pequeno é que o meu ficheiro vai ficar?
Isto também minifica ou reescreve os dados dos traçados?
Posso colar código SVG em vez de carregar um ficheiro?
Sobre Otimizador de SVG
Este otimizador remove essa tralha. Analisa o teu SVG com o próprio DOMParser do navegador, que compreende a estrutura XML corretamente em vez de a cortar com frágeis expressões regulares, e depois percorre a árvore e remove os nós de comentário, os elementos metadata e desc, os elementos title opcionais, e os elementos e atributos específicos do editor como os espaços de nomes inkscape e sodipodi. Apaga a declaração XML e qualquer doctype, e opcionalmente colapsa os espaços em branco redundantes entre etiquetas. A árvore limpa é serializada de volta para SVG válido com XMLSerializer, por isso o resultado continua a ser um documento bem formado que podes colocar diretamente numa página web ou num sistema de ícones.
Podes colar a marcação diretamente no editor ou carregar um ficheiro .svg, e a ferramenta mostra o tamanho original em bytes, o tamanho otimizado em bytes e a percentagem poupada em tempo real à medida que ativas as opções. A saída aparece num segundo painel pronta para copiar para a tua área de transferência ou descarregar como um ficheiro novo. Para as exportações de editor habituais, a poupança é substancial, muitas vezes entre os trinta e os setenta por cento, sem qualquer alteração visível na imagem renderizada porque só são removidos dados que não se renderizam.
Tudo corre inteiramente no teu navegador. O SVG nunca sai do teu dispositivo, não há carregamento, nem servidor, nem conta, por isso a ferramenta é segura para ícones proprietários, recursos de marca e diagramas confidenciais. Também continua a funcionar sem ligação à internet assim que a página tiver carregado. O otimizador é deliberadamente conservador: remove dados que não afetam a renderização em vez de reescrever a geometria dos traçados ou arredondar coordenadas, o que significa que a saída visual é preservada exatamente enquanto o ficheiro fica significativamente mais pequeno.
Como o SVG venceu a guerra dos formatos vetoriais
O SVG não foi o único concorrente para os gráficos vetoriais na web. No final da década de 1990, a Microsoft e outros apoiaram o VML, o Vector Markup Language (linguagem de marcação vetorial), enquanto a Adobe e a Sun impulsionavam o PGML, o Precision Graphics Markup Language (linguagem de marcação de gráficos de precisão). O World Wide Web Consortium pegou em ambas as propostas, reuniu um grupo de trabalho e fundiu as melhores ideias num único padrão aberto. O SVG 1.0 tornou-se uma Recomendação do W3C em setembro de 2001, mas a adoção foi lenta porque o Internet Explorer, então o navegador dominante, só suportava VML e exigia um plugin para SVG.
O ponto de viragem chegou com os outros navegadores. O Firefox, o Safari e mais tarde o Chrome incluíram a renderização nativa de SVG ao longo da década de 2000, e quando o Internet Explorer 9 finalmente adicionou suporte nativo em 2011 o formato tinha alcance universal. A ascensão dos ecrãs Retina de alta densidade por essa mesma altura fez com que o SVG se tornasse de repente essencial: um único ícone vetorial mantém-se nítido como uma lâmina em qualquer densidade de pixéis, enquanto os ícones de mapa de bits precisam de várias exportações e ainda assim ficam desfocados em ecrãs para os quais não foram feitos. As fontes de ícones tiveram um breve momento, mas os ícones SVG provaram ser mais acessíveis e mais flexíveis e substituíram-nas em grande medida.
Como o SVG é apenas texto XML, herdou tanto as forças como o excesso do instrumental XML. As aplicações de design tratam o ficheiro como um documento de projeto e enchem-no com os seus próprios dados privados, e é por isso que um ícone que se renderiza com algumas centenas de bytes de dados de traçado essenciais pode ser entregue como vários kilobytes de metadados do editor. Otimizar os SVG tornou-se por isso um passo de compilação padrão nos fluxos de trabalho de front-end modernos, e fazê-lo de forma segura, analisando a árvore do documento real em vez de adivinhar com substituição de texto, é o que separa um limpador fiável de um que ocasionalmente corrompe a tua arte.