Parte I - SVG além da forma
Um estudo de caso sobre SVG e font icon
Oi, gente! 😉
Sou a Amanda, Product Designer na Sympla, e vou contar para vocês um fato bem curioso que o time de design investigou sobre os ícones no formato SVG em um projeto web. Esse estudo aconteceu por acaso, na verdade, devido a vários problemas que tivemos com font icons. Isso me fez enxergar um simples ícone SVG menos pela sua forma e mais pelos números que estavam por trás daquele desenho.
Para entender toda a história, é importante saber o que afinal são font icons e SVG:
Font icons
- Font icon é um formato de representar um ícone em um layout web.
- Para que um ícone seja tratado como font icon, é preciso que o arquivo esteja no formato SVG.
- Sendo font icon baseado em um arquivo no formato SVG, também apresenta todas as características citadas abaixo.
SVG (Scalable Vector Graphics)
- SVG, em português, Vetor Gráfico Redimensionável, é um formato capaz de representar três tipos de objetos gráficos: imagens, textos ou formas geométricas vetoriais, como ícones.
- O arquivo SVG contém números e variáveis que, quando interpretadas por algum software, como o seu navegador, “desenham” as formas na tela.
- Alta resolução: os desenhos são criados em tempo real pelo navegador por meio de cálculos matemáticos, o que garante que os objetos gráficos sejam exibidos com alta qualidade.
- Escalabilidade: como SVG usa expressões matemáticas para redimensionar os objetos gráficos, não temos perda na definição da imagem.
- Dentro do arquivo SVG, a forma geométrica está contida dentro do comando <path> que modela o caminho da forma, sinuosidades e características por meio de pontos.
Aqui na Sympla, estamos trabalhando no projeto da nova área do organizador, plataforma em que o organizador gerencia do início ao fim o seu evento. Neste projeto, existiam 76 ícones no formato font icon, aproximadamente, para compor a interface e também para representar ações do usuário no sistema.
Fui investigar o motivo de usarmos font icons e, na verdade, foi uma decisão do time de desenvolvimento, porque:
- O styleguide do sistema, até aquele momento, era baseado em Bootstrap, o qual tratava o ícone como font icons.
- Font icons são compatíveis com a maioria dos navegadores disponíveis no mercado, como Chrome, Safari e Firefox por exemplo.
- É possível alterar a cor de font icon direto no CSS.
- Font icon é baseado em arquivo SVG, isto é, gerado matematicamente no navegador, o que permite dimensioná-lo em qualquer tamanho sem perder a qualidade.
O template original usava a família de ícones Font Awesome, que não tinha muito a ver visualmente com o nosso produto. Era preciso que os ícones seguissem o nosso design e estilo. Para gerar a família de ícones da Sympla, um front-end da equipe criou uma ferramenta bem simplificada de uso interno, semelhante ao Icomoon app, que transforma um arquivo SVG em font icon.
Problemas com font icons 😥
Alguns ícones neste formato ficavam um pouco embaçados quando renderizados pelo navegador. Considerando que a font icon é um arquivo SVG, isso não deveria acontecer, já que ele é gerado por meio de cálculos matemáticos, garantindo assim uma ótima qualidade e nitidez independente do tamanho. Tivemos inúmeros problemas com isso em diferentes sistemas operacionais, como Mac OS e Linux.
Outro ponto levantado foi o aspecto serrilhado dos ícones na tela. Em um monitor de alta resolução, como a tela retina, era muito perceptível essa “falha”. Na tentativa de resolver esse problema, um front-end da equipe fez uma pesquisa na qual orientava gerar o ícone no formato SVG, no tamanho 1024x1024 px, para depois transformá-lo em font icon. Essa alteração tomou bastante tempo. Afinal, eram mais de 70 ícones, lembra?
Porque SVG passou a ser uma alternativa? 🤔
Enquanto o time de desenvolvimento e eu procurávamos uma maneira de resolver os problemas citados, também começamos a questionar o uso de font icon.
Realmente precisávamos usar font icon para representar os ícones? Por que não o usávamos no formato SVG de uma vez, sem transformá-lo em font icon?
Na verdade, esses e outros questionamentos vieram por causa da recém-adesão do ícone em SVG no Android Studio. Antes, era preciso gerar uma imagem do ícone de até 4 tamanhos diferentes por causa das diferentes resoluções de tela do celular Android. Ou seja, além de perceber que o uso de SVG estava virando tendência e sendo usado por empresas de referência, estava aumentando o número de navegadores que ofereciam suporte a esse formato. Até então, sua baixa compatibilidade com os navegadores afastava os olhares dos desenvolvedores. Ver o SVG se popularizando no mercado nos fez repensar nosso processo relacionado a ícones.
O dia D: font icon na verdade não era o vilão 😱
Depois de muitas tentativas, o mesmo front-end que criou a ferramenta interna que transforma ícone SVG em font icon fez algo diferente: ele resolveu converter um ícone que estava dando problema na ferramenta interna, dessa vez, no Icomoon app. Curiosamente, o font icon gerado a partir do arquivo SVG era perfeito, sem qualquer tipo de problema na forma. Foi aí que percebemos, principalmente eu, que o SVG estava querendo dizer alguma coisa pra gente. 😂😂😂
O arquivo SVG foi aberto em um editor de texto para visualizarmos os números. E, para nossa surpresa, os números e variáveis estavam distribuídos de forma diferente para representar o mesmo ícone. Percebi que isto poderia estar relacionado à maneira que o ícone foi construído, ao jeito que as formas estavam distribuídas, à ordem das camadas e as transformações que apliquei (espelhamento e rotação) dentro do Sketch app.
O que os pontos do SVG tem a ver com Design? 🤷
Fique tranquila(o)! Você não precisa de um conhecimento aprofundado em Geometria para decifrar aqueles pontos.
O importante é entender que os passos que você faz para criar um ícone comprometem a organização da sua estrutura e a maneira como os pontos se distribuem, o que pode gerar dor de cabeça na etapa de desenvolvimento do seu projeto. Ou seja, o código de um ícone SVG diz muito sobre a qualidade da sua construção e revela práticas que podem ser evitadas na próxima vez.
Depois de identificar a raiz do problema, passei a analisar, de perto, todos os ícones da nossa plataforma. Reparei que o código do arquivo SVG visto por um editor de texto trazia informações valiosas sobre a sua construção, ainda que muitas informações fossem praticamente descartáveis para os front-ends na etapa de implementação.
Continua… 🤓
No final das contas, o código de um icone SVG bem organizado nos disse que existem melhores práticas para se criar um ícone nesse formato, o que gerou um outro estudo que irei te mostrar na segunda parte desse texto. Enquanto isso, faça esse experimento e veja com seus próprios olhos: abra um icone SVG e o enxergue além da forma. 👀
Se quiser saber mais sobre SVG e font icons, dá uma olhada nos links abaixo:
