Vamos testar quão longe podemos ir diminuindo o tamanho do arquivo do logotipo do LinkedIn utilizando as técnicas descritas na parte 1 e na parte 2, além de algumas novas.

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

Obtenha o logotipo

Não há uma versão .svg oficial, por isso vamos ter de usar a versão de banner .eps. Vamos remover tudo, menos o logotipo e recortar um quadrado contendo apenas o logotipo.

Salve o svg

Affinity Designer é minha escolha nesses dias, mas a opção dele “save for web” ainda está muito inchada.

<?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 18 18" 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;”><g><path d=”M16.667,0.001l-15.34,0c-0.732,0 -1.327,0.581 -1.327,1.297l0,15.405c0,0.717 0.595,1.297 1.327,1.297l15.34,0c0.734,0 1.333,-0.58 1.333,-1.297l0,-15.405c0,-0.716 -0.599,-1.297 -1.333,-1.297Z” style=”fill:#007bb6;fill-rule:nonzero;”/><path d=”M4.004,2.479c0.854,0 1.547,0.694 1.547,1.547c0,0.855 -0.693,1.549 -1.547,1.549c-0.858,0 -1.549,-0.694 -1.549,-1.549c0,-0.853 0.691,-1.547 1.549,-1.547ZM2.667,6.75l2.672,0l0,8.589l-2.672,0l0,-8.589Z” style=”fill:#fff;fill-rule:nonzero;”/><path d=”M7.014,6.75l2.559,0l0,1.173l0.037,0c0.356,-0.675 1.228,-1.387 2.526,-1.387c2.702,0 3.201,1.778 3.201,4.092l0,4.711l-2.667,0l0,-4.176c0,-0.997 -0.02,-2.278 -1.388,-2.278c-1.389,0 -1.601,1.084 -1.601,2.204l0,4.25l-2.667,0l0,-8.589Z” style=”fill:#fff;fill-rule:nonzero;”/></g></svg>

(SVGO)

(Vamos tentar corrigi-lo rapidamente aplicando svg nele.)

<svg viewBox=”0 0 18 18" xmlns=”http://www.w3.org/2000/svg" fill-rule=”evenodd” clip-rule=”evenodd” stroke-linejoin=”round” stroke-miterlimit=”1.414"><g fill-rule=”nonzero”><path d=”M16.667 0H1.327C.595 0 0 .583 0 1.3v15.405C0 17.42.595 18 1.327 18h15.34C17.4 18 18 17.42 18 16.703V1.298C18 .582 17.4 0 16.667 0z” fill=”#007bb6"/><path d=”M4.004 2.48a1.548 1.548 0 1 1-.002 3.095 1.548 1.548 0 0 1 .002–3.096zM2.667 6.75H5.34v8.59H2.666V6.75zM7.014 6.75h2.56v1.173h.036c.356-.675 1.228–1.387 2.526–1.387 2.702 0 3.2 1.778 3.2 4.092v4.71H12.67v-4.175c0-.997-.02–2.278–1.388–2.278–1.39 0–1.6 1.084–1.6 2.204v4.25H7.013V6.75z” fill=”#fff”/></g></svg>

Nós precisamos de mais

Fazer a mágica FontForge e removendo o fundo + informações meta supérfluas irá nos deixar com algo como

<svg viewBox=”0 0 800 800"><path d=”M268 629h-97V319h97v310zm157 0h-97V319h93v42h1c13–24 44–50 91–50 98 0 116 64 116 148v170h-96V478c0–36–2–82–51–82–50 0–57 39–57 79v154zM220 164c31 0 55 25 55 56s-24 56–55 56–56–25–56–56 25–56 56–56z”/></svg>

Impressionante, mas já sabíamos isso – vamos melhorar ainda mais.

Círculo

O ponto acima do i é um círculo. Vamos apenas escrevê-lo como tal.

<svg viewBox=”0 0 800 800"><path d=”M268 629h-97V319h97v310zm157 0h-97V319h93v42h1c13–24 44–50 91–50 98 0 116 64 116 148v170h-96V478c0–36–2–82–51–82–50 0–57 39–57 79v154z"/><circle cx=”219"cy=”220"r=”56"></svg>

Remover o último nó

Browsers irão fechar a forma para nós, então vamos remover o último ponto no retângulo. Você só pode remover o último ponto se ele estiver em uma linha.

<svg viewBox=”0 0 800 800"><path d=”M268 629h-97V319h97zm157 0h-97V319h93v42h1c13–24 44–50 91–50 98 0 116 64 116 148v170h-96V478c0–36–2–82–51–82–50 0–57 39–57 79v154z"/><circle cx=”219"cy=”220"r=”56"></svg>

(Nós excluímos “V310” quase no início do caminho)

Cúbica vs quadrática

Vamos mudar para quadrática em FontForge e ver o que acontece.

Temos a camada “Fore” com um “C” para cúbico do lado esquerdo, e “Quad” com um “Q” do lado direito. Observe como todas as curvas quad compartilham a haste – que é de quatro pontos (cinco quando nós removemos o último ponto).

<svg viewBox=”0 0 800 800"><path d="M268 629h-97V319h97zm157 0h-97V319h93v42h1q31-50 93-50 114 0 114 133v185h-96V466q0-70-49-70-59 0-59 69z"/><circle cx="219"cy="220"r="56"></svg>

Vale a pena notar que o desenho usando beziers quadráticas não é sempre melhor. Não funciona para quando temos mais curvas circulares, como o logotipo do Twitter.

Bytes salvos

Acabamos por ser capazes de baixar mais de 85%, sem qualquer alteração visível na aparência.

Affinity Designer        1229 bytes    100.0%
SVGO                      701 bytes     57.0%
FontForge + meta          284 bytes     23.1%    100.0%
Circle ÷ 1 dot            238 bytes     19.3%     83.8%
Quadratic "n" ÷ 1 dot     179 bytes     14.6%     63.0%

Mais

Eu não escrevi parte 3 ainda, mas provavelmente será sobre a acessibilidade em SVGs – se alguém tem alguma ideia, então por favor me deixe saber aqui: https://github.com/larsenwork/social.svg.min/issues/1.

Otimizei mais de 25 ícones sociais aqui: https://github.com/larsenwork/social.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-andreas-larsen/optimising-svgs-for-web-use-part-2-1-598815d74f9c#.9e9mzi9py