Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

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

by
Length:MediumLanguages:

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.

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:

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.

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.

  1. Talvez eles nem saibam da existência do recurso e nunca sentiram a necessidade do mesmo (e isso não serve como desculpa).
  2. 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

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!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.