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 eu estou fazendo nesse artigo é a seguinte: Deveria importar qual delas você usa em seu projeto? Em outras palavras, existem casos de uso para preferir HTML5 Canvas sobre 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 apresenta 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 ao 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 do topo da <canvas> superfície de desenho.

Sendo dependentes de resolução, as imagens criadas no <canvas> podem perder qualidade ao serem ampliadas ou exibidas em telas Retina.

Desenhar formas simples é apenas a ponta do iceberg. A API do Canvas 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:

SVG é uma linguagem para descrever gráficos bidimensionais. Como um formato independente ou quando misturado com outro XML, ele 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 declarativamente (ou seja, incorporando elementos de animação SVG em conteúdo SVG) ou via script.

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 enquanto mantém sua nitidez e alta qualidade. (Isso não pode ser feito com imagens geradas pelo Canvas HTML5.)

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ção 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 seu próximo projeto.

Modo Imediato e Modo Retido

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

O modo imediato significa que, uma vez que seu desenho 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 ser, 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 na memória do resultado final e o traduz em comandos de desenho para seu navegador.

Sendo um sistema gráfico 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 servir melhor 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 possuem 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. O texto pode ser adicionado ao canvas e pode ser feito responsivo, mas o texto não pode ser facilmente selecionado ou pesquisado como no DOM. Páginas longas de 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 o <canvas>?

Este tweet de Sarah Drasner resume algumas das principais vantagens e desvantagens 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 Que Servem Bem o HTML5 Canvas

Alvin Wan realizou benchmarks do 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 overhead de renderização do DOM é mais perceptível ao lidar com centenas, senão milhares, de objetos; nesta situação, o Canvas é o claro vencedor. No entanto, tanto o Canvas quanto o SVG são invariantes em relação aos tamanhos dos objetos. Dado o resultado final, o Canvas oferece uma clara vitória em termos de desempenho.

A partir do que sabemos sobre o Canvas, especialmente sua excelente performance na criação de muitos objetos, aqui estão algumas possíveis situações 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.

Ray Tracing

Ray tracing é uma técnica para criar gráficos 3D.

O ray tracing pode ser usado para enriquecer uma imagem traçando o caminho da luz através dos pixels em um plano de imagem e simulando os efeitos de suas interações com objetos virtuais. … Os efeitos alcançados pelo ray tracing, … 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 de dados em tempo real não interativas, como representações gráficas de padrões climáticos.

A imagem acima é desta matéria da MSDN, que fez parte da minha pesquisa para este artigo.

Substituição de Pixel 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 em 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 nos 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), os 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 poderia 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 padrão de edição vetorial como o Adobe Illustrator ou o Inkscape, e pode usar apenas CSS 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 vetorial, 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> incorporado, 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 ajudá-lo a decidir qual tecnologia pode ser mais adequada para tarefas particulares.

Qual é a resposta?

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

Uma maneira extremamente básica de respondê-lo é “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, SVG deve ser a sua escolha padrão, e canvas o plano de backup.

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

Dr Abstract oferece uma longa lista de coisas que são melhor 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 rápidas para quando é melhor usar Canvas em vez de SVG. A distinção entre modo imediato e modo retido aponta para o HTML5 Canvas como sendo o vencedor inconteste 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 o HTML5 Canvas expandir seu alcance, especialmente considerando o que as várias poderosas bibliotecas 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, responsividade, 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