Criar conteúdo impressionante para dispositivos móveis significa equilibrar a quantidade de dados transferidos por download com o impacto visual máximo. Gráficos vetoriais são uma ótima maneira de fornecer resultados visuais impressionantes usando o mínimo de largura de banda.
Muitas pessoas pensam no canvas como a única maneira de desenhar uma mistura de vetores e rasterizados na Web, mas há alternativas com algumas vantagens. Uma ótima maneira de fazer desenhos vetoriais é com o uso do Elementos gráficos vetoriais escaláveis (SVG, na sigla em inglês), que são uma parte fundamental do HTML5.
Todos sabemos que o design responsivo é uma parte importante do processamento de vários 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 linha vetoriais e um ótimo complemento para bitmaps. Esse último é mais adequado para imagens de tons contínuos.
Uma das coisas mais úteis sobre o 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 ter uma ótima aparência.
Ferramentas de criação conhecidas, como o aplicativo de desenho no Google Drive, Inkscape, Illustrator, Corel Draw e muitas outras, geram SVG, por isso há muitas maneiras de gerar conteúdo. Vamos mostrar algumas maneiras de usar os recursos SVG e algumas dicas de otimização para você começar.
Noções básicas de escalonamento
Vamos começar com um cenário simples: você quer que uma imagem de página inteira seja o plano de fundo da sua página da Web. Seria muito útil ter o logotipo da sua empresa ou algo parecido em tela cheia em segundo plano o tempo todo, mas é muito difícil de fazer isso com todos os diferentes tamanhos de tela. Para ilustrar, vamos começar com o modesto logotipo do HTML5.
Como você já sabe, o logotipo HTML5 é originado de um arquivo SVG.
Clique no logotipo e observe-o em qualquer navegador moderno. Você verá que ele se ajusta a todas as janelas de qualquer tamanho. Tente abri-la em seu navegador favorito, redimensione a janela e observe que a imagem está nítida em qualquer ampliação. Se tentássemos fazer isso com uma imagem de bitmap, precisaríamos veicular muitos tamanhos diferentes para cada tela que encontraríamos ou sermos forçados a lidar com imagens dimensionadas de forma horrível e pixelada.
Então, qual é o problema? Se você não notou, esse é o único formato que pode ser dimensionado independentemente do dispositivo que estamos usando para analisar. Portanto, só precisamos veicular um recurso para os usuários, sem precisar saber qual é o tamanho da tela ou da janela.
Mas espere, tem mais: o logotipo HTML5 tem apenas 1427 bytes! Isso é tão pequeno que dificilmente sobrecarregará qualquer plano de dados móveis ao carregá-lo, o que agiliza o carregamento e o torna mais barato e rápido para seus usuários.
Outra coisa boa sobre os arquivos SVG é que eles podem ser compactados com GZIP para reduzir ainda mais. Quando você compacta o SVG dessa forma, a extensão do arquivo precisa ser alterada para ".svgz". No caso do logotipo HTML5, ele diminui para apenas 663 bytes quando compactado. A maioria dos navegadores modernos lida com isso com facilidade.
Com nosso arquivo de exemplo em alguns dos dispositivos mais recentes, vemos algo como uma vantagem de 60x ao usar dados vetoriais compactados. Além disso, essas comparações são feitas entre JPEG e SVG, em vez de PNG. No entanto, o formato JPEG tem perdas e resulta em qualidade inferior à do SVG ou PNG. Se usássemos o PNG, a vantagem seria mais de 80x, o que é surpreendente!
No entanto, PNG e JPEG não são criados da mesma forma. Várias dicas de otimização indicam para usar JPEG em vez de PNG, mas essa nem sempre é uma boa ideia. Veja as imagens abaixo. A imagem à esquerda é uma imagem em PNG da parte superior direita do logotipo em HTML5 ampliada em 6x. A imagem à direita é a mesma, mas codificada com JPEG.
É fácil perceber que a redução de tamanho do 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, JPEG é otimizado para fotos, e é por isso que não é tão bom para arte vetorial. De qualquer forma, a versão em SVG tem a mesma qualidade que o PNG em termos de qualidade, ou seja, vence em todas as contas em tamanho e clareza de arquivo.
Como criar planos de fundo vetoriais
Vamos dar uma olhada em como você pode usar um arquivo vetorial como plano de fundo de uma página. Uma maneira fácil é declarar o arquivo de plano de fundo usando o posicionamento fixo 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ê notará que, independentemente do tamanho da tela, a imagem terá um tamanho adequado com bordas nítidas e limpas.
Depois, claro, gostaríamos de colocar um conteúdo em segundo plano.
No entanto, como você pode notar, o resultado não é o ideal, já que não conseguimos ler o texto. O que fazemos?
Como ajustar o plano de fundo para que fique mais bonito
A coisa óbvia que precisamos fazer é deixar toda a cor na imagem de fundo mais clara. Isso pode ser feito facilmente com o uso da propriedade de opacidade CSS ou do próprio arquivo SVG. Para fazer isso funcionar, basta adicionar este código ao seu conteúdo CSS:
#bg {
opacity: 0.2;
}
Isso resultaria em um resultado como este:
Essa solução, embora fácil, provavelmente será um aspecto problemático de desempenho em um dispositivo móvel. Na maioria dos navegadores para dispositivos móveis, o uso da propriedade de opacidade pode ser muito mais lento 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 em HTML5 modificado para parecer esmaecido pela alteração das cores usadas e, nesse processo, evitando a propriedade de opacidade. Assim, a imagem de plano de fundo abaixo parece idêntica ao resultado da mudança de opacidade, mas, na verdade, é muito mais rápida, economizando tempo de CPU e economizando uma preciosa duração da bateria no processo.
Agora que temos um bom entendimento de alguns princípios básicos, vamos passar para alguns outros recursos.
Como usar gradientes com eficiência
Digamos que queremos criar um botão. Podemos começar criando um retângulo com cantos arredondados e bonitos. Assim, poderíamos adicionar um bom gradiente linear para dar ao botão uma boa textura. O código para fazer isso pode ser semelhante a 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 terminaria com algo assim:
Observe como o gradiente que adicionamos vai da esquerda para a direita. Essa é a direção do gradiente padrão no SVG. Mas podemos fazer melhor por alguns motivos: estética e desempenho. Vamos tentar mudar a direção do gradiente para torná-lo um pouco mais agradável. Definir os atributos "x1", "y1", "x2" e "y2" no gradiente linear controla a direção da cor de preenchimento.
Definir apenas o atributo "y2" permite alterar o gradiente para ser diagonal. Portanto, essa pequena mudança no código:
<linearGradient id="blueshiny" y2="1">
nos dá uma aparência diferente para o nosso botão, ele acaba se parecendo 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 vai ficar parecida com a imagem abaixo.
O que está acontecendo com toda essa discussão sobre ângulos diferentes do gradiente?
Acontece que o último exemplo, aquele com o gradiente correndo de cima para baixo, é o mais rápido de desenhar na maioria dos dispositivos. É um segredo pouco conhecido entre os geeks gráficos que escrevem código para navegadores que gradientes verticais (de cima para baixo) pintam quase tão rápido quanto uma cor sólida. O motivo é que a pintura de um objeto é feita em linhas horizontais na página. E o código do desenho entende que a cor não muda em cada linha e, por isso, é otimizada.
Portanto, quando você optar por usar gradientes no design da sua 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 se trata apenas de SVG.
Se nos sentirmos realmente aventureiros com esse novo conhecimento sobre gradientes, talvez seja possível adicionar um gradiente legal atrás do nosso logotipo HTML5 adicionando 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 esmaecido ao fundo do nosso logotipo HTML5 para dar uma tonalidade multicolorida sutil que funciona rapidamente, tão rápida quanto um fundo de cor sólida.
Se você carregar o conteúdo em um navegador de computador e redimensionar para proporções extremas, você verá barras brancas nas partes superior/inferior ou esquerda/direita. De qualquer forma, depois que as alterações de código feitas acima do plano de fundo resultante ficarem assim:
Anime com facilidade
Agora você deve estar se perguntando por que adianta usar um gradiente SVG como pano de fundo da sua página. De fato, pode fazer sentido fazer isso com gradientes CSS, mas uma vantagem do SVG é que o próprio gradiente reside no DOM. Isso significa que ele pode ser modificado com um script, mas, mais importante, você pode aproveitar o recurso de animação integrado do SVG para fazer mudanças sutis no seu conteúdo.
Como exemplo, vamos modificar nosso logotipo colorido em HTML5 alterando 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 conferir o resultado dessas mudanças.
O código muda as cores do nosso 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 se movendo na página em um movimento contínuo que nunca para.
A beleza é que você não precisa de script. É por isso que ele é executado como uma imagem de referência nesta página, mas também reduz a carga de trabalho em uma CPU móvel ao eliminar a necessidade de script.
Além disso, o próprio navegador pode aproveitar o conhecimento que tem sobre a pintura para garantir que a sobrecarga mínima da CPU seja usada para fazer a animação sofisticada.
Há uma ressalva: alguns navegadores não lidam com esse estilo de animação, mas nesse caso você ainda terá um bom plano de fundo colorido, mas isso não muda. Isso pode ser resolvido usando script (e requestAnimationFrame), mas isso está um pouco além deste artigo.
Mais uma coisa a observar é que esse arquivo SVG descompactado tem apenas 2.922 bytes - incrivelmente pequeno para fornecer um efeito gráfico tão rico, mantendo seus usuários e planos de dados felizes no processo.
De onde vem?
O SVG não é o ideal em muitos casos, e fotos e vídeos são mais bem representados em outros formatos. O texto é outro tipo, no qual HTML e CSS nativos funcionam muito melhor em geral. No entanto, como ferramenta no arsenal de artes desenhadas em linhas, pode ser a escolha ideal.
Abordamos alguns usos básicos para gráficos SVG, mostrando como é fácil gerar conteúdo pequeno que fornece gráficos vívidos em tela cheia com uma quantidade mínima de download. Pequenas melhorias no conteúdo podem criar incríveis resultados gráficos facilmente com quantidades triviais de marcação. No próximo artigo, vamos conhecer mais detalhes sobre como a animação integrada ao SVG pode ser usada para criar efeitos mais simples e eficientes. Além disso, vamos comparar o uso do canvas com o SVG para escolher a ferramenta certa de criação de sites gráficos 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 enorme biblioteca de clip art de código aberto que contém milhares de imagens SVG.
- Página do SVG do W3C com links para especificações, recursos etc.
- Raphaël: uma biblioteca JavaScript que fornece uma API conveniente para desenhar e animar conteúdo SVG com excelente substituto para navegadores mais antigos.
- Recursos SVG da Slippery Rock University: incluem um link para um excelente SVG Primer.