SVG ou tela?

SVG e canvas são tecnologias que você pode usar para desenhar algo em páginas da web. Portanto, eles devem ser comparados e calculados quando usar SVG e quando usar tela. Mesmo uma compreensão muito superficial da essência dessas tecnologias permite que você faça uma escolha bem informada. De fato, aqui estão duas situações típicas, em uma das quais você deve preferir o SVG e na outra - canvas:

• Precisa desenhar um pequeno ícone? Este é certamente o território da SVG.
• Precisa criar um jogo interativo para navegadores? Aqui, definitivamente, precisamos de tecnologia de lona.

O autor do artigo, cuja tradução estamos publicando hoje, diz que sabe que ainda não revelou os motivos dessa escolha. Mas ele espera que esses motivos se tornem completamente óbvios depois que ele compartilhar alguns detalhes sobre SVG e canvas.

SVG - gráficos vetoriais descritos declarativamente

Se você sabe que precisa colocar uma imagem vetorial em uma página da Web, isso significa que o SVG é ideal para você. As imagens vetoriais geralmente parecem melhores que as imagens raster semelhantes, armazenadas, por exemplo, em arquivos JPG. Além disso, os arquivos de imagem vetorial geralmente são menores que os arquivos de imagem rasterizada.

O resultado é que o SVG é frequentemente usado para desenhar logotipos . O código que descreve essas imagens pode ser incorporado diretamente no HTML. Parece um conjunto de instruções declarativas:

<svg viewBox="0 0 100 100">   <circle cx="50" cy="50" r="50" /> </svg> 

Se você precisa que as imagens sejam flexíveis e responsivas, o SVG é a sua escolha.

Canvas - API JavaScript para desenho

Para criar imagens de tela no código HTML da página, coloque o <canvas> , após o qual, usando JavaScript, eles "desenham" nesse elemento. Em outras palavras, o programador fornece instruções ao navegador sobre como ele precisa desenhar algo (essa abordagem está mais próxima do imperativo do que do declarativo). Aqui está o que parece:

 <canvas id="myCanvas" width="578" height="200"></canvas> <script>  var canvas = document.getElementById('myCanvas');  var context = canvas.getContext('2d');  var centerX = canvas.width / 2;  var centerY = canvas.height / 2;  var radius = 70;  context.beginPath();  context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);  context.fillStyle = 'green';  context.fill(); </script> 

Imagens SVG são armazenadas no DOM

Se você estiver familiarizado com eventos DOM, como click e mouseDown , lembre-se de que esses eventos também podem ser usados ​​ao trabalhar com SVG. Nesse sentido, o elemento SVG <circle> não é muito diferente do elemento HTML <div> .

 <svg viewBox="0 0 100 100">   <circle cx="50" cy="50" r="50" />   <script>    document.querySelector('circle').addEventListener('click', e => {      e.target.style.fill = "red";    });  </script> </svg> 

SVG é melhor para tornar o conteúdo da página acessível

O elemento canvas pode receber sua alternativa de texto:

 <canvas aria-label="Hello ARIA World" role="img"></canvas> 

O mesmo pode ser feito para o elemento SVG. Porém, como as imagens SVG e seus mecanismos internos são armazenados diretamente no DOM, o SVG geralmente é considerado uma tecnologia usada nos casos em que eles criam projetos acessíveis a pessoas com deficiência.

Em outras palavras, você pode criar uma imagem SVG, com elementos dos quais as tecnologias assistivas podem funcionar para ajudar seus usuários a navegar nas páginas da web.

Os dados de texto que fazem parte das imagens também são os casos em que é preferível usar SVG. SVG ainda tem um elemento especial - <text> . Ele permite exibir caracteres claros dos textos, e é percebido pela tecnologia assistida . Se você usar o elemento canvas para visualizar textos, esses textos geralmente são exibidos mal e ficam embaçados.

O Canvas é melhor para trabalhar com imagens de pixels individuais

Abaixo, apresentamos várias tabelas compiladas com base na comparação de SVG e canvas por vários especialistas. Em uma dessas comparações, realizada por Sarah Drasner, diz-se que, usando a tela, você pode fazer os pixels dançarem. Isso, é claro, é uma piada, mas, em essência, do jeito que é.

O Canvas é ótimo para criar imagens interativas que contêm muitos detalhes complexos, transições de cores gradientes e muito mais. Por esse motivo, a tela é usada no desenvolvimento de um número muito maior de jogos de navegador que o SVG. Embora, é claro, você sempre possa encontrar desvios das tendências gerais. Aqui , por exemplo, é um jogo cujos gráficos são criados usando as ferramentas SVG.


Jogo SVG

Observe que seu componente gráfico é muito simples e parece bastante "vetor".

Imagens CSS podem ser influenciadas usando CSS

Já dissemos que os elementos SVG são armazenados no DOM e que o acesso a esses elementos pode ser obtido no código JavaScript. No caso do CSS, essa história se repete:

 <svg viewBox="0 0 100 100">   <circle cx="50" cy="50" r="50" />   <style>    circle { fill: blue; }  </style> </svg> 

Observe que nos exemplos os blocos <script> e <style> são colocados dentro do bloco <svg> . Isso é perfeitamente normal. Mas, considerando o fato de o elemento SVG estar em código HTML simples, verifica-se que os blocos internos <script> e <style> podem ser completamente removidos dele. Além disso, se necessário, você pode trabalhar no elemento SVG usando estilos e scripts externos.

Aqui está muito material sobre as propriedades dos elementos SVG e CSS. O mais importante aqui é que tudo o que pode ser feito com os elementos da página usando CSS se aplica ao SVG. Por exemplo, isso está usando os elementos pseudo- :hover e animação :hover

Aqui está um exemplo de animação de um elemento <circle> com CSS.

 <svg viewBox="0 0 100 100">   <circle cx="50" cy="50" r="50" />   <style>    circle { fill: blue; animation: pulse 2s alternate infinite; }    @keyframes pulse {      100% {        r: 30;      }    }  </style>   <script>    document.querySelector('circle').addEventListener('click', e => {      e.target.style.fill = "red";    });  </script> </svg> 

Animações de elementos CSS usando CSS

Combinação de SVG e lona

Do ponto de vista técnico, as tecnologias canvas e SVG não podem ser chamadas mutuamente exclusivas. Por exemplo, imagens SVG podem ser exibidas nos elementos <canvas> . Ao mesmo tempo, como pode ser visto neste exemplo, as imagens SVG exibidas no elemento <canvas> podem muito bem permanecer muito claras e de alta qualidade.


Enviar imagem SVG para o elemento <canvas>

Agora, vejamos algumas tabelas que resumem as comparações entre SVG e canvas feitas por vários especialistas.

Comparando SVG e Canvas

JohnRuth John

Aqui está o projeto com base no qual a tabela a seguir é criada.

▍ Sarah Drasner

A tabela a seguir é baseada neste tweet.

IrShirley Wu

A tabela a seguir é baseada neste tweet.

Muitas pessoas pensam que a tela é melhor para trabalhar com um grande número de objetos (de acordo com Shirley - quando existem mais de 1000).

SVG é a escolha padrão. A tela é um substituto

Aqui está a resposta para o meu tweet sobre as opções de uso do SVG e da tela. O autor desta resposta diz que a escolha entre SVG e canvas deve ser feita assim: "Use canvas quando não puder usar SVG". Entre as situações em que não é possível usar o SVG normalmente, podemos mencionar aquelas em que você precisa animar milhares de objetos, trabalhar com cada pixel específico da imagem e assim por diante.

Sumário

No início deste artigo, apresentamos dois usos típicos de SVG e canvas. Voltaremos a eles e expandiremos suas descrições levando em consideração o que acabamos de aprender.

• Precisa desenhar um pequeno ícone? Este é certamente o território da SVG. O fato é que a descrição da imagem SVG é armazenada no DOM, como resultado do SVG é ótimo para desenhar algo como um ícone em um botão. Desnecessário dizer que as imagens SVG podem ser influenciadas pelo CSS e, usando JavaScript, você pode conectar manipuladores de eventos aos seus elementos.
• Precisa criar um jogo interativo para navegadores? Aqui, definitivamente, precisamos de tecnologia de lona. O jogo do navegador, com certeza, conterá muitos elementos em movimento e animações complexas. Elementos do mundo do jogo irão interagir entre si, o que significa certos requisitos de desempenho. A tela é ótima para resolver esses problemas.

Note-se que entre essas duas opções extremas existe uma grande zona intermediária. Por exemplo, como desenvolvedor e designer da Web, acredito que o SVG é mais conveniente do ponto de vista prático. Eu nem sei se eu faria algum projeto real usando a tela. Talvez isso seja em parte porque não estou familiarizado o suficiente com a tela. E eu estou familiarizado com o SVG muito bem. Estudei essa tecnologia, escrevi um livro sobre isso. Como resultado, eu sei o suficiente sobre SVG para que essa tecnologia possa me ajudar a fazer o que eu preciso.

Caros leitores! Em quais situações você usa SVG e em qual tela?