Porque Você Não Está Utilizando Gráficos SVG?

Portuguese (Português) translation by thierry rene matos (you can also view the original English article)

SVG ou Scalable Vector Graphics, basicamente é uma solução utilizada para renderizar gráficos vetores em páginas web. O SVG é aceito em qualquer navegador com exceção do IE < v9 e Android < v3. O mesmo suporte vale para canvas, ai que sempre surge a questão: qualquer solução devo utilizar?

Neste artigo vamos analisar o SVG e explicar porque a questão "qual devo utilizar" pode ser respondida com a questão "o que você deseja fazer?". Para maiores informações sobre os elementos que compõem o SVG, de uma olhada na seção de documentos da Mozila sobre o assunto. Recomendo também dar uma olhada na SVG DOM API.

Introdução

Vamos começar apresentando algumas vantagens exclusivas do SVG. Depois, ao invés de analisar diversos exemplos de utilização do SVG e suas funcionalidades, nós vamos partir direto para testes com o Illustrator, criando gráficos SVG para web. Também vamos analisar a biblioteca JavaScript D3.js, utilizada para manipular gráficos SVG.

"SVG não é recomendado para manipular pixels."

Melhores vantagens do SVG

Gráficos gerados com SVG tem algumas vantagens sobre imagens e gráficos renderizados com canvas em certas aplicações. Não é recomendado o uso do SVG para manipular pixels; em contra partida, ele é muito útil para criação e manipulação de vetores.

Resolução independente

Caso você não saiba, design responsivo é um tópico bastante discutido nas comunidade de desenvolvimento front-end. A maioria das soluções existentes para solucionar problemas de resolução envolvem o download de diversos arquivos ou não fornecem suporte a todos os navegadores. Isso faz com que todo o trabalho fique nas costas da sua conexão, que na maioria das vezes não é lá essas coisas, além de exigirem mais performance dos dispositivos e consequentemente energia. Não é a forma ideal de tratar a questão.

"O SVG fornece uma maneira para criar gráficos em alta resolução, não importa a resolução ou tamanho da tela, o level de zoom, ou qual resolução o dispositivo do seu usuário possui."

O SVG fornece uma maneira para criar gráficos em alta resolução, não importa a resolução ou tamanho da tela, o level de zoom, ou qual resolução o dispositivo do seu usuário possui. Antes este tipo de recurso só era visto em experimentos com CSS e renderização de texto. Utilizar DIVs e elementos :after para criar shapes e outros efeitos não é necessário com SVG. Ao invés disso, você consegue criar vetores de todos os tipos (inclusive shapes) com SVG.

DOM Node-Based API

Você programa em HTML/CSS/JS? Muito bom, então você já sabe o básico para começar a utilizar SVG, que utiliza marcação XML para renderizar os gráficos. Além disso, você pode estilizar os gráficos com CSS e criar interações com JavaScript. Existem várias bibliotecas JavaScript para auxiliar na utilização de gráficos SVG, como por exemplo a D3.js e a Raphael. Abaixo um exemplo de grupo de elementos SVG, criando o símbolo da Envato. Este exemplo também está disponível no JSFiddle.

<svg>
<g>
  <g>
		<path fill="#8BAC54" d="M28.028,104.509c-35.271,44.527-36.619,105.084-7.616,150.407
			c26.073-66.957,58.919-142.287,99.378-209.543C81.802,61.428,46.351,81.377,28.028,104.509z M278.797,11.28
			c-0.408-3.492-2.227-6.447-4.845-8.41c-2.5-2.097-5.802-3.197-9.304-2.784c0,0-10.403,2.227-26.959,6.483
			C158.62,82.498,93.735,184.229,43.453,281.932c1.875,1.628,3.778,3.255,5.749,4.794c56.202,44.471,137.782,34.972,182.238-21.163
			C282.657,200.806,278.797,11.28,278.797,11.28z"/>
	</g>
	<g>
		<path fill="#B1C982" d="M58.392,293.368c59.428-95.491,133.438-188.549,220.117-247.851c0.558-20.869,0.289-34.238,0.289-34.238
			c-0.408-3.492-2.227-6.447-4.845-8.41c-2.5-2.097-5.802-3.197-9.304-2.784c0,0-10.403,2.227-26.959,6.483
			C158.62,82.498,93.735,184.229,43.453,281.932c1.875,1.628,3.778,3.255,5.749,4.794C52.185,289.102,55.271,291.308,58.392,293.368
			z"/>
	</g>
</g>
</svg>

A DOM node-based API do SVG está mais acessível que a API client-side que utiliza o canvas. Com isso você pode:

Criar documentos SVG baseado em imagens, no servidor.
Inspecionar elementos SVG da mesma forma que qualquer outro elemento HTML.
Manipular estilos e os formatos dos gráficos com programação (JavaScript e CSS).
Atrelar eventos.

A DOM API oferece uma série de recursos interessantes para utilizar com SVG.

Sem requisições HTTP desnecessárias

Quando você utiliza uma imagem em um documento HTML com a tag <img>, você gera uma solicitação (requisição) no navegador do usuário. Essa solicitação vai demandar banda e pode levar um tempo para o download. Se a sua imagem for um conjunto de dom nodes, você elimina as solicitações extras no servidor, fazendo com que o seu website carregue mais rápido otimizando a experiência do usuário.

Códigos interativos

Deixando de lado a guerra entre navegadores, a DOM API, em todos os navegadores, oferece bastante flexibilidade em termos códificação interativa/scripting interactivity, que se expande até os elementos SVG. Estilos em gráficos SVG são tratados com CSS. Ter eventos de uma API no navegador para elementos SVG otimiza e muito a forma como escrevemos códigos. Você pode apenas atribuir um handler a um node especifico de um elemento SVG e está pronto.

Isso não é a realidade para elementos gerados no canvas. Tendo em mente que o canvas é apenas uma engine que renderiza imagens, podemos prever que ele não consegue consegue guardar os gráficos na memória, como objetos. O script tem o trabalho de coletar esses elementos, monitorando informações como posição e tamanho para disparar eventos. Além disso, o z-indexing também pode ser utilizado com scripts.

Vamos analisar um exemplo. Digamos que você quer detectar o hover do mouse em um círculo no canvas. Ps: vamos assumir que o canvas tem o tamanho total da página e vamos utilizar jQuery para facilitar o exemplo:

var circleCenter = [200, 300], radius = 50;
$(window).on("mousemove", function(e){
	var mx = e.pageX, my = e.pageY;
	if (mx > circleCenter[0] - radius && mx < circleCenter[0] + radius && my > circleCenter[1] - radius && my < circleCenter[1] + radius){
		// now we are hovering
	}

});

Esse não é um código atípico ou incomum, se você utilizou a API do navegador, parece um processo frustrado apenas checar o hover. Esse é um exemplo comum em outras interfaces de programação como o Unity3D e o Processing. Para web, temos diversas ferramentas a disposição que já suportam a maioria dos eventos comuns que podemos utilizar. Você poderia deixar pronto um conjunto de funções mais utilizadas, para quando houver a necessidade, mas não seria melhor ir direto ao ponto? Em contraste, podemos notas a facilidade da mesma tarefa utilizando SVG.

$("svg path#circle").on("hover", function(event){
	// That's all.
});

Isso é muito mais eficiente para desenvolvedores que lidam com interatividade.

Aplicações práticas

Existem várias bibliotecas JavaScript para manipular o canvas (como a KineticJS que pode te ajudar a criar uns exemplos bem legais, mas se você é como eu, não está utilizando todos os recursos da biblioteca. Ao invés disso, sempre procurei por ícones escaláveis, gráficos interativos e detalhado, e belas formas de apresentar informação aos usuários. A minha necessidade em física não passava de simples equações. Esses elementos são facilmente criados com SVG, e algumas equações simples que parecem suprir minha necessidade. Vamos dar uma olhada em algumas aplicações práticas do SVG.

Gráficos O maior propósito do SVG é gerar formas/shapes, então é natural que ele trabalhe bem com gráficos e infográficos. Pode também ser utilizado para gráficos estáticos ou animados, com AJAX, user input, ou dados randômicos.
Mapas de estrada Mapas de estradas se baseiam em retas bem detalhadas, que podem ser facilmente reproduzidas com SVG, e ainda permite o zoom sem perda de qualidade.
Elementos UI complexos Digamos que você quer um elemento UI que parece uma piramide de círculos. Como fazer isso com HTML e CSS? Você pode fazer criando várias divs e sobrepondo uma a outra, sem contar que teria de estilizar todas as divs, gerar um gradient, inserir imagens, que não seriam apresentadas da melhor forma, entre outros problemas. Porque não criar o elemento no illustrator e apenas exportar o arquivo SVG? Isso faz com que você tenha apenas um elemento e não precise lidar com diversas DIVs.
Logos A maioria dos logos são criados com vetores. Você pode definir uma arquivo SVG como logo e utilizar ele em todo lugar, alterando o tamanho conforme a necessidade visto que vetores preservam a qualidade do gráfico e poupa a banda da conexão.
Jogos Não é segredo que o canvas funciona muito bem renderizando jogos. Parte disso é o fato de jogos não dependerem de vetores gráficos; ao invés de vetores, jogos utilizam gráficose animações baseados em pixels. De qualquer forma, SVG é indicado para jogos que requerem menos animações de personagems e mais informações (o Sudoku é um exemplo).

Porque você provavelmente não está utilizando SVG

Agora que analisamos as vantagens do SVG, vamos analisar porque muitos desenvolvedores optam ainda por não utilizar o recurso. Existem duas principais razões para os desenvolvedores não adotarem o uso do SVG.

Talvez eles nem saibam da existência do recurso e nunca sentiram a necessidade do mesmo (e isso não serve como desculpa).
Um arquivo SVG XML pode parecer bem complexo e arcaico, as vezes pode ser mais fácil apenas utilizar uma imagem.

Ninguém realmente deseja sentar e ficar editandos os pontos em um arquivo SVG XML. Por sorte, você não precisa editar o arquivo SVG na raça (código), existem ferramentas a sua disposição para edição de gráficos em SVG.

Ferramentas para trabalhar com SVG

Illustrator, Inkscape

Se você tem um editor de vetores, é bem provável que ele consiga salvar arquivos como SVG. Vá em frente e teste o seu editor. Abra o illustrator, desenhe algumas formas e salve como um arquivo SVG. Depois, abra esse arquivo no Sublime Text ou qualquer outro editor de código. Você vai notar, que tirando algumas informações meta irrelevantes, você tem o código XML pronto para ser incorporado ao documento HTML. As tags mais apresentadas são <g> (de group), <path> (de path), e <svg>.

D3.js

E se ao invés de apenas incorporar o SVG no HTML, nós criarmos ele dinamicamente, com códigos JavaScript? Para isso que serve a biblioteca D3.js, que se intitula uma "biblioteca para manipular documentos baseados em dados". Em outras palavras, ela é ótima para gerar elementos SVG como gráficos em barra ou linha, baseados em um grupo de informações. Nós escolhemos apresentar o D3.js devido a sua facilidade de integração e utilização com SVG. Tenha em mente que existem outras bibliotecas, muito boas, para o mesmo propósito (vide Raphael.js).

De todo modo, o D3.js faz muito mais que apenas manipular gráficos SVG, mas pelo bem da nossa sanidade isso é tudo que vamos ver por hoje. (Para maiores informações sobre o D3.js acesse o site oficial do D3.js, e veja este workshop elaborado pelo Mike em seu website).

Primeiro exemplo: Pulsing Circle

Neste exemplo, criamos um circulo pulsante utilizando Math.sin e um iterator com setInterval. Pulsing Circle

Example 2: Updating Line Plot

Neste exemplo, nos atualizamos um gráfico em linha com valores randômicos. Line graph

Quando você não deve utilizar gráficos SVG?

O SVG pode auxiliar em várias das suas necessidades em relação a renderização de imagens no navegador. Enquanto existem de fato diversos bons motivos para utilizar gráficos SVG, como toda boa ferramenta, existem também alguns contras.

Se seu gráfico tem vários pontos, pode apresentar uma melhor performance se executado no canvas (já que o navegador não vai precisar criar cada objeto renderizado e não precisa fazer calculos dos vetores.)
Se sua aplicação requer o uso do IE8, lembre-se que você deve ter um fallback ou não utilizar vetores, contornando com imagens responsivas.

Links úteis

Alguns links interessantes e para maiores informações sobre SVG

Raphael.js
Processing.js, baseado no Processing, a Java imaging tool
jQuery SVG
Sitepoint article: How to Choose Between Canvas and SVG
Canvas and SVG Performance
Nettuts+ article about Raphael

Quais outros casos de uso você encontraram para o SVG? Nos informe nos comentários e muito obrigado por acompanhar o artigo.

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!