Canvas vs SVG: Escolhendo a Ferramenta Certa para o Trabalho

HTML5 Canvas e SVG são ambas tecnologias baseadas em padrões do HTML5 que você pode usar para criar incríveis gráficos e experiências visuais. A questão que estou fazendo neste artigo é a seguinte: Deve importar qual delas você usa em seu projeto? Em outras palavras, existem casos de uso para preferir o HTML5 Canvas sobre o SVG?

Primeiro, vamos dedicar algumas palavras para introduzir o HTML5 Canvas e o SVG.

O que é HTML5 Canvas?

Aqui está como a especificação WHATWG introduz o elemento canvas:

O elemento canvas fornece aos scripts uma tela de bitmap dependente de resolução, que pode ser usada para renderizar gráficos, gráficos de jogos, arte ou outras imagens visuais em tempo real.

Em outras palavras, a tag <canvas> expõe uma superfície onde você pode criar e manipular imagens rasterizadas pixel por pixel usando uma interface programável JavaScript.

Aqui está um exemplo básico de código:

O HTML:

<canvas id="myCanvas" width="800" height="800"></canvas>

O JavaScript:

const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');
context.fillStyle = '#c00';
context.fillRect(10, 10, 100, 100);

Você pode aproveitar os métodos e propriedades da API do HTML5 Canvas obtendo uma referência para o objeto de contexto 2D. No exemplo acima, desenhei um simples quadrado vermelho, com 100 x 100 pixels de tamanho, colocado a 10px da esquerda e 10px da parte superior da <canvas> superfície de desenho.

Sendo dependente de resolução, as imagens que você cria no <canvas> podem perder qualidade ao serem ampliadas ou exibidas em telas Retina.

Desenhar formas simples é apenas a ponta do iceberg. A API Canvas do HTML5 permite que você desenhe arcos, caminhos, texto, gradientes, etc. Você também pode manipular suas imagens pixel por pixel. Isso significa que você pode substituir uma cor por outra em certas áreas dos gráficos, pode animar seus desenhos e até desenhar um vídeo no canvas e alterar sua aparência.

O que é SVG?

SVG significa Scalable Vector Graphics. De acordo com a especificação:

O SVG é uma linguagem para descrever gráficos bidimensionais. Como um formato autônomo ou quando misturado com outro XML, usa a sintaxe XML. Quando misturado com HTML5, usa a sintaxe HTML5. …

Os desenhos SVG podem ser interativos e dinâmicos. As animações podem ser definidas e acionadas de forma declarativa (ou seja, inserindo elementos de animação SVG no conteúdo SVG) ou via script.

O SVG é um formato de arquivo XML projetado para criar gráficos vetoriais. Ser escalável tem a vantagem de permitir que você aumente ou diminua uma imagem vetorial mantendo sua nitidez e alta qualidade. (Isso não pode ser feito com imagens geradas pelo HTML5 Canvas.)

Aqui está o mesmo quadrado vermelho (anteriormente criado com HTML5 Canvas) desta vez desenhado usando SVG:

<svg xmlns="https://www.w3.org/2000/svg" viewbox="0 0 600 600">
  <desc>Red rectangle shape</desc>
  <rect x="10" y="10" width="100" height="100" fill="#c00"  />  
</svg>

Você pode fazer com SVG a maioria das coisas que pode fazer com Canvas — como desenhar formas e caminhos, gradientes, padrões, animações e assim por diante. No entanto, essas duas tecnologias funcionam de maneiras fundamentalmente diferentes. Ao contrário de uma imagem baseada em Canvas, o SVG possui um DOM, e, portanto, tanto CSS quanto JavaScript têm acesso a ele. Por exemplo, você pode alterar a aparência de uma imagem SVG usando CSS, animar seus nós com CSS ou JavaScript, fazer com que qualquer uma de suas partes reaja a um evento de mouse ou teclado da mesma forma que um <div>. Como ficará mais claro nas seções seguintes, essa diferença desempenha um papel significativo quando você precisa escolher entre Canvas e SVG para o seu próximo projeto.

Modo Imediato e Modo Retido

É crucial distinguir entre modo imediato e modo retido. O Canvas do HTML5 é um exemplo do primeiro, o SVG do segundo.

Modo imediato significa que, uma vez que sua imagem esteja no canvas, o canvas deixa de acompanhar. Em outras palavras, você, como desenvolvedor, precisa elaborar os comandos para desenhar objetos, criar e manter o modelo ou cena do que a saída final deve parecer, e especificar o que precisa ser atualizado. A API de Gráficos do navegador simplesmente comunica seus comandos de desenho ao navegador, que então os executa.

O SVG utiliza a abordagem retida, onde você simplesmente emite suas instruções de desenho do que deseja exibir na tela, e a API de Gráficos do navegador cria um modelo ou cena em memória do resultado final e o traduz em comandos de desenho para o seu navegador.

Sendo um sistema de gráficos imediato, o Canvas não possui um DOM, ou Modelo de Objeto de Documento. Com o Canvas, você desenha seus pixels e o sistema esquece tudo sobre eles, reduzindo assim a memória extra necessária para manter um modelo interno do seu desenho. Com o SVG, cada objeto que você desenha é adicionado ao modelo interno do navegador, o que facilita um pouco a vida do desenvolvedor, mas com alguns custos em termos de desempenho.

Com base na distinção entre modo imediato e retido, bem como outras características específicas do Canvas e do SVG, é possível delinear alguns casos em que usar uma tecnologia em vez da outra pode melhor atender aos objetivos do seu projeto.

HTML5 Canvas: Vantagens e Desvantagens

A especificação do HTML5 Canvas recomenda claramente que os autores não devem usar o elemento <canvas> onde têm outros meios mais adequados disponíveis para eles.

Por exemplo, para um elemento <header> ricamente gráfico, as melhores ferramentas são HTML e CSS, não <canvas> (e nem SVG, a propósito). Dr. Abstract, criador e fundador do framework Zim JS canvas, confirma essa visão ao escrever:

O DOM e os frameworks do DOM são excelentes para exibir informações, especialmente informações textuais. Em comparação, o canvas é uma imagem. Pode-se adicionar texto ao canvas e torná-lo responsivo, mas o texto não pode ser facilmente selecionado ou pesquisado como no DOM. Páginas longas com rolagem de texto ou texto e imagens são uma excelente utilização do DOM. O DOM é ótimo para sites de mídia social, fóruns, compras e todos os aplicativos de informação aos quais estamos acostumados. — “Quando Usar uma Biblioteca ou Framework de Canvas JavaScript”

Então, esse é um exemplo claro de quando não usar <canvas>. Mas quando é uma boa opção usar <canvas>?

Este tweet de Sarah Drasner resume alguns dos principais prós e contras das características e capacidades do canvas, o que pode nos ajudar a determinar alguns casos de uso para esta poderosa tecnologia:

I had this slide in a lot of talks and workshops over the years: pic.twitter.com/4K0C7mNzg2

— Sarah Drasner (@sarah_edo) October 2, 2019

Você pode visualizar a imagem do tweet aqui.

Para O Que o HTML5 Canvas Pode Ser Ótimo

Alvin Wan realizou benchmarks de Canvas e SVG em termos de desempenho, tanto em relação ao número de objetos sendo desenhados quanto em relação ao tamanho dos objetos ou do próprio canvas. Ele afirma seus resultados da seguinte maneira:

Em suma, o custo de renderização do DOM é mais perceptível ao lidar com centenas, senão milhares, de objetos; nesse cenário, o Canvas é o vencedor claro. No entanto, tanto o Canvas quanto o SVG são invariantes em relação aos tamanhos dos objetos. Dada a soma final, o Canvas oferece uma clara vitória em termos de desempenho.

Desenhando com base no que sabemos sobre o Canvas, especialmente em sua excelente performance ao desenhar muitos objetos, aqui estão alguns cenários possíveis em que pode ser apropriado, e até preferível, em relação ao SVG.

Jogos e Arte Generativa

Para gráficos intensivos, jogos altamente interativos, assim como para arte generativa, o Canvas geralmente é a escolha certa.

Rastreamento de Raios

Rastreamento de raios é uma técnica para criar gráficos 3D.

O rastreamento de raios pode ser usado para hidratação de uma imagem, traçando o caminho da luz através dos pixels em um plano de imagem e simulando os efeitos de suas colisões com objetos virtuais. … Os efeitos alcançados pelo rastreamento de raios, … variam de … criar imagens realistas a partir de gráficos vetoriais simples até aplicar filtros fotográficos para remover o olho vermelho. — SVG vs Canvas: como escolher, Microsoft Docs.

Se estiver curioso, aqui está uma aplicação de raytracer em ação por Mark Webster.

No entanto, embora o HTML5 Canvas seja definitivamente mais adequado para a tarefa do que o SVG jamais poderia ser, isso não significa necessariamente que o ray tracing seja melhor executado em um elemento <canvas>. De fato, a tensão no CPU pode ser bastante considerável, ao ponto de o seu navegador parar de responder.

Desenhar um Número Significativo de Objetos em uma Pequena Superfície

Outro exemplo é um cenário em que sua aplicação precisa desenhar um número significativo de objetos em uma superfície relativamente pequena — como visualizações em tempo real não interativas, como representações gráficas de padrões climáticos.

A imagem acima é deste artigo da MSDN, que fez parte da minha pesquisa para este trabalho.

Substituição de Pixels em Vídeos

Como demonstrado neste artigo do HTML5 Doctor, outro exemplo em que o Canvas seria apropriado é ao substituir a cor de fundo de um vídeo por uma cor diferente, outra cena ou imagem.

Para O Que o HTML5 Canvas Não É Tão Bom

Por outro lado, existem vários casos em que o Canvas pode não ser a melhor escolha em comparação ao SVG.

Escalabilidade

A maioria dos cenários em que a escalabilidade é uma vantagem será melhor atendida usando SVGs em vez de Canvas. Gráficos de alta fidelidade e complexos, como diagramas de construção e engenharia, organogramas, diagramas biológicos, etc., são exemplos disso.

Quando desenhados usando SVG, ampliar as imagens ou imprimi-las preserva todos os detalhes com um alto nível de qualidade. Você também pode gerar esses documentos a partir de um banco de dados, o que torna o formato XML do SVG altamente adequado para a tarefa.

Além disso, esses gráficos são frequentemente interativos. Pense em mapas de assentos ao reservar seu bilhete de avião online como um exemplo, o que os torna um ótimo caso de uso para um sistema de gráficos retidos como SVG.

Dito isto, com a ajuda de ótimas bibliotecas como CreateJS e Zim (que estende CreateJS), desenvolvedores podem integrar relativamente rapidamente eventos de mouse, testes de acerto, gestos multitouch, capacidades de arrastar e soltar, controles e muito mais, em suas criações baseadas em Canvas.

Acessibilidade

Embora existam etapas que você pode tomar para tornar um gráfico Canvas mais acessível — e uma boa biblioteca Canvas como Zim pode ser útil aqui para acelerar o processo — o Canvas não brilha quando se trata de acessibilidade. O que você desenha na superfície do canvas é apenas um monte de pixels, que não podem ser lidos ou interpretados por tecnologias assistivas ou bots de mecanismos de busca. Este é outro campo onde o SVG é preferível: o SVG é apenas XML, o que o torna legível tanto para humanos quanto para máquinas.

Não Confiar em JavaScript

Se você não quer usar JavaScript em seu aplicativo, então o Canvas não é seu melhor amigo. De fato, a única maneira de trabalhar com o elemento <canvas> é com JavaScript. Por outro lado, você pode desenhar gráficos SVG usando um programa de edição de vetores padrão como o Adobe Illustrator ou o Inkscape, e pode usar CSS pura para controlar sua aparência e realizar animações sutis e microinterações atraentes.

Combinando HTML5 Canvas e SVG para Cenários Avançados

Há casos em que seu aplicativo pode aproveitar os melhores de ambos os mundos combinando HTML5 Canvas e SVG. Por exemplo, um jogo baseado em Canvas poderia implementar sprites de imagens SVG geradas por um programa de edição de vetores, para aproveitar a escalabilidade e o tamanho reduzido de download em comparação com uma imagem PNG. Ou um programa de pintura poderia ter sua interface do usuário projetada usando SVG, com um elemento <canvas> embutido, que poderia ser usado para desenhar.

Finalmente, uma biblioteca poderosa como Paper.js torna possível programar gráficos vetoriais em cima do HTML5 Canvas, oferecendo aos desenvolvedores uma maneira conveniente de trabalhar com ambas as tecnologias.

Conclusão

Neste artigo, explorei algumas características-chave de ambos os HTML5 Canvas e SVG para ajudar você a decidir qual tecnologia pode ser mais adequada para tarefas específicas.

Qual é a resposta?

Chris Coyier concorda com Benjamin De Cock, como o último twita:

Uma maneira extremamente básica de responder é “use canvas quando não puder usar SVG” (onde “não puder” pode significar animar milhares de objetos, manipular cada pixel individualmente, etc.). Para dizer de outra forma, o SVG deve ser a sua escolha padrão, e o canvas, o plano de backup.

— Benjamin De Cock (@bdc) October 2, 2019

Dr Abstract oferece uma longa lista de coisas que são melhores construídas usando Canvas, incluindo logos interativos e publicidade, infográficos interativos, aplicativos de e-learning e muito mais.

Na minha opinião, não há regras rígidas e imutáveis sobre quando é melhor usar Canvas em vez de SVG. A distinção entre modo imediato e retido aponta para o HTML5 Canvas como sendo o vencedor incontestável quando se trata de construir coisas como jogos intensivos em gráficos, e para o SVG como sendo preferível para coisas como imagens planas, ícones e elementos de interface do usuário. No entanto, no meio, há espaço para que o HTML5 Canvas amplie seu alcance, especialmente considerando o que as diversas bibliotecas poderosas de Canvas poderiam trazer à mesa. Não apenas facilitam o trabalho com ambas as tecnologias na mesma obra gráfica, mas também tornam possível que algumas características difíceis de implementar em um projeto nativo baseado em Canvas — como controles interativos e eventos, resposta, recursos de acessibilidade, e assim por diante — agora estejam ao alcance da maioria dos desenvolvedores, o que deixa a porta aberta para a possibilidade de usos cada vez mais interessantes do HTML5 Canvas.

Perguntas Frequentes (FAQs) sobre Canvas vs SVG