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!
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post