Design & UX

29 abr, 2016

Vetores não são (apenas) gráficos – Porque ♥ é mais bonito do que ♥

Publicidade

Vamos desenhar um coração. Estou desenhando usando spiros porque assim eu posso desenhar curvas rapidamente. Nosso coração se parece com isto:

 

coracoes

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):

coracoes-2

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?

  1. O tamanho do arquivo é desnecessariamente grande, e visitantes do seu site terão tempos de carregamento bem lentos.
  2. O código resultante é inchado. Isso torna mais difícil trabalhar com ele (animações e outras coisas divertidas).
  3. 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:

coracoes-3

<?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.

coracoes-4

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