Um truque simples para otimizar arquivos SVG

Um truque simples para otimizar arquivos SVG

Uma maneira de reduzir alguns bytes extras de uma página da Web profissional é otimizar os arquivos SVG. Eu vou te mostrar um método rápido para fazer isso. OK, geralmente, você criará um arquivo SVG por meio de seu editor de gráficos vetoriais favorito.

Minha escolha é o Adobe Illustrator, mas isso funcionará em outros programas. Aqui você pode ver o gráfico vetorial que criei com o Illustrator, um ícone de lupa. Quando o gráfico vetorial estiver concluído, você normalmente o exportará para um arquivo SVG para uso na web. Acabei de seguir o guia oficial para exportar SVG para a web com o Adobe Illustrator para criar o arquivo SVG para o ícone da lupa. Um arquivo SVG é simplesmente composto de marcação XML que informa aos navegadores da web como renderizar a imagem.

Para nós, isso significa apenas que podemos abrir e visualizar o código-fonte dos arquivos SVG em um editor de texto. Aqui está a marcação que o Adobe Illustrator gerou automaticamente para mim:

<?xml version=”1.0″ encoding=”utf-8″?> <!– Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In –> <!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN” “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd” [ <!ENTITY ns_flows “http://ns.adobe.com/Flows/1.0/“> ]> <svg version=”1.1″ xmlns_xlink=”http://www.w3.org/1999/xlink” xmlns_a=”http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/” x=”0px” y=”0px” width=”200px” height=”200px” viewBox=”-15.146 -15.389 200 200″ enable-background=”new -15.146 -15.389 200 200″ xml_space=”preserve”> <defs> </defs> <path id=”path_1_” d=”M96.024,16.475c-21.967-21.966-57.582-21.967-79.549,0c-21.967,21.966-21.967,57.583,0,79.549 c18.83,18.829,47.677,21.503,69.371,8.055l64.864,64.863c5.077,5.077,13.308,5.077,18.385,0c5.077-5.076,5.077-13.308,0-18.385 l-64.899-64.899C117.514,63.987,114.8,35.25,96.024,16.475z M80.01,80.01c-13.122,13.122-34.397,13.122-47.52,0 c-13.123-13.123-13.122-34.398,0-47.52c13.123-13.123,34.397-13.123,47.52,0C93.132,45.611,93.133,66.887,80.01,80.01z”/> </svg>

Como você deve ter visto acima, o código para o ícone da minha lupa tem coisas extras que não são realmente necessárias. A maneira mais difícil de otimizar seus arquivos SVG é limpar manualmente seu código.

E se você precisar de ajuda com isso, confira o guia de otimização SVG de Dudley Storey que mostra o que você deve observar. O método de limpeza manual é uma boa coisa para fazer algumas vezes, apenas para que você saiba como tudo funciona e saiba o que está acontecendo quando uma ferramenta otimiza um arquivo SVG para você. Mas a limpeza de código quase sempre pode ser automatizada.

E imagine se você tivesse uma tonelada de arquivos SVG, limpar manualmente o código-fonte não é eficiente ou prático. É aqui que o Kraken.io entra em cena. O Kraken.io otimiza imagens da web, como arquivos JPG, PNG e SVG.

Basta arrastar e soltar arquivos SVG na ferramenta e ela fará todo o trabalho para nós.

Aqui está o código SVG otimizado após ser executado pelo Kraken.io:

<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN” “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd” [ <!ENTITY ns_flows “http://ns.adobe.com/Flows/1.0/“> ]><svg width=”200″ height=”200″ viewBox=”-15.146 -15.389 200 200″ enable-background=”new -15.146 -15.389 200 200″><path d=”M96.02 16.48C74.06-5.5 38.44-5.5 16.47 16.48c-21.96 21.96-21.96 57.58 0 79.54 18.83 18.83 47.68 21.5 69.38 8.06l64.86 64.86c5.1 5.08 13.32 5.08 18.4 0 5.07-5.07 5.07-13.3 0-18.38l-64.9-64.9c13.3-21.67 10.6-50.4-8.18-69.19zM80.02 80c-13.13 13.13-34.4 13.13-47.53 0-13.13-13.1-13.13-34.4 0-47.5 13.1-13.13 34.4-13.13 47.5 0C93.14 45.6 93.14 66.9 80 80z”/></svg>

Você notará que removeu código desnecessário, como comentários, formatação de código e espaços do meu arquivo SVG. Usando este truque, o tamanho do arquivo SVG foi reduzido em cerca de 37% sem sacrificar qualquer qualidade de imagem (ou seja, esta foi uma compressão sem perdas).

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *