Então, você precisa adicionar alguns gráficos ao seu aplicativo ou site? Agora você já percebeu que existem muitas maneiras diferentes de fazer isso, a maioria das quais utiliza uma das duas tecnologias principais: SVG e API do Canvas.
Para decidir qual se adapta melhor às suas necessidades, precisamos observar os pontos fortes e fracos relativos do SVG e do Canvas e como eles influenciam as diferentes soluções de desenho de gráficos disponíveis.
Canvas e SVG são tecnologias que permitem aos desenvolvedores da web desenhar imagens na tela, mas eles têm APIs e abordagens muito diferentes para fazer isso.
O que é SVG?
SVG significa “gráficos vetoriais escaláveis” e representa um conjunto de padrões para definir declarativamente as propriedades de uma imagem (coisas como as próprias formas, cor de preenchimento, cor do traço e outros).
As imagens SVG são criadas inline com o código HTML adicionando uma tag ou podem ser definidas em arquivos separados (com a extensão .svg ) e referenciadas no HTML.
O que é Canvas?
O Canvas é uma API padrão de navegador de nível inferior que permite aos desenvolvedores “desenhar” imperativamente diretamente na imagem, emitindo uma série de comandos:
const canvas=document.querySelector ('canvas');
const ctx=canvas.getContext ('2d');
ctx.fillStyle='# FFA69E';
ctx.arc (50, 50, 45, 0, 2 * Math.PI);
ctx.fill ();
As imagens da tela são criadas adicionando um elemento ao HTML e, em seguida, manipulando esse elemento por meio da API JavaScript DOM, conforme mostrado acima.
SVG vs. Canvas: diferenças de API
Como o Canvas é uma API de nível inferior que o SVG, ele oferece mais flexibilidade do que o SVG em troca de maior complexidade. O limite do que pode ser desenhado em um Canvas é apenas limitado por quanto código um desenvolvedor está disposto a escrever. Qualquer imagem SVG pode ser desenhada com a API Canvas com esforço suficiente.
Por outro lado, como o SVG é uma API de nível superior em comparação com o Canvas, ele pode criar imagens complexas sem exigir que os desenvolvedores escrevam códigos complicados.
Neste exemplo, aplicamos efeitos de iluminação e desfoque a alguns polígonos em apenas 15 linhas de código SVG. O código do Canvas correspondente seria muito mais complexo para produzir a mesma imagem:
No entanto, como o Canvas oferece mais flexibilidade, nem todas as imagens que podem ser desenhadas em um Canvas podem ser expressas com precisão com a sintaxe SVG (além de usar pequenos elementos
Esta imagem seria um pouco mais difícil de produzir usando SVG:
const canvas=document.querySelector ('canvas');
const ctx=canvas.getContext ('2d');
mixagem de funções (canal1, canal2, proporção, variabilidade) { const scaledVariability=variabilidade * 0xFF; retorno canal1 * (1-proporção) + canal2 * proporção- scaledVariability/2 + scaledVariability * Math.random ();
}
const color1={ r: 0xAA, g: 0x44, b: 0x65,
};
const color2={ r: 0x86, g: 0x16, b: 0x57,
};
variabilidade const=0,2;
para (x=0; x
Existem implicações importantes a serem consideradas ao usar SVG versus Canvas. As diferenças fundamentais na API entre SVG e Canvas descritas acima têm efeitos posteriores que você deve considerar, como o seguinte:
Elementos SVG podem existir no DOM junto com a marcação HTML
Isso significa que os elementos SVG DOM podem ser manipulados de maneiras familiares aos desenvolvedores da web, incluindo a integração em estruturas populares como React ou Vue.
Uma desvantagem disso é que gráficos SVG complexos contendo dezenas de milhares de nós, por exemplo, podem provar ser muito intensivos em recursos para que os navegadores renderizem com eficiência, levando a páginas da web lentas ou instáveis. Isso ocorre porque as operações do Canvas são comprometidas diretamente na tela, de modo que o número de operações de desenho é menos impactante para o desempenho, pois não há sobrecarga de manter o controle dessas operações no DOM.
Assim como o HTML, SVG é declarativo
Isso significa que o navegador se encarrega de traduzir a imagem desejada no código imperativo de baixo nível para desenhar pixels na tela-o desenvolvedor não precisa se preocupar com isso. Imagens complexas podem ser representadas sucintamente na sintaxe SVG.
As imagens SVG podem ser responsivas e as imagens do Canvas não
Os SVGs podem aumentar e diminuir em resposta aos tamanhos do contêiner pai ou às alterações no tamanho da tela, enquanto os elementos Canvas precisam de JavaScript personalizado para atingir esse comportamento.
SVG x Canvas: o que é melhor para você?
Com as diferenças entre SVG e Canvas em mente, podemos avaliar as necessidades de nosso projeto gráfico e determinar qual tecnologia pode nos servir melhor. Vale a pena perguntar o seguinte:
- Os gráficos terão muitos elementos ou serão altamente detalhados? O Canvas pode ter um desempenho melhor para mostrar esses dados sem sobrecarregar o navegador com muitos nós DOM. Mas se os gráficos forem relativamente simples, a sintaxe SVG pode ser uma solução mais simples e rápida para lançar um gráfico de boa aparência rapidamente.
- Seus gráficos precisam ter várias animações ou ser responsivos em largura? Embora seja certamente possível renderizar animações usando o Canvas ou fazer com que os elementos do Canvas respondam às mudanças de largura, pode ser mais simples conseguir esses efeitos usando SVG e CSS.
- Os gráficos precisam ser interativos? Como os elementos SVG estão no DOM, responder às ações do usuário, como cliques em elementos específicos de um gráfico, é tão simples quanto responder a eventos em qualquer outro elemento DOM. A interatividade da tela é possível, mas exigirá algum código adicional.
Bibliotecas de gráficos
Como a renderização de visualizações de dados é um caso de uso comum para sites e aplicativos, há uma infinidade de bibliotecas que facilitam o desenho de gráficos com Canvas ou SVG. Uma rápida pesquisa DuckDuckGo de “ bibliotecas de gráficos JavaScript ” mostrará dezenas de páginas descrevendo muitas das diferentes opções disponíveis.
Algumas opções populares oferecem gráficos de ótima aparência prontos para uso, como Chart.js ou Chartist . Outros são mais complexos, mas permitem mais personalização, como Vega-Lite . Muitas bibliotecas são construídas sobre a biblioteca de fato para visualização de dados na web, como D3.js , que oferece total flexibilidade e controle às custas de uma curva de aprendizado íngreme.
Renderização de gráficos no backend
A criação de gráficos com SVG e Canvas não se limita aos contextos do navegador; eles também podem ser renderizados em aplicativos de servidor.
Para SVG, uma ferramenta como Puppeteer pode ser usada para renderizar imagens SVG em um navegador Chrome sem interface e gerar capturas de tela conforme desejado. Para o Canvas, há uma biblioteca fantástica chamada Canvas que fornece uma versão quase completa implementação da API Canvas padrão para Node.js.
Um exemplo de renderização de back-end do Canvas
Este snippet de JavaScript codifica uma mensagem secreta. Para ver o que é, salve este código em um arquivo chamado index.js :
const {join}=require ('path'), {createWriteStream}=require ('fs'), {createCanvas}=require ('canvas'); const canvas=createCanvas (200, 100);
const ctx=canvas.getContext ('2d'); ctx.strokeStyle='# 861657';
ctx.lineWidth=5;
ctx.lineCap='redondo';
ctx.beginPath ();
ctx.moveTo (40, 25);
ctx.lineTo (40, 75);
ctx.moveTo (40, 50);
ctx.lineTo (100, 50);
ctx.moveTo (100, 25);
ctx.lineTo (100, 75);
ctx.moveTo (160, 25);
ctx.lineTo (160, 75);
ctx.stroke (); const path=join (__ dirname,'message.png');
const out=createWriteStream (path);
stream const=Canvas.createPNGStream ();
stream.pipe (out);
out.on ('terminar', ()=> console.log (`Arquivo de imagem criado em $ {path}.`));
Em seguida, salve um arquivo chamado package.json ao lado de index.js com o seguinte conteúdo:
{ "privado": verdadeiro, "dependências": { "canvas":"^ 2.7.0" }
}
No mesmo diretório onde você salvou index.js e package.json , execute o seguinte comando (Node.js deve estar instalado disponível em seu PATH ):
npm install
node index.js
Se tudo correr conforme o planejado, sua imagem PNG gerada sem cabeçalho com mensagem secreta será salva em message.png . 
Conclusão
SVG e Canvas são tecnologias poderosas e maduras, cada uma com um forte ecossistema de bibliotecas e documentação para ajudar a dar vida aos seus gráficos. E algumas bibliotecas até suportam renderização para SVG ou Canvas!
Não tenha medo de investir algum tempo na avaliação de alternativas para encontrar a solução certa para as necessidades específicas do seu projeto. Aqui estão algumas regras práticas rápidas quando se trata de decidir sobre SVG ou Canvas.
- Seus gráficos precisam ser responsivos ou interativos? O SVG pode oferecer esses recursos de forma mais simples do que o Canvas.
- Seus gráficos serão altamente detalhados ou complexos? Canvas pode oferecer melhor desempenho e maior controle do que SVG.
Boa sorte!
A postagem Usando SVG vs. Canvas: um breve guia apareceu primeiro em LogRocket Blog .
