MDM Studio | Responsive Design
Compartilhe esta notícia no Facebook

MDM aperfeiçoa técnicas de utilização de imagens SVG em seus projetos

Ao adotar, de forma responsável, o uso de formatos como o SVG em seus projetos, você entrega layouts surpreendentes, flexíveis e com alta qualidade técnica e visual.

SVG para web: Como melhorar o aspecto de páginas web

Como falamos anteriormente, o formato SVG está se tornando popular em websites mais modernos, tanto pela qualidade visual entregue na tela do usuário quanto pela possibilidade de manipulação de elementos (troca de cores, posicionamento, animações nativas via CSS etc).

Ao adotar, de forma responsável, o uso de formatos como o SVG em seus projetos, você entrega layouts surpreendentes, flexíveis e com alta qualidade técnica e visual (inclusive em monitores retina, com o dobro de resolução) sem perder a performance no carregamento das páginas.

Estudando sobre o assunto pudemos observar que é possível melhorar o processo de renderização de arquivos SVG para sites apenas seguindo alguns passos simples (e o software da Adobe, Illustrator). Confira abaixo:

Utilize as ferramentas disponíveis para criação de formatos simples

Pode parecer óbvio, mas, ao invés de criar elipses, quadrados ou outras formas básicas, usando {path} (caminho), utilize as ferramentas nativas do Illustrator. Elas vão gerar um código muito mais limpo e de fácil manutenção. Além disto, se você precisar criar animações neste elemento, será muito mais simples alterar o valor da circunferência, as coordenadas X e Y, cor de fundo e cor de borda num {circle} do que num {path}.

Trabalhando com textos

Se o navegador já renderizou aquela fonte especial usada em seu projeto e você tem certeza de que o cliente receberá o conteúdo correto, sem falhas, entregue o SVG também em formato editável. Mais uma vez, a manutenção é mais fácil, permite que os buscadores leiam o conteúdo do arquivo (indexando as páginas mais facilmente) e gera um código muito menor do que aquele arquivo convertido em caminho.

Porém, se não tem certeza sobre a fonte utilizada e quer garantir que o usuário veja sua arte sem falhas, converta as fontes em caminhos. Assim todo o "desenho" da letra será um {path} (que gerará um arquivo XML maior e mais pesado), porém mais confiável.

  • Type - Create Outlines ou Tipo - Criar Contornos

Simplifique os caminhos

{path} é um conjunto de pontos com coordenadas (que se ligam uns aos outros) formando um desenho. Muitas vezes criamos mais pontos do que o necessário para compor uma arte. O Illustrator possui uma ferramenta interessante para estes casos: Simplify.

  • Selecione o caminho - Object - Path - Simplify ou Selecione o caminho - Objeto - Caminho - Simplificar

Ajuste as configurações desejadas e acompanhe no "preview" sempre tentando diminuir ao máximo o número de pontos de sua arte enquanto não se perde a qualidade original. Este processo vai gerar um SVG mais leve e enxuto.

Cuidado ao unir caminhos (Pathfinder - Merge)

Se sua intenção é criar animações utilizando o SVG, tome cuidado ao unir caminhos no Illustrator. Uma vez unidos, você não poderá controla-los de forma indepentende em uma animação. A menos que seja esta sua intenção, evite usar essa funcionalidade.

  • Window - Pathfinder - Selecione os objetos - Merge ou Janela - Pathfinder - Selecione os objetos - Unir

Aplicando filtros (efeitos visuais)

Existem filtros dedicados somente a artes em SVG. Quando possível, evite utilizar os filtros do Photoshop em seu arquivo, preferindo, sempre, os filtros especiais para SVG.

Por exemplo: Se você criar uma sombra usando o efeito "Blur" do Photoshop, seu arquivo SVG vai gerar uma imagem renderizada deste efeito e incorpora-la no arquivo através da tag {image}, o que não é uma boa opção em termos de tamanho de arquivo.

  • Effect - SVG Filters ou Efeito - Filtros SVG

Ajuste o tamanho da tela ao tamanho da arte

Para que você consiga manipular largura e altura de imagens SVG corretamente em documentos web, deixe sua arte sempre sem espaços em branco nas laterais. Assim, quando estipular as dimensões do arquvio em páginas HTML, a imagem terá exatamente a medida que você definir. Caso contrário, pode ser complicado achar o valor correto se a arte possuir bordas em branco (vazias) dentro do documento.

  • Object - Artboards - Fit to Artwork Bounds ou Objeto - Pranchetas - Alinhar aos limites da arte

Dê atenção aos nomes das camadas e grupos (layers)

Parece besteira ou retrabalho, mas, nomear corretamente as camadas e grupos dentro do Illustrator vai te poupar bastante tempo quando você precisar manipular elementos individualmente em páginas web (com o CSS). O nome que você atribuir no Illustrator, será usado como ID e classes no arquivo SVG.

Ajustes de exportação pra Web

Quando finalizar sua arte e for exporta-la para web, o Illustrator oferece uma série de recursos que melhoram, ainda mais, o tamanho e performance do arquivo exportado.

  • File - Save As - Selecione SVG (svg) - Save ou Arquivo - Salvar como - Selecione SVG (svg) - Salvar

Caso não vá utilizar seu arquivo SVG para animações, é recomendável, também, otimizar o arquivo SVG depois de exporta-lo usando uma ferramenta própria para isto. Uma que atende bem as nossas necessidades é a SVGO (Baseada em Node-JS).

Ferramantas de otimização SVG, geralmente, removem IDs e classes não usadas. Você pode, também, remover manualmente códigos gerados por aplicativos no início ou no fim do documento para reduzir o tamanho do arquivo ou utilizar as opções de SVG otimizado do Illustrator.

Safari: Pinned Tabs (SVG)

Onde mais estamos usando imagens em SVG?

Recentemente a Apple entregou uma atualização de seu navegador (Safari) com uma novidade: Pinned Tabs. Isso já existe em outros navegadores (como o Google Chrome) mas a diferença é que, no Safari, as abas fixadas são persistentes, ou seja, elas continuam lá quando você fecha o navegador e inicia uma nova sessão. Além disto, elas ficam sincronizadas, ou seja, se você abrir duas janelas no Safari, acessar seus sites "pinados/fixados" e acessar o mesmo site numa nova janela, ele vai estar na mesma posição que você deixou na janela anterior (incluindo audio e vídeo).

Veja um vídeo (em inglês) sobre as PinTabs do Safari

Com o suporte às PinTabs, veio também o suporte aos ícones das janelas fixadas em formato SVG. E o que fica em destaque no navegador é justamente o ícone, por isso ele deve ser projetado com cuidado.

Em relação a código web, basta apenas uma nova linha de código para adicionar suporte a Pinned Tabs em seu website:
link rel="mask-icon" href="/favicon.svg" color="#990000"

Boas práticas

  • Ao criar seu ícone em SVG, evite detalhes e deixe seu ícone o mais simples possível. Lembre-se que o tamanho destes elementos numa janela de navegador é bem limitado (32px x 32px ou 16px x 16px).
  • Também é importante não esquecer dos velhos formatos: favicon.ico e apple-touch-icon.png.

Aproveite o poder do SVG para melhorar a qualidade de seu trabalho.

São detalhes que fazem a diferença e esse é nosso negócio: criar layouts funcionais e que explorem, ao máximo, os recursos tecnológicos disponíveis para aumentar a experiência do usuário ao navegar na web.

Tem alguma dúvida? Quer saber mais sobre nossos trabalhos e soluções?
Entre em contato.


22 de Novembro de 2015 [19:37:35]

CEO da MDM Studio, Marcelo Motta participa ativamente do processo de produção de websites, tendo em seu portfólio mais de 130 trabalhos finalizados, entre marcas, websites e sistemas web. Os projetos mais recentes contam com a estrutura do HTML 5, combinados com CSS3 e versões mobile através de media queries.
 

TechNews

Informativos MDM Studio, Games e Tecnologia

Assine nosso Feed RSS