Pinceladas da Web

A medida em que os browsers vão evoluindo, novas tecnologias surgem, como, por exemplo, o Canvas, um possível concorrente para o SVG (mas atente-se, são tecnologias diferentes), onde inclusive a Microsoft anunciou suporte no IE9. O objetivo desse post é explorar as diferenças entre essas tecnologias, que são voltadas a criar gráficos no navegador, dando-lhe conhecimentos necessários para utilizar SVG ou Canvas de forma eficaz.

O que é SVG?

SVG é a abreviatura de Scalable Vectorial Graphics, que traduzido para o português significa gráficos vetoriais escaláveis. SVG é uma linguagem XML para descrever gráficos bidimensionais sejam eles de forma dinâmica, estática ou animada. Seu diferencial em relação as outros formatos vetoriais é de ser um formato aberto, não pertencendo a nenhuma empresa. Ele foi originalmente criado pelo W3C, responsável pela definição de outros padrões como HTML, XHTML, XML.

Você pode aplicar estilos ao SVG facilmente com o uso de CSS e adicionar comportamento dinâmico com o uso de SVG DOM, e no final pode ‘embedar’ de forma simples arquivos SVG no HTML através da tag object.

Um exemplo simples é do SVG abaixo embedado do HTML:

O código é bem simples, semelhante a inserir vídeos no HTML:

<object data="url/do/arquivo/svg" type="image/svg+xml" width="200" height="200">Seu browser não possui suporte a SVG.</object>

O que é mais complexo é desenhar o SVG, acessem a seguinte URL e vejam o código fonte. Reparem que cada parte do desenho é um elemento no DOM, por isso é recomendado utilizá-lo para interatividade (pois responde melhor a todos os eventos do mouse). Mas devido a criatividade dos desenvolvedores, já criaram até jogos em SVG

O que é Canvas?

O elemento canvas permite no HTML através de uma área determinada na página criar desenhos através de scripts, desenhar e renderizar imagens, permitindo aos desenvolvedores criarem coisas que até então eram possíveis somente com a utilização do Flash, com a vantagem de que com o uso de canvas não precisamos de nenhum plugin de terceiros instalado no navegador.

O canvas foi desenvolvido inicialmente pela Apple para uso dentro do MAC OS X, alimentando aplicações como Widgets do Dashboard e o Safari. Posteriormente foi adotado pelos browsers baseados no motor Gecko e Opera e padronizado pelo WHATWG.

Existem 2 formas de desenhar com canvas, utilizando um contexto 2d ou utilizando um contexto de desenho 3d com WebGL. A primeira opção está mais elaborada e todos os navegadores modernos, incluindo o IE9 dão pleno suporte a essa opção. Já a segunda ainda está em desenvolvimento e na web hoje só se encontram algumas implementações em forma de experimento.

Abaixo você vê um exemplo do código canvas do HTML5:

<canvas id="meu-canvas" width="200" height="200">
Seu browser não possui suporte a tag canvas do HTML5
</canvas>

Agora, com a utilização de JavaScript podemos desenhar qualquer coisa dento do canvas:

var canvas = document.getElementById('meu-canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = "rgb(255,0,0)";
ctx.fillRect(60, 60, 50, 50);

O resultado do código acima será um quadrado com tamanho de 50×50 px, localizado a 60px do topo e 60 px do laretal dentro da área de desenho do canvas. Veja o mesmo abaixo:

Comparativo SVG vs Canvas

Abaixo você tem uma visão geral das vantagens e desvantagens na utilização de SVG e Canvas:

Vantagens

Desvantagens

Quais deles escolher?

Cada tecnologia hoje tem seu uso próprio, você não precisa largar agora o SVG em favor do Canvas, ou vice-versa. Você pode usar Canvas para:

• Interatividade com edição de imagens: cortar, redimensionar, aplicar filtros.
• Geração de gráficos.
• Análise de imagens para gerar por exemplo, histogramas.
• Renderização de jogos.

Você pode usar SVG para:

• Criar um aplicativo web que independe da resolução do usuário.
• Criar intefaces interativas.
• Criação de gráficos.
• Edição de imagem baseada em vetores.

Como podem ver, cada tecnologia possui seus prós e contras, uní-las em uma aplicação web podem lhe render ótimos resultados.

Referências

• SVG or Canvas? Сhoosing between the two
• SVG and Canvas: Graphics for Web Apps
• SVG vs CANVAS, where is the Web World going towards?
• Performance of Canvas versus SVG
• SVG vs. Canvas on Trivial Drawing Application