Vamos desenhar um coração. Estou desenhando usando spiros porque assim eu posso desenhar curvas rapidamente. Nosso coração se parece com isto:
Você pode ver os nós do spiro no coração da direita.
Infelizmente, apenas algumas aplicações suportam essa forma de desenhar vetores, então nós os convertemos para curvas bezier, e agora o nosso coração se parece com isto (código mostrado abaixo):
O resultado seria semelhante se tivéssemos usado, por exemplo, a nossa caneta do tablet.
<?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 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 480 480"> <g transform="matrix(1 0 0 -1 0 480)"> <path fill="currentColor" d="M227.002 30c-48.2227 35.9375 -93.6035 76.9922 -127.002 127.002c-17.8125 26.6602 -31.7285 56.7773 -34.4141 88.7207c-1.34766 15.9766 0.224609 32.2754 5.41016 47.4512c5.18555 15.166 14.043 29.1504 26.0059 39.8242 c10.7617 9.59961 24.0039 16.4453 38.1152 19.3848c14.1211 2.92969 29.0625 1.91406 42.5977 -3.05664s25.6055 -13.877 34.2969 -25.3906c8.69141 -11.5039 13.9648 -25.5566 14.9902 -39.9316c1.02539 14.375 6.29883 28.4277 14.9902 39.9316 c8.69141 11.5137 20.7617 20.4199 34.2969 25.3906s28.4766 5.98633 42.5879 3.05664c14.1211 -2.93945 27.3633 -9.78516 38.125 -19.3848c11.9629 -10.6738 20.8203 -24.6582 26.0059 -39.8242c5.17578 -15.1758 6.75781 -31.4746 5.41016 -47.4512 c-2.68555 -31.9434 -16.6113 -62.0605 -34.4141 -88.7207c-33.3984 -50.0098 -78.7891 -91.0645 -127.002 -127.002z" /> </g> </svg>
Muitos dos ícones no thenounproject, iconfinder e em outros lugares se parecem com isso, e a única maneira de descobrir é baixando-os.
Por que, então, é um problema?
- O tamanho do arquivo é desnecessariamente grande, e visitantes do seu site terão tempos de carregamento bem lentos.
- O código resultante é inchado. Isso torna mais difícil trabalhar com ele (animações e outras coisas divertidas).
- Você realmente não pode modificá-lo. Digamos que você baixou o ícone de coração acima, mas você quer alterar a forma da metade esquerda para não parecer tão simétrico. Você teria que alterar a posição e lidar com cerca de 10 nós para fazer isso.
Entendi. Como vamos melhorar isso?
Muitas ferramentas gráficas (Illustrator, Inkscape, Affinity Designer etc.) podem otimizar o caminho para você. Basta lembrar de duplicar a forma antes de otimizar para que você possa corrigir quaisquer distorções facilmente. Aqui como fica depois de fazer isso:
<?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 xmlns=”http://www.w3.org/2000/svg" xmlns:xlink=”http://www.w3.org/1999/xlink" version=”1.1" viewBox=”0 0 480 480"> <g transform=”matrix(1 0 0 -1 0 480)”> <path fill=”currentColor” d=”M227 30c-63.564 47.375 -161.873 135.059 -161.873 226.514c0 51.1386 34.9233 97.4976 85.937 97.4976c41.384 0 73.1499 -30.8173 75.9362 -70.0121c2.77714 39.0656 34.828 70.0121 75.9362 70.0121c51.218 0 85.937 -46.4341 85.937 -97.4976 c0 -90.4901 -98.4014 -179.208 -161.873 -226.514z” /> </g> </svg>
O caminho é mais limpo agora com drasticamente menos nós tornando mais fácil de editar, e o código resultante é muito mais compacto.
Estou assumindo que isso não é bom o suficiente para você?
Certo! O código pode ser muito mais compacto, então vamos tentar e guardar na pasta “mágica”, e sem qualquer esforço extra temos o seguinte:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 480"> <path d="M227 450C163 403 65 314 65 223c0-51 35-97 86-97 41 0 73 31 76 70 3-39 35-70 76-70 51 0 86 46 86 97 0 90-99 180-162 227z"/> </svg>
Menos é sempre mais, mas o coração ainda tem a mesma aparência?
Eu diria que as diferenças são imperceptíveis, mas olhe para os dois corações abaixo e veja você mesmo.
O primeiro deles é a imagem original. A segunda é a versão otimizada
Conclusão
Fomos de 20 a 6 nós, então o nosso coração agora é fácil de editar. Nós também reduzimos o tamanho do arquivo em 82% (1.128 para 206 bytes).
Não mal, apenas otimizando o caminho antes de guardar na pasta mágica.
A pasta mágica
O tutorial a seguir é para computadores Mac
É uma ação da pasta simples. Para conseguir, você só precisa de um pouco de habilidade no terminal. Pergunte ao seu amigo desenvolvedor se você está entrando em águas não exploradas.
Instale NPM
Saiba mas informações sobre isso em teamtreehouse.com.
Instale SVGO
Digite isto no seu terminal:
sudo npm install -g svgo
Crie uma pasta
Eu chamei a minha de SVGO e a coloquei dentro do meu diretório home, mas vale qualquer lugar.
Adicione a ação da pasta
Abra Automator.app no seu Mac e criar uma nova ação de pasta. Escolha a pasta SVGO. Em seguida, arraste “Run AppleScript” no fluxo e substitua o código de exemplo com o seguinte:
on adding folder items to this_folder after receiving these_items repeat with i from 1 to number of items in these_items set this_item to item i of these_items set the file_path to the quoted form of the POSIX path of this_item try do shell script "/bin/bash -l -c 'svgo --pretty -p 1 " & file_path & "'" on error errStr number errorNumber display dialog "Error: " & errStr buttons {"OK"} with icon stop return number end try end repeat end adding folder items to
Salve
É basicamente isso. Agora, sempre que você adicionar um arquivo .svg à pasta SVGO, ele será otimizado automagicamente.
Se o resultado final ficar muito distorcido, você terá que aumentar o tamanho do seu desenho antes de exportar. Portanto, se seu viewbox é, por exemplo, 48×48, tente aumentar para 480×480 como no exemplo acima.
A distorção ocorre porque todos os valores em números inteiros são arredondados. E o arredondamento será relativamente maior quanto menor for a resolução da tela.
***
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/vectors-aren-t-graphics-why-is-prettier-than-c75e89fce2b1#.kx6jtr7ms