Criar conteúdo para dispositivos móveis que impressiona significa equilibrar a quantidade de dados transferidos por download com o impacto visual máximo. Os gráficos vetoriais são uma ótima maneira de gerar resultados visuais incríveis usando a largura de banda mínima.
Muitas pessoas pensam que a tela é a única maneira de desenhar uma mistura de vetores e rasters na Web, mas existem alternativas que têm algumas vantagens. Uma ótima maneira de fazer desenhos vetoriais é usar Elementos gráficos vetoriais escaláveis (SVG, na sigla em inglês), que são uma parte essencial do HTML5.
Todos sabemos que o design responsivo é uma parte importante do processamento de diferentes tamanhos de tela, e o SVG é ideal para lidar com telas de diferentes tamanhos com facilidade.
O SVG é uma ótima maneira de apresentar desenhos de linhas baseados em vetores e é um ótimo complemento para bitmaps, sendo mais adequado para imagens de tons contínuos.
Uma das coisas mais úteis do SVG é que ele é independente da resolução, o que significa que você não precisa pensar em quantos pixels tem no seu dispositivo. O resultado sempre será dimensionado e otimizado pelo navegador para ficar ótimo.
Ferramentas de criação conhecidas, como o aplicativo Desenho no Google Drive, Inkscape, Illustrator, Corel Draw e muitas outras geram SVG, por isso há muitas maneiras de gerar conteúdo. Vamos abordar algumas maneiras de usar recursos SVG, além de algumas dicas de otimização para você começar.
Fundamentos de escalonamento
Vamos começar com um cenário simples: você quer que um gráfico de página inteira seja o plano de fundo da sua página da Web. Seria muito útil ter o logotipo da empresa ou algo parecido em tela cheia em segundo plano o tempo todo, mas, é claro, isso é muito difícil de fazer com todos os tamanhos de tela diferentes. Para ilustrar, começaremos com o modesto logotipo HTML5.
O logotipo do HTML5 é mostrado abaixo. Ele é originado como um arquivo SVG.
Clique no logotipo e confira em qualquer navegador moderno. Você vai notar que ele é dimensionado perfeitamente para qualquer tamanho de janela. Abra a imagem no seu navegador favorito, redimensione a janela e observe se a imagem fica nítida em qualquer ampliação. Se tentássemos fazer isso com uma imagem bitmap, precisaríamos exibir muitos tamanhos diferentes para cada tela que encontrássemos ou ser forçados a usar imagens dimensionadas com muitos pixels.
Qual é o problema? Se você não notou, esse é o único formato que pode ser dimensionado de forma independente do dispositivo que estamos usando. Portanto, só precisamos veicular um recurso para os usuários, sem precisar saber o tamanho da tela ou da janela.
Mas espere, tem mais: o logotipo HTML5 tem apenas 1.427 bytes! Isso é tão pequeno que mal vai afetar qualquer plano de dados móveis ao ser carregado, o que torna o carregamento rápido e barato para os usuários.
Outra vantagem dos arquivos SVG é que eles podem ser compactados com GZIP para reduzir ainda mais o tamanho. Quando você compacta o SVG dessa maneira, a extensão do arquivo precisa ser alterada para ".svgz". No caso do logotipo HTML5, ele é reduzido para apenas 663 bytes quando compactado, e a maioria dos navegadores modernos consegue processá-lo com facilidade.
Com nosso arquivo de exemplo em alguns dos dispositivos mais recentes, observamos uma vantagem de 60 vezes usando dados vetoriais compactados. Além disso, essas comparações estão sendo feitas entre JPEG e SVG, e não PNG. No entanto, o JPEG é um formato com perdas, o que resulta em uma qualidade inferior à do SVG ou PNG. Se usássemos PNG, a vantagem seria de mais de 80 vezes, o que é surpreendente.
Mas, claro, PNG e JPEG não são iguais. Várias dicas de otimização recomendam o uso de JPEG em vez de PNG, mas nem sempre isso é uma boa ideia. Confira as imagens abaixo. A imagem à esquerda é uma imagem PNG da parte superior direita do logotipo do HTML5 ampliada 6 vezes. A imagem à direita é a mesma coisa, mas codificada com JPEG.
É fácil perceber que a economia de tamanho de arquivo em JPEG tem um custo, com artefatos de cor nas bordas nítidas, o que provavelmente faz sua retina pensar que precisa de óculos:-) Para ser justo, o JPEG é otimizado para fotos e, por isso, não é tão bom para arte vetorial. De qualquer forma, a versão SVG tem a mesma qualidade do PNG, então é a melhor opção em todos os aspectos, incluindo tamanho de arquivo e clareza.
Como criar planos de fundo vetoriais
Vamos conferir como usar um arquivo vetorial como plano de fundo de uma página. Uma maneira fácil é declarar seu arquivo de plano de fundo usando a posição fixa do CSS:
<style>
#bg {
position:fixed;
top:0;
left:0;
width:100%;
z-index: -1;
}
</style>
<img src="HTML5-logo.svgz" id="bg" alt="HTML5 logo"></pre>
Você vai notar que, não importa o tamanho da tela, a imagem é dimensionada corretamente com bordas nítidas e limpas.
E, claro, queremos colocar algum conteúdo sobre o plano de fundo.
No entanto, como você pode ver, o resultado não é o ideal, porque não podemos ler o texto. O que fazemos?
Como ajustar o plano de fundo para ficar mais bonito
A coisa óbvia que precisamos fazer é tornar todas as cores na imagem de plano de fundo mais claras. Isso é facilmente alcançado usando a propriedade de opacidade do CSS ou usando a opacidade no próprio arquivo SVG. Você pode fazer isso funcionar simplesmente adicionando este código ao seu conteúdo CSS:
#bg {
opacity: 0.2;
}
O resultado seria este:
Essa solução, embora fácil, provavelmente será um ponto de dor de desempenho em um dispositivo móvel. Para a maioria dos navegadores para dispositivos móveis, o uso da propriedade de opacidade pode ser muito mais lento para renderizar em comparação com objetos opacos.
Uma solução melhor
Modificar a cor no conteúdo SVG original é muito melhor do que definir a opacidade com CSS. Aqui está nosso logotipo HTML5 modificado para parecer desbotado, mudando as cores usadas e evitando a propriedade de opacidade. A imagem de plano de fundo abaixo é idêntica ao resultado da mudança de opacidade, mas é muito mais rápida e economiza tempo de CPU e a preciosa duração da bateria no processo.
Agora que já temos uma boa noção dos princípios básicos, vamos passar para outros recursos.
Como usar gradientes de maneira eficiente
Vamos supor que queremos criar um botão. Podemos começar criando um retângulo com cantos arredondados. Em seguida, podemos adicionar um gradiente linear para dar uma textura legal ao botão. O código para fazer isso pode ser parecido com este:
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="blueshiny">
<stop stop-color="#a0caf6" offset="0"/>
<stop stop-color="#1579df" offset="0.5" />
<stop stop-color="#1675d6" offset="0.5"/>
<stop stop-color="#115ca9" offset="1"/>
</linearGradient>
</defs>
<g id="button" onclick="alert('ouch!');">
<rect fill="url(#blueshiny)" width="198" height="83" x="3" y="4" rx="15" />
<text x="100" y="55" fill="white" font-size="18pt" text-anchor="middle">Press me</text>
</g>
</svg>
O botão resultante ficaria assim:
Observe como o gradiente que adicionamos vai da esquerda para a direita. Essa é a direção de gradiente padrão no SVG. Mas podemos fazer melhor por alguns motivos: estética e desempenho. Vamos mudar a direção do gradiente para que ele fique um pouco melhor. A definição dos atributos "x1", "y1", "x2" e "y2" no gradiente linear controla a direção da cor de preenchimento.
A definição do atributo "y2" permite mudar o gradiente para diagonal. Essa pequena mudança no código:
<linearGradient id="blueshiny" y2="1">
dá um visual diferente ao botão, que fica parecido com a imagem abaixo.
Também podemos mudar facilmente o gradiente para ir de cima para baixo com esta pequena mudança no código:
<linearGradient id="blueshiny" x2="0" y2="1">
e ela ficará parecida com a imagem abaixo.
Você pode estar se perguntando por que toda essa discussão sobre os diferentes ângulos do gradiente.
O último exemplo, aquele com o gradiente de cima para baixo, é o mais rápido de desenhar na maioria dos dispositivos. Esse é um segredo pouco conhecido entre os geeks gráficos que escrevem códigos de navegador que os gradientes verticais (de cima para baixo) pintam quase tão rapidamente quanto uma cor sólida. O motivo é que a pintura de um objeto é feita em linhas horizontais na página, e o núcleo do código de exibição entende que a cor não muda em cada linha e, portanto, a otimiza.
Portanto, quando você escolher usar gradientes no design da página, os gradientes verticais serão mais rápidos e usarão menos bateria como efeito colateral. Essa aceleração também se aplica a gradientes CSS, então não é apenas uma coisa do SVG.
Se você quiser se aventurar com esse novo conhecimento sobre gradientes, adicione um gradiente legal atrás do logotipo HTML5 usando o código abaixo:
<defs>
<linearGradient id="grad1" x2="0" y2="1">
<stop stop-color="#FBE6FB" offset="0" />
<stop stop-color="#CCCCFF" offset="0.2" />
<stop stop-color="#CCFFCC" offset="0.4" />
<stop stop-color="#FFFFCC" offset="0.6" />
<stop stop-color="#FFEDCC" offset="0.8" />
<stop stop-color="#FFCCCC" offset="1" />
</linearGradient>
</defs>
<rect x="-200" y="-160" width="910" height="830" fill="url(#grad1)"/></pre>
O código acima adiciona um gradiente linear vertical desbotado ao plano de fundo do logotipo HTML5 para dar um tom sutil de várias cores que é executado rapidamente, tão rápido quanto um plano de fundo de cor sólida.
Se você carregar o conteúdo em um navegador para computador e redimensionar para proporções extremas, barras brancas vão aparecer na parte de cima/de baixo ou nos lados esquerdo/direito. De qualquer forma, depois das mudanças feitas no código acima, o plano de fundo resultante vai ficar assim:
Animar com facilidade
Talvez você esteja se perguntando qual é o objetivo de usar um gradiente SVG como plano de fundo da sua página. Pode fazer sentido fazer isso com gradientes CSS, mas uma vantagem do SVG é que o gradiente em si fica no DOM. Isso significa que você pode modificá-lo com script, mas, mais importante, pode aproveitar o recurso de animação integrado do SVG para adicionar mudanças sutis ao seu conteúdo.
Como exemplo, modificaremos nosso logotipo HTML5 colorido mudando a definição do gradiente linear para o código abaixo:
<linearGradient id="grad1" x2="0" y2="1">
<stop stop-color="#FBE6FB" offset="0">
<animate attributeName="stop-color"
values="#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB"
begin="0s" dur="20s" repeatCount="indefinite"/>
</stop>
<stop stop-color="#CCCCFF" offset="0.2">
<animate attributeName="stop-color"
values="#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF"
begin="0s" dur="20s" repeatCount="indefinite"/>
</stop>
<stop stop-color="#CCFFCC" offset="0.4">
<animate attributeName="stop-color"
values="#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC"
begin="0s" dur="20s" repeatCount="indefinite"/>
</stop>
<stop stop-color="#FFFFCC" offset="0.6">
<animate attributeName="stop-color"
values="#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC"
begin="0s" dur="20s" repeatCount="indefinite"/>
</stop>
<stop stop-color="#FFEDCC" offset="0.8">
<animate attributeName="stop-color"
values="#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC"
begin="0s" dur="20s" repeatCount="indefinite"/>
</stop>
<stop stop-color="#FFCCCC" offset="1">
<animate attributeName="stop-color"
values="#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC"
begin="0s" dur="20s" repeatCount="indefinite"/>
</stop>
</linearGradient>
Confira a imagem abaixo para ver o resultado dessas mudanças.
O código está mudando as cores do gradiente linear em todas as diferentes paradas de cor que definimos em um ciclo contínuo que leva 20 segundos para ser executado. O efeito disso é que o gradiente parece estar subindo a página em um movimento contínuo que nunca para.
A beleza disso é que não é necessário um script. É por isso que ela é executada como uma imagem referenciada desta página, mas também reduz a carga de trabalho em uma CPU de dispositivo móvel, removendo a necessidade de script.
Além disso, o próprio navegador pode aproveitar o conhecimento da pintura para garantir que a sobrecarga mínima da CPU seja usada para fazer a animação.
Há uma ressalva: alguns navegadores não processam esse estilo de animação, mas, nesse caso, você ainda terá um belo fundo colorido, mas ele não vai mudar. Isso pode ser resolvido usando o script (e requestAnimationFrame), mas isso está um pouco além deste artigo.
Outra coisa a se notar é que esse arquivo SVG descompactado tem apenas 2.922 bytes, um tamanho incrivelmente pequeno para fornecer um efeito gráfico tão rico, mantendo os usuários e os planos de dados felizes no processo.
O que fazer depois disso?
Há muitos casos em que o SVG não é o ideal, e fotos e vídeos são melhor representados em outros formatos. O texto é outro exemplo, em que o HTML e o CSS nativos funcionam muito melhor em geral. No entanto, como uma ferramenta no arsenal para desenhos de linha, ela pode ser a escolha ideal.
Mencionamos alguns usos básicos e fundamentais de gráficos SVG, mostrando como é fácil gerar conteúdo pequeno que oferece gráficos vívidos em tela cheia com uma quantidade mínima de download. Pequenas melhorias no conteúdo podem criar ótimos resultados gráficos facilmente com quantidades triviais de marcação. No próximo artigo, vamos explorar mais alguns detalhes sobre como a animação integrada ao SVG pode ser usada para efeitos mais simples e poderosos e comparar o uso de canvas com SVG para escolher a ferramenta certa para criar seu site gráfico para dispositivos móveis.
Outros bons recursos
- O Inkscape é um aplicativo de desenho de código aberto que usa SVG como formato de arquivo.
- Open Clip Art, uma biblioteca de clip art de código aberto enorme com milhares de imagens SVG.
- Página do SVG do W3C com links para especificações, recursos etc.
- Raphaël, uma biblioteca JavaScript que oferece uma API conveniente para desenhar e animar conteúdo SVG com um ótimo substituto para navegadores mais antigos.
- SVG Resources da Slippery Rock University: inclui um link para um ótimo SVG Primer.