Neste artigo, vou cobrir os conceitos básicos de otimização do SVG. Na Parte 2 e na Parte 2 ½, que serão publicadas posteriormente, mostrarei como eu estou fazendo isso.

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

Razão de ser

O uso do IE8 onde eu moro é de 0,35% ?

Por que usar SVG em primeiro lugar? Porque IE8 já era, e SVGs são incríveis e devem substituir os ícones – explicado brilhantemente aqui: https://css-tricks.com/icon-fonts-vs-svg/.

Por que se preocupam em otimizá-los? Designers gráficos puros se preocupam apenas como seu desenho se parece. Isso era suficiente quando ilustrações eram impressas ou rasterizadas em pngs. Mas usando gráficos vetoriais, cada extra node, handle, ponto decimal e informações de meta data supérfluas contribuem para o tamanho total do arquivo do vetor.

Por que se preocupar com 635 bytes, por exemplo? Quando você não está otimizando SVGs, eles ainda não são tão grandes em comparação com gráficos rasterizados, mas assim que você estiver usando apenas alguns ícones na sua página tudo isso acrescenta, e cada byte e milissegundo contam.

Além disso, você vai dormir melhor à noite sabendo que seu site está voando o mais rápido possível.

NB

Eu só vou falar sobre como otimizar o desenho real, mas tenha em mente que você pode tirar um monte de excesso de informações meta também – svgo é ótimo para isso (disponível como aplicativos, tarefas, ação da pasta etc.).

This is all that’s needed do draw a small square when inlining svg:<svg viewbox=”0 0 3 3">
 <path d=”M1 1 l1 0 l0 1l-1 0z”/>
</svg>

Se você está inserindo repetidamente o mesmo SVG em um documento, você está fazendo errado. Use o SVG sprites – estes 3 minutos de leitura no Medium explicam o porquê e como.

O caminho

O caminho do vetor é desenhado sobre uma grade usando nós com cabos opcionais (para aquelas curvas sensuais). Saiba mais sobre eles no developer.mozilla.org.

Existem várias maneiras de reduzir a quantidade de código necessária para desenhar um caminho:

Excessivos nodes na logo do CodePen

Use menos nós

Limpe suas curvas antes de exportar. Isso é especialmente importante se você estiver traçando. CodePen se esqueceu de fazer isso, mas depois corrigiu.

Use menos alças

Às vezes, você pode desenhar uma curva quase idêntica usando apenas uma alça em vez de duas.

TWO HANDLES
<path d=”M1 5c2.331–2.167 4.998–2.167 8 0/> 

ONE HANDLE
<path d=”M1 5c3.736–3.629 8 0 8 0"/>

Use inteiros

É apenas uma questão de ter uma grade suficientemente grande (chamada viewbox na terminologia SVG), e você não será capaz de dizer a diferença. Estes têm a mesma aparência:

FLOATS
<path d=”M7.059,1.034l-4.033,1.933l-1.084,4.982l6.016,-0.899l-0.899,-6.016Z”/>

INTEGERS
<path d=”M7 1l-4 2l-1 5l6–1l-1–6Z”/>

Não use uma grade que é maior do que a necessária

Se a sua grade é grande, também serão os valores das coordenadas. O que você quer é uma grade que é apenas grande o suficiente para que seus inteiros não distorçam visivelmente as formas. O tamanho exato da sua grade depende da complexidade seus desenhos e do nível de detalhe necessário.

BIG
<svg viewBox="0 0 1000 1000">
  <path d="M700 100l-400 200-100 500 600-100-100-600z"/>
</svg>

SMALL
<svg viewBox="0 0 10 10">
  <path d="M7 1l-4 2-1 5 6-1-1-6z"/>
</svg>

Em resumo

1. Menos nós
2. Menos alças
3. Use inteiros
4. Grade: Grande, mas não muito grande

O resultado

Gráficos

Eu diria que as diferenças são imperceptíveis – especialmente em tamanhos normalmente usados ​​para os ícones.

Oficial vs otimizado

Camada oficial e otimizada comparadas em detalhe e para o ícone inteiro

Código

OFFICIAL
<svg viewBox="0 0 274 223">
  <path d="M273.39 27.123c-10.059 4.461-20.869 7.477-32.215 8.832 11.581-6.941 20.473-17.933 24.662-31.031-10.837 6.428-22.841 11.096-35.617 13.611-10.232-10.901-24.809-17.713-40.941-17.713-30.977 0-56.091 25.114-56.091 56.088 0 4.397.497 8.677 1.453 12.783-46.616-2.339-87.945-24.669-115.609-58.604-4.828 8.284-7.594 17.919-7.594 28.198 0 19.459 9.902 36.627 24.952 46.686-9.194-.291-17.843-2.815-25.405-7.016l-.005.705c0 27.176 19.334 49.847 44.993 54.998-4.707 1.282-9.662 1.967-14.777 1.967-3.614 0-7.128-.351-10.553-1.006 7.138 22.284 27.852 38.5 52.396 38.953-19.197 15.043-43.381 24.01-69.66 24.01-4.527 0-8.992-.265-13.379-.783 24.822 15.914 54.304 25.199 85.979 25.199 103.169 0 159.585-85.467 159.585-159.586 0-2.431-.054-4.85-.162-7.256 10.957-7.908 20.468-17.787 27.988-29.035z"/>
</svg>

OPTIMISED
<svg viewBox="0 0 800 800">
  <path d="M679 239s-21 34-55 57c7 156-107 329-314 329-103 0-169-50-169-50s81 17 163-45c-83-5-103-77-103-77s23 6 50-2c-93-23-89-110-89-110s23 14 50 14c-84-65-34-148-34-148s76 107 228 116c-22-121 117-177 188-101 37-6 71-27 71-27s-12 41-49 61c30-2 63-17 63-17z"/>
</svg>

***

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-1-67e8f2d4035#.lu5hrb3ys