Scalable Vector Graphics – A internet percorreu um gigantesco caminho desde que o HTML5 se tornou popular e as pessoas começaram a olhar o JavaScript como uma linguagem que é capaz de desenvolver aplicações bem mais complexas. Com isso, diversas APIs surgiram e existe conteúdo abundante sobre como os navegadores podem tratar todas elas com o SVG (Scalable Vector Graphics).
Há alguns anos, a Microsoft aplicou uma abordagem de design diferenciada para todos as suas aplicações e serviços bem como todas as interfaces de usuário para dispositivos móveis. Com o advento do iOS 7, a Apple tem substituído os seus princípios de aparência e formato, em favor das boas práticas de design limpo e minimalista. Ainda assim, não deve ser deixado para trás o lançamento que a Google fez do “Material Design” que pode ser usado em qualquer lugar, desde apps até web.
De início, a principal vantagem do SVG – bem divulgado em toda a internet é sua natureza escalável. Durante a montagem de um ícone, o designer não precisa se preocupar sobre “como ele vai ficar” em diferentes dimensões ou em dispositivos móveis com diferentes densidades de pixels, e se concentra apenas em fazer o recurso da melhor forma.
Com os SVGs não há necessidade de exportar dois diferentes formatos de arquivos com base em pixels para exibir em modo retina e não retina. Na verdade, não há necessidade de se preocupar com a densidade dos pixels em cada dispositivo, especialmente levando em conta a sua natureza não padronizada, mas sim mantendo o foco no trabalho artístico.
Uma vez que o ícone está pronto, o designer exporta para um único arquivo no formato “.SVG”, que pode ser redimensionado pelo próprio desenvolvedor sem perda de qualidade, apenas aplicando atributos “width” e “height” com os seus respectivos valores.
Você pode ver um exemplo abaixo da logomarca do navegador Firefox:
upload.wikimedia.org/wikipedia/commons/7/76/Mozilla_Firefox_logo_2013.svg
Contudo, embora os arquivos gerados “.SVG” sejam apenas XML, é muito mais provável que você utilize um editor de imagens vetoriais. As alternativas mais comuns são o Adobe Illustrator e Inkscape, mas no macOS temos uma outra alternativa muito boa chamada Sketch.
Além disso, o SVG funciona melhor quando não é tão complexo. Isso porque o seu tamanho pode aumentar muito dependendo do que você for desenvolver: cores sólidas são muito menores que gradientes, por exemplo. No entanto, isso não significa que você não possa ter gráficos complexos, mas tenha a questão do tamanho do arquivo em mente se for usar SVG em uma página, por exemplo.
Se você utiliza o software Adobe Illustrator, existem algumas coisas que você pode fazer para reduzir consideravelmente esta complexidade na hora de exportar o arquivo SVG. A primeira coisa a fazer é expandir os gráficos, modificando os atributos que definem a sua aparência e outras propriedades de elementos que estão dentro dele. Isso também irá ajudar em coisas como opacidade e gradientes.
Outro aspecto importante que você precisa se atentar é na hora da exportação, que também existem algumas coisas a fazer. Escolha o perfil SVG 1.1, que é o que possui maior compatibilidade entre os navegadores atualmente. Os perfis SVG Tiny 1.1 e as demais variações do SVG são voltados para dispositivos móveis mas ainda não possui um suporte adequado.
Além disso, se você não precisa manipular o texto dinamicamente, converta todas as fontes para objetos. Isso fará com que o texto mantenha as características que você definiu, sem aumentar o tamanho final do arquivo, já que para todos os efeitos os textos serão apenas objetos.
Pelo fato de ser um arquivo baseado em texto, o SVG possui um fator de compressão excelente para diversos segmentos. Um arquivo de 30 KB, por exemplo, cai para 9.6 KB quando servido com a tecnologia GZIP. Se você usar a técnica de Data URIs, um arquivo contendo 13 KB cai para 4.9 KB quando servido com a tecnologia de compressão GZIP.
Espero ter ajudado!
Compartilhe o artigo e deixe seus comentários! 🙂
