Como escolher entre o Canvas e o SVG no seu s

De: Patrick Dengler

Como escolher entre o Canvas e o SVG no seu site

O Canvas do HTML5 e o SVG são dois recursos gráficos excelentes introduzidos no IE9. Ambos foram discutidos nas sessões da semana passada da conferência MIX11 em Las Vegas (veja Deep Dive Into HTML5 <canvas> (Aprofunde-se no elemento <canvas> do HTML5) e Modernizing Your Website: SVG Meets HTML5 (Modernizando seu site: SVG encontra o HTML5)).

Essas tecnologias podem ser usadas para lidar com uma série de cenários gráficos na web moderna. Com toda essa empolgação em torno do Canvas, o SVG tem sido deixado de lado, embora seja a melhor opção em muitos casos. Ofereço aqui algumas ideias sobre quando escolher o Canvas, o SVG ou uma combinação dos dois.

Resumo de alto nível do Canvas e do SVG

A seguir, apresento um resumo de alto nível do Canvas e do SVG para estruturar a discussão sobre quando usar cada uma dessas tecnologias gráficas de vetor.

Comparação entre o Canvas e o SVG
Canvas SVG
Baseado em pixels (o canvas é basicamente um elemento de imagem com uma API de desenho) Baseado em modelo de objeto (os elementos SVG são similares aos elementos HTML)
Elemento HTML individual similar ao <img> no comportamento Múltiplos elementos gráficos que se tornam parte do Document Object Model (DOM)
Apresentação visual criada e modificada de modo programático através de scripts Apresentação visual criada com marcação (markup) e modificada por CSS ou de modo programático através de scripts
A interação do usuário com o modelo de evento ocorre apenas no elemento canvas; as interações tem que ser programadas manualmente com coordenadas de mouse A interação do usuário com o modelo de evento é baseada em objeto no nível dos elementos gráficos primitivos — linhas, retângulos, caminhos
A API não tem suporte para acessibilidade; é necessário usar técnicas baseadas em marcação (markup) além do canvas O modelo de objeto e marcação (markup) do SVG tem suporte direto para acessibilidade

O SVG é conhecido como um recurso gráfico de modo retido que persiste no modelo "em memória". Análogo ao HTML, o SVG constrói um modelo de objeto de elementos, atributos e estilos. Quando aparece em um documento HTML5, o elemento <svg> se comporta como um bloco embutido e faz parte da árvore de documentos HTML.

O Canvas é um bitmap com uma API (application programming interface - interface de programação de aplicações) gráfica de modo imediato para desenhar. O canvas é um modelo do tipo "fire and forget" (disparar e esquecer) que renderiza os gráficos diretamente no bitmap e depois esquece as formas desenhadas; apenas o bitmap resultante continua disponível.

Podemos comparar o Canvas à API do Windows GDI, em que desenhamos os gráficos de modo programático em uma janela, e o SVG à marcação (markup) do HTML, com elementos, estilos, eventos e programabilidade baseada em DOM. O Canvas é procedimental, ao passo que o SVG é declarativo.

Cenários

As seções a seguir descrevem os benefícios e as limitações técnicas das duas tecnologias, e se baseiam no bom senso para determinar qual delas é apropriada para cada tarefa. A ilustração abaixo mostra onde fica cada cenário em um espectro que vai do Canvas ao SVG, com um ponto de interseção no meio.

Spectrum of Web vector graphics from canvas to SVG
Espectro gráfico dos vetores

Documentos de vetor complexos de alta fidelidade

Os documentos de vetor complexos de alta fidelidade são e continuarão sendo o ponto central do SVG. Tanto os independentes quanto os incorporados a páginas Web são altamente detalhados na visualização e na impressão. A natureza declarativa do SVG possibilita uma geração de formas com ferramentas ou no cliente ou servidor a partir de bancos de dados.

Da demonstração Diagramas reais no Test-drive do Internet Explorer:

Portion of SVG image zoomed out

A primeira imagem mostra os diagramas, e a segunda os mostra ampliados em 1000%

Portion of SVG image zoomed in

Quando consideramos sua utilidade para observar esquemas grandes, detalhar ou imprimir o documento inteiro para fins de engenharia, o conceito de "scalable" em Scalable Vector Graphics (gráficos de vetor escalonáveis) se torna bastante claro. Por essas razões, colocamos os documentos de vetor complexos de alta fidelidade na extremidade "SVG" do espectro.

Spectrum from canvas to SVG showing high fidelity documents at SVG end of spectrum

SVG como formato de imagem

Outro uso comum do SVG é para imagens estáticas dentro de páginas Web. Com os monitores de alto DPI que temos hoje, os desenvolvedores têm que levar em conta a qualidade dos gráficos. As imagens abaixo representam imagens de marcador <li> estilizadas via CSS. As imagens a seguir são quase idênticas no tamanho do arquivo e na apresentação.

Two circles zoomed out that look similar
Gráfico SVG à esquerda, renderização PNG à direita

Se o desenvolvedor quiser reutilizar a imagem em uma escala maior, ou se o usuário final usar uma tela de alto DPI, a imagem no mapeamento de bit ficará distorcida ou será necessária uma versão maior do arquivo para preservar a fidelidade.

Two circles zoomed in. SVG circle is crisp; PNG circle is blurry.
Gráfico SVG ampliado à esquerda, PNG com zoom de 4000 à direita

Assim, o SVG é um ótimo formato substituto até para a mais simples das imagens em uma página web. O Canvas não é adequado para substituições.

Spectrum from canvas to SVG showing static images at SVG end of spectrum

Do outro lado do espectro, o canvas acelera cenários que não exigem atenção ao que foi desenhado. Quando ele foi introduzido, vários experimentos divertidos foram desenvolvidos. Vou dividi-los em três cenários diferentes.

Manipulação de pixels

Como o Canvas serve para desenhar e manipular superfícies de desenho baseadas em pixels, vários experimentos e exibições incluem algoritmos sofisticados que geram efeitos gráficos impressionantes, como "ray tracing" e filtros.

O exemplo abaixo foi escrito por Adam Burmister. O experimento cria uma imagem traçando o caminho de luz através de pixels em um plano e simulando os efeitos dos encontros com objetos virtuais.

Spheres on checkboard background showing reflections

O autor inclui o seguinte aviso: "Esse experimento tem um uso intenso de CPU. Você pode ter a impressão de que o navegador parou de responder". Portanto, embora a API do Canvas seja capaz de gerar imagens como essa, pode não ser uma ideia tão boa. Como o autor de sites Adam Burmister resume, "Ray-Tracing [é] a pior aplicação do JavaScript já inventada".

O mesmo pode ser dito de outro tipo de manipulação de pixels. A função a seguir substitui os pixels verdes de uma tela por pixels de outra tela de tamanho idêntico. Esta função pode ser usada para criar um efeito de vídeo de "tela verde".


function GreenScreenAtoB(a, b) {

    var aImageData = a.getImageData(0, 0, a.canvas.width, a.canvas.height);

    var bImageData = b.getImageData(0, 0, b.canvas.width, b.canvas.height);

    var aPixels = aImageData.data;

    var bPixels = bImageData.data;

    if (aPixels.length != bPixels.length) {

        window.alert("Canvases do not have the same number of pixels");

        return bImageData;

    }

    var pixelCount = bPixels.length;

    for (var pixelIndex = 0; pixelIndex < pixelcount; pixelIndex += 4) {

        // grab the RGBA components of each pixel in b

        var r = bPixels[pixelIndex + 0];

        var g = bPixels[pixelIndex + 1];

        var b = bPixels[pixelIndex + 2];

        var a = bPixels[pixelIndex + 3];

        // if the b pixel is green, replace it with a pixel from a

        if (r == 0 && g == 255 && b == 0 && a == 255) {

            bPixels[pixelIndex + 0] = aPixels[pixelIndex + 0];

            bPixels[pixelIndex + 1] = aPixels[pixelIndex + 1];

            bPixels[pixelIndex + 2] = aPixels[pixelIndex + 2];

            bPixels[pixelIndex + 3] = aPixels[pixelIndex + 3];

        }

    }

    return bImageData;

}

Foi um experimento divertido, mas como no exemplo do "ray tracing" acima, o desempenho nas máquinas de hoje deixa a desejar. Resolvi mostrá-los, no entanto, por uma razão: esse tipo de manipulação de pixels simplesmente não é possível com o SVG. É o fator diferencial entre as duas tecnologias. Uma manipula pixels e a outra manipula um modelo.

Seja na criação de imagens realistas com gráficos de vetor que em outras situações seriam simples ou na criação de efeitos de tela verde com vídeo, na maioria dos casos esses cenários não estão prontos para uma implantação eficaz na web de hoje. Contudo, alguns cenários têm uma capacidade de resposta suficiente (como a aplicação de filtros para remover olhos vermelhos nas fotos). Essas manipulações de pixels ficam na extrema esquerda do espectro, como cenários do canvas.

Spectrum from canvas to SVG showing filters and ray tracers at canvas end of spectrum

Cenários híbridos

Não há um "vencedor" entre os casos de uso mais interessantes. Eles são ilustrados em dois cenários principais: Gráficos/Mapeamento e Jogos bidimensionais.

Os gráficos requerem vetores, e tanto o Canvas quanto o SVG funcionam. Contudo, o SVG costuma ser a melhor escolha devido aos seus recursos intrínsecos.

Cenários de gráficos/mapeamento do SVG

Estes são alguns dos gráficos mais populares da Web:

  • Fluxogramas e gráficos organizacionais interativos
  • Mapas interativos - localização de caminhos
  • Plantas de edifícios
  • Esquemas de engenharia
  • Mapas de assentos para linhas aéreas ou locais de eventos
  • Dados genéricos ou gráficos financeiros (colunas, barras, linhas, dispersão, rosca, etc.)

Para todos eles, o SVG é a melhor tecnologia porque:

  • Podem ser gerados a partir dos dados existentes, transformando XML em SVG
  • Versões estáticas podem ser exportadas de ferramentas como Inkscape, Adobe Illustrator, Microsoft Visio e vários programas CAD
  • Requerem uma interação precisa do usuário
  • Provedores de conteúdo de terceiros podem personalizar para autores da Web usando estilos CSS
  • Exigem acessibilidade

Para entender melhor, vamos examinar o cenário da seleção de um estado no mapa dos Estados Unidos.

Image of the state of Alaska

O mapa detalhado do Alasca exibido acima é de domínio público e está disponível no Wikimedia Commons.

No SVG, o estado do Alasca é representado por um elemento <path> com cerca de 162.500 caracteres de dados geométricos no atributo "d".

<path id="AK" fill="#cdc3cc" d="M 777.5514,1536.1543 C 776.4904,1535.0933 776.7795,1530.0041 777.9416,1529.2859 C 781.3258,1527.1943 787.2657,1532.4522 784.8317,1535.3849 …" />

No canvas, essa forma poderia ser criada com uma série de chamadas do JavaScript:

function drawAlaska() { var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(777.5514, 1536.1543); ctx.bezierCurveTo(776.4904, 1535.0933, 776.7795, 1530.0041, 777.9416, 1529.2859); ctx.bezierCurveTo(781.3258, 1527.1943, 787.2657, 1532.4522, 784.8317,1535.3849); // // 2,875 more path-drawing directives // ctx.bezierCurveTo(1689.8261, 12.13753, 1689.1395, 12.17333, 1685.8848, 10.52683); ctx.closePath(); ctx.fillStyle = "#cdc3cc"; ctx.fill(); }

Na verdade, são necessárias 2.878 diretivas de desenho de caminho (moveTo, lineTo e bezierCurveTo) para desenhar esse mapa complexo do Alasca. Obviamente, é possível desenhar versões do mapa com resolução mais baixa. Um número bem menor de linhas de código seria necessário para os estados de Wyoming e Colorado. :-)

As aplicações do SVG baseadas em mapeamento normalmente incluem uma experiência interativa que envolve efeitos de focalização, seleção, tabulação entre itens e escalonamento. Essas operações requerem apenas conceitos HTML "lightweight" quando usamos o SVG, por exemplo, para processar um evento de mouse:

<path id="AK" fill="#cdc3cc" onmousedown="window.alert('Alaska');" d="M 777.5514,1536.1543 …" /> 

ou criar um efeito de realce e focalização usando CSS:

path#AK:hover { fill: yellow; }

Um exemplo desse tipo de mapa interativo pode ser visto na demonstração test-drive "Atlas zur Europawahl 2004 in Deutschland", uma visualização dos resultados da eleição europeia de 2004 na Alemanha.

Para criar esses efeitos no canvas, você tem que codificar sozinho a detecção de cliques usando as coordenadas de mouse do objeto de evento. O contexto da forma não está mais disponível. Temos a API isPointOnPath(), mas ela só se aplica ao último caminho criado.

O código pode ser encontrado na forma de bibliotecas de gráficos que habilitam detecções de cliques específicas através de dados de pixels. Elas identificam cliques e focalizações e são funcionais. Quando projetadas para usar os recursos do SVG, têm um desempenho melhor.

Spectrum from canvas to SVG showing interactive charts and graphics at SVG end of spectrum

Cenários de gráficos do Canvas

O canvas também pode ser usado em cenários de gráficos. Para definir o contexto, temos que examinar as características de desempenho do SVG e do Canvas.

Às vezes, as influências externas requerem uma escolha de tecnologia que é, totalmente ou em grande parte, independente da funcionalidade. Há duas diferenças básicas entre o SVG e o Canvas.

O conhecimento e as habilidades do desenvolvedor e os ativos existentes têm um papel significativo na escolha das tecnologias. Se na criação de um jogo o desenvolvedor tiver um conhecimento profundo das APIs gráficas de nível baixo e um conhecimento limitado das tecnologias web, é melhor escolher o Canvas (falaremos mais sobre isso). Na portabilidade de jogos, existem ferramentas que permitem a mudança de implementações de terceiros para o Canvas.

Se o desempenho for crucial, normalmente no nível dos milissegundos, é necessário comparar as características das duas tecnologias. Isso não significa que o Canvas, cujo desempenho costuma ser considerado alto, é a escolha óbvia. No entanto, para aplicações com grandes quantidades de dados que precisam ser desenhados no nível do pixel, o Canvas é, de longe, a melhor opção.

O mapa meteorológico abaixo não requer uma superfície grande, e o número de objetos na tela é significativamente alto. Com o Canvas, eles podem ser desenhados rapidamente sem o custo da atualização do DOM.

Weather map image

A imagem acima poderia ser criada no SVG, usando elementos de círculo ou elipse para os pontos, mas levaria tempo demais para carregar milhares de elementos ao DOM. Um número grande de pixels ou imagens é um bom sinal de que o Canvas é a melhor tecnologia — seja em aplicações de astronomia, movimentos celulares biológicos ou exibições de modulação de voz. A rapidez de visualização dos dados é regulada pela velocidade da CPU, da implementação do Canvas e da implementação do JavaScript.

Spectrum from canvas to SVG showing real-time, high-volume data presentation at canvas end of spectrum

Jogos bidimensionais

Os jogos casuais constituem o cenário mais complicado. Algumas observações iniciais:

  • As bibliotecas de jogos potencializaram as APIs gráficas de nível mais baixo
  • As habilidades dos desenvolvedores na indústria de jogos são ajustadas de acordo com essas APIs de nível baixo
  • Muitos jogos são amplamente baseados em imagens ou sprites
  • Fabricantes como a Adobe estão começando a dar suporte ao Canvas como recurso de exportação
  • Jogos casuais não costumam exigir testes de cliques sofisticados
  • Jogos casuais não costumam ter um número proibitivamente grande de "objetos"

Nas bibliotecas de jogos, por exemplo, mecanismos populares de propriedades físicas, o modelo gráfico é independente e os gráficos se tornam um detalhe da implementação. As geometrias dos gráficos, como limites, velocidades, tamanhos e posições, são entregues a mecanismos que respondem com velocidades, colisões e posições. Os gráficos são usados apenas para colocar a cena computadorizada na tela.

O conceito de gráficos independentes dessa lógica é demonstrado por dois jogos que foram desenvolvidos pelo mesmo autor e destacam tanto o SVG quanto o <canvas>: SVG-oids e canvas-pinball.

Os jogos e as lógicas de demonstração são diferentes, mas ambos potencializam o mesmo mecanismo de física, que acompanha posições, colisões, velocidades e outros aspectos físicos dos componentes de jogos. No fim, um utiliza SVG para desenhar (ou mover) os elementos do jogo e o outro os redesenha com o Canvas.

A maioria dos jogos casuais em 2D que são construídos hoje para HTML5 usa o Canvas, por isso colocamos esse cenário do lado do Canvas na interseção.

Spectrum from canvas to SVG showing 2D casual gaming near the center of spectrum

Cenário híbridoo

Os jogos casuais também entram no cenário híbrido, porque existem vantagens em potencializar o melhor das duas tecnologias. Com o objetivo de facilitar a detecção de cliques e a interação do usuário, usamos uma camada mais opaca de geometrias SVG para posicionar elementos e o Canvas subjacente para posicionar imagens relevantes com mais rapidez e fornecer animações em tempo real.

Em um número crescente de experiências fora do segmento de jogos casuais, o cenário híbrido tem se mostrado a melhor opção. Quando o cenário precisa de animações e gráficos dinâmicos e visualmente intensos (Canvas) e uma interação avançada do usuário (SVG), ambas as tecnologias podem e devem ser usadas. Um exemplo é o site Brain Power de um dos parceiros apresentados no The Beauty of the Web O site Brain Power e outros incluídos no "The Beauty of the Web" encontraram o equilíbrio perfeito.

Para possibilitar a interação do usuário e a exibição de partes do cérebro, o site usa as geometrias de nível mais alto do SVG:

<polygon id="SensoryCortex" points="253,80,266,93,…" style="fill: rgba(0,0,0,0)"     />

Para as animações em tempo real e os efeitos especiais, o canvas é utilizado:

<canvas id="cnvDisplay" width="1920" height="1099" style="position:absolute;"     />

Conclusão

A análise das tecnologias de gráfico de vetor disponíveis nos navegadores mais modernos mostra que novos cenários podem ser criados usando as tecnologias Web padrão de uma forma interativa.

Spectrum from canvas to SVG showing "the graphically rich Web" at the center of spectrum

A evolução constante da Web inclui gráficos cada vez mais avançados. Apresentamos um ponto de vista da aplicação dessas tecnologias em cenários específicos. No fim, tanto o Canvas quanto o SVG são componentes importantes da Web graficamente avançada do HTML5.

Gostaríamos de saber como você está aplicando essas novas tecnologias HTML5 em seus sites. Inclua URLs e, por favor, verifique se sua página funciona no IE9 incluindo o tipo de documento HTML5, <!DOCTYPE html> e usando a detecção de recursos, não a detecção de navegador, para saber se há suporte para o SVG ou o Canvas.

Deixe um comentário...


Outros recursos em destaque

Tweets recentes sobre o HTML5

Tópicos do HTML5 no Slashdot