Otimizando SVGs para uso na Web – Parte 02

Se você não o fez, então eu sugiro ler a parte 1 primeiro. Na parte 2, eu vou mostrar um exemplo de como otimizar SVGs para o uso na web. Eu explorei outras técnicas desde que escrevi este artigo, e você pode ler sobre eles na parte 2½, que será publicada na próxima semana.

Eu otimizei alguns dos ícones de redes sociais mais comumente usados, emblemas e bandeiras aqui: github.com/larsenwork/web.svg.min.

Passo 1 – get/draw um ícone

Eu vou usar o ícone ♿ como exemplo: design.google.com/icons/#ic_accessible.

Ícones do Material Design do Google já estão bastante otimizados, mas eu gosto de um desafio, então vamos tentar ir ainda mais longe.

Assim é como o SVG baixado se parece:

<svg fill=”#000000" height=”24" viewBox=”0 0 24 24" width=”24" xmlns=”http://www.w3.org/2000/svg">
 <path d=”M0 0h24v24H0z” fill=”none”/>
 <circle cx=”12" cy=”4" r=”2"/>
 <path d=”M19 13v-2c-1.54.02–3.09-.75–4.07–1.83l-1.29–1.43c-.17-.19-.38-.34-.61-.45-.01 0-.01-.01-.02-.01H13c-.35-.2-.75-.3–1.19-.26C10.76 7.11 10 8.04 10 9.09V15c0 1.1.9 2 2 2h5v5h2v-5.5c0–1.1-.9–2–2–2h-3v-3.45c1.29 1.07 3.25 1.94 5 1.95zm-6.17 5c-.41 1.16–1.52 2–2.83 2–1.66 0–3–1.34–3–3 0–1.31.84–2.41 2–2.83V12.1c-2.28.46–4 2.48–4 4.9 0 2.76 2.24 5 5 5 2.42 0 4.44–1.72 4.9–4h-2.07z”/>
</svg>

O caminho transparente que cobre todo o viewbox só é necessário se você quiser que todo o SVG seja capaz de ser alternado. Quando eu preciso de um SVG que possa ser alternado, ele está quase sempre dentro de um elemento <a> que eu posso usar no lugar, por isso eu tenho a tendência de remover esses caminhos transparentes.

Passo 2 – determinar o tamanho ideal para o viewbox

O que você quer é uma grid que seja apenas grande o suficiente para que seus inteiros não distorçam suas formas.

Isso demanda alguma experiência, mas você quase sempre precisa que ela seja maior do que o fornecido para quando você completar todos os valores para números inteiros. Dado que os ícones do Material Design são desenhados sobre uma grid, seria insensato aumentar o tamanho do viewbox para, por exemplo, “0 0 100 100”. Em vez disso, vamos multiplicar a grid atual por 4, para “0 0 96 96”.

Passos 3 a 5

Estou usando FontForge, já que ele tem a função “round para int” embutida, mas se você sabe de outros editores que têm isso também, então por favor me avise.

Eu gravei o passo a passo do FontForge, já que é um editor com o qual muitos não estão familiarizados.

Passo 3 – carregar o SVG em seu editor

Comece criando um novo arquivo e pressione cmd+shift+f. Alterne para a guia “General” e mude a ascent para 96 e todos os outros valores para 0.

Clique duas vezes no glyph e pressione command+shift+i para importar o SVG para os layers de trás e da frente.

Passo 4 – reduzir o número de nós + alças

Alterne para o layer da frente e limpe o máximo possível, removendo nós e alças supérfluas.

Passo 5 – round para int

Selecione todos os nós, exceto o do círculo e round para int pressionando command+_.

Após o round, pode ser necessário fazer alguns acertos para obter um ajuste melhor quando comparado ao layer de trás, não modificado.

Quando estiver satisfeito: Escolha “File”, “Export”.

Passo 6 – adicionar novamente o círculo

FontForge converte círculos em caminhos, o que nós não queremos. Abra o SVG em seu editor de vetor favorito, substitua a cabeça curvada com um círculo e salve o SVG.

Passo 7 – limpeza

A saída de seu editor é muitas vezes inchada, por isso precisamos limpá-lo.

<?xml version=”1.0" standalone=”no”?><!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN” “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width=”100%” height=”100%” viewBox=”0 0 96 96" version=”1.1" xmlns=”http://www.w3.org/2000/svg" xmlns:xlink=”http://www.w3.org/1999/xlink" xml:space=”preserve” style=”fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;”><path d=”M76,52c0,0 -11,1 -20,-8l0,14l12,0c5,0 8,4 8,8l0,22l-8,0l0,-20l-20,0c-5,0 -8,-4 -8,-8l0,-24c0,-8 10,-11 15,-5l5,6c7,8 16,7 16,7l0,8ZM51,72l8,0c0,0 -2,16 -19,16c-11,0 -20,-9 -20,-20c0,-16 16,-19 16,-19l0,8c0,0 -8,3 -8,11c0,7 5,12 12,12c9,0 11,-8 11,-8Z” style=”fill:#000;fill-rule:nonzero;”/><circle cx=”48" cy=”16" r=”8" style=”fill:#000;”/></svg>

Atom com visualização ao vivo do SVG

Ferramentas como svgo entregam 90% do caminho pronto, mas eu tenho essa tendência de só abrir o SVG no Atom com live SVG preview e depois removo o excesso de informações manualmente.

O resultado

Eu removi algumas vírgulas + espaços desnecessários após a publicação, o que nos levou de 332 para 304 bytes.

Before:  576 bytes 
After :  304 bytes
Saved :  47.2%

BEFORE

<svg fill=”#000000" height=”24" viewBox=”0 0 24 24" width=”24" xmlns=”http://www.w3.org/2000/svg">
 <path d=”M0 0h24v24H0z” fill=”none”/>
 <circle cx=”12" cy=”4" r=”2"/>
 <path d=”M19 13v-2c-1.54.02–3.09-.75–4.07–1.83l-1.29–1.43c-.17-.19-.38-.34-.61-.45-.01 0-.01-.01-.02-.01H13c-.35-.2-.75-.3–1.19-.26C10.76 7.11 10 8.04 10 9.09V15c0 1.1.9 2 2 2h5v5h2v-5.5c0–1.1-.9–2–2–2h-3v-3.45c1.29 1.07 3.25 1.94 5 1.95zm-6.17 5c-.41 1.16–1.52 2–2.83 2–1.66 0–3–1.34–3–3 0–1.31.84–2.41 2–2.83V12.1c-2.28.46–4 2.48–4 4.9 0 2.76 2.24 5 5 5 2.42 0 4.44–1.72 4.9–4h-2.07z”/>
</svg>

AFTER

<svg viewBox=”0 0 96 96">
 <circle cx=”48" cy=”16" r=”8"/>
 <path d=”M76 52c0 0–11 1–20–8l0 14l12 0c5 0 8 4 8 8l0 22l-8 0l0–20l-20 0c-5 0–8–4–8–8l0–24c0–8 10–11 15–5l5 6c7 8 16 7 16 7l0 8ZM51 72l8 0c0 0–2 16–19 16c-11 0–20–9–20–20c0–16 16–19 16–19l0 8c0 0–8 3–8 11c0 7 5 12 12 12c9 0 11–8 11–8Z”/>
</svg>

Note que eu também removi size+fill, por isso lembre-se de definir isso no seu CSS. O atributo xmlns não é necessário para inline SVG.

svg-5 Antes vs depois

Outro exemplo

Eu fiz a mesma coisa usando o ícone de acessibilidade padrão encontrado aqui thenounproject.com/term/wheelchair-accessible/133/.

Before: 1173 bytes
After :  291 bytes
Saved : 75.2 %

<?xml version=”1.0" encoding=”utf-8"?><!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.0//EN” “http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"><svg version=”1.0" xmlns=”http://www.w3.org/2000/svg" xmlns:xlink=”http://www.w3.org/1999/xlink" x=”0px” y=”0px” viewBox=”0 0 87.22 100" enable-background=”new 0 0 87.22 100" xml:space=”preserve”><path fill-rule=”evenodd” clip-rule=”evenodd” d=”M83.624,75.961l-8.729,3.923L62.653,52.71l-1.188–2.625l-2.874,0.039L32.136,50.5
 l-0.243–5.646h21.926v-8.781H31.531l-0.77–18.234c3.295–1.436,5.602–4.716,5.602–8.534C36.364,4.16,32.194,0,27.056,0
 c-5.148,0–9.312,4.16–9.312,9.305c0,3.25,1.675,6.113,4.201,7.767l1.604,38.063l0.171,4.263l4.271–0.058l27.842–0.395l12.862,28.526
 l1.803,3.999l3.988–1.789l12.733–5.717L83.624,75.961L83.624,75.961L83.624,75.961z”></path><path fill-rule=”evenodd” clip-rule=”evenodd” d=”M56.361,73.589l-1.18–0.279c-2.579,10.545–11.988,17.91–22.86,17.91
 c-12.984,0–23.542–10.555–23.542–23.534c0–7.993,4.007–15.276,10.568–19.615l-1.112–7.623l-0.77–1.477C6.69,44.55,0,55.551,0,67.686
 C0,85.499,14.5,100,32.321,100c12.268,0,23.156–6.833,28.63–17.32L56.361,73.589L56.361,73.589L56.361,73.589z”></path></svg>

<svg viewBox=”0 0 200 200"><path d=”M113 147l9 18c-11 21–32 35–57 35–36 0–65–29–65–65 0–24 13–46 35–57l1 3 2 16c-12 9–20 22–20 38 0 26 21 47 47 47 22 0 40–15 45–36zm54 5l7 16–33 15–29–65–65 1–3–84c-5–3–9–10–9–16C35 9 43 0 54 0s19 9 19 19c0 6–4 14–11 17l1 36h45v18H64v11l59–1 27 60z”/></svg>

Antes vs depois

PS

Há mais algumas coisas que você pode fazer, e eu escrevi sobre isso na parte 2½, que será publicada na próxima semana. Eu otimizei alguns dos ícones de redes sociais mais comumente usados, emblemas e bandeiras aqui: github.com/larsenwork/web.svg.min.

***

Andreas Larsen faz parte do time de colunistas internacionais do iMasters. A tradução do artigo é feita pela redação iMasters, com autorização do autor, e você pode acompanhar o artigo em inglês no link: https://medium.com/@larsenwork/optimising-svgs-for-web-use-part-2-6711cc15df46#.82xr5ix86

De 0 a 10, o quanto você recomendaria este artigo para um amigo?