SVG o lienzo?

SVG y el lienzo son tecnologías que puede usar para dibujar algo en las páginas web. Por lo tanto, se deben comparar y determinar cuándo usar SVG y cuándo usar canvas. Incluso una comprensión muy superficial de la esencia de estas tecnologías le permite tomar una decisión muy informada. De hecho, aquí hay dos situaciones típicas, en una de las cuales debe preferir SVG, y en la otra: canvas:

• ¿Necesita dibujar un ícono pequeño? Este es ciertamente el territorio de SVG.
• ¿Necesitas crear un juego de navegador interactivo? Aquí, definitivamente, necesitamos tecnología de lienzo.

El autor del artículo, cuya traducción publicamos hoy, dice que sabe que aún no ha revelado los motivos de esta elección. Pero espera que estas razones se vuelvan completamente obvias después de compartir algunos detalles sobre SVG y el lienzo.

SVG - gráficos vectoriales descritos declarativamente

Si sabe que necesita colocar una imagen vectorial en una página web, eso significa que SVG es adecuado para usted. Las imágenes vectoriales generalmente se ven mejor que las imágenes ráster similares almacenadas, por ejemplo, en archivos JPG. Además, los archivos de imagen vectorial suelen ser más pequeños que los archivos de imagen ráster.

El resultado es que SVG se usa muy a menudo para dibujar logotipos . El código que describe tales imágenes se puede incrustar directamente en HTML. Parece un conjunto de instrucciones declarativas:

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

Si necesita imágenes para ser flexible y sensible, entonces SVG es su elección.

Canvas - API de JavaScript para dibujar

Para crear imágenes de lienzo en el código HTML de la página, coloque el <canvas> , después de lo cual, usando JavaScript, "dibujan" en este elemento. En otras palabras, el programador le da al navegador instrucciones sobre cómo necesita dibujar algo (este enfoque está más cerca del imperativo que del declarativo). Así es como se ve:

 <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> 

Las imágenes SVG se almacenan en el DOM

Si está familiarizado con los eventos DOM, como click y mouseDown , tenga en cuenta que estos eventos también se pueden usar al trabajar con SVG. En este sentido, el elemento SVG <circle> no es muy diferente del 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 es mejor para hacer que el contenido de la página sea accesible

Al elemento de lienzo se le puede asignar su alternativa de texto:

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

Lo mismo se puede hacer para el elemento SVG. Pero, dado que las imágenes SVG y sus mecanismos internos se almacenan directamente en el DOM, SVG generalmente se considera como una tecnología utilizada en los casos en que crean proyectos accesibles para personas con discapacidades.

En otras palabras, puede crear una imagen SVG, con elementos de los cuales las tecnologías de asistencia pueden funcionar para ayudar a sus usuarios a navegar por las páginas web.

Los datos de texto que forman parte de las imágenes también son el caso cuando es preferible usar SVG. SVG incluso tiene un elemento especial: <text> . Le permite mostrar caracteres claros de textos, es percibido por la tecnología de asistencia . Si utiliza el elemento de lienzo para visualizar textos, dichos textos a menudo se muestran mal y se ven borrosos.

Canvas es mejor para trabajar con imágenes de píxeles individuales

A continuación damos varias tablas compiladas sobre la base de comparar SVG y lienzo por varios expertos. En una de esas comparaciones, realizada por Sarah Drasner, se dice que usando el lienzo puedes hacer que los píxeles bailen. Esto, por supuesto, es una broma, pero, en esencia, así es.

Canvas es ideal para crear imágenes interactivas que contienen muchos detalles complejos, transiciones de color degradado y más. Por esta razón, el lienzo se utiliza en el desarrollo de una cantidad mucho mayor de juegos de navegador que SVG. Aunque, por supuesto, siempre puedes encontrar desviaciones de las tendencias generales. Aquí , por ejemplo, hay un juego cuyos gráficos se crean utilizando herramientas SVG.


Juego SVG

Tenga en cuenta que su componente gráfico es muy simple y se ve bastante "vector".

Las imágenes CSS pueden ser influenciadas usando CSS

Ya hemos dicho que los elementos SVG se almacenan en el DOM y que el acceso a estos elementos se puede obtener del código JavaScript. En el caso de CSS, esta historia se repite:

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

Tenga en cuenta que en los ejemplos los bloques <script> y <style> se colocan dentro del bloque <svg> . Esto es perfectamente normal. Pero si tenemos en cuenta el hecho de que el elemento SVG está en código HTML normal, resulta que los bloques internos <script> y <style> pueden eliminarse por completo de él. Además, si es necesario, puede trabajar en el elemento SVG utilizando estilos y scripts externos.

Aquí hay mucho material sobre las propiedades de los elementos SVG y CSS. Lo más importante aquí es que todo lo que se puede hacer con elementos de página usando CSS se aplica a SVG. Por ejemplo, esto está utilizando :hover pseudoclase y elementos de animación :hover .

Aquí hay un ejemplo de animación de un elemento <circle> con 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> 

Animaciones de elementos CSS con CSS

Combinación de SVG y lienzo.

Desde un punto de vista técnico, las tecnologías de lienzo y SVG no pueden llamarse mutuamente excluyentes. Por ejemplo, las imágenes SVG se pueden mostrar en elementos <canvas> . Al mismo tiempo, como se puede ver en este ejemplo, las imágenes SVG que se muestran en el elemento <canvas> pueden permanecer muy claras y de alta calidad.


Salida de imagen SVG al elemento <canvas>

Ahora veamos algunas tablas que resumen las comparaciones entre SVG y el lienzo realizadas por varios expertos.

Comparando SVG y lienzo

▍Ruth John

Aquí está el proyecto en base al cual se construye la siguiente tabla.

▍ Sarah Drasner

La siguiente tabla se basa en este tweet.

▍Shirley Wu

La siguiente tabla se basa en este tweet.

Mucha gente piensa que el lienzo es mejor para trabajar con una gran cantidad de objetos (según Shirley, cuando hay más de 1000).

SVG es la opción estándar. El lienzo es una alternativa

Aquí está la respuesta a mi tweet sobre las opciones para usar SVG y canvas. El autor de esta respuesta dice que la elección entre SVG y lienzo debe hacerse así: "Use el lienzo cuando no pueda usar SVG". Entre las situaciones en las que no es posible usar SVG normalmente, podemos mencionar aquellas en las que necesita animar miles de objetos, trabajar con cada píxel específico en la imagen, etc.

Resumen

Al comienzo de este artículo, presentamos dos usos típicos de SVG y canvas. Volveremos a ellos y ampliaremos sus descripciones teniendo en cuenta lo que acabamos de aprender.

• ¿Necesita dibujar un ícono pequeño? Este es ciertamente el territorio de SVG. El hecho es que la descripción de la imagen SVG se almacena en el DOM, como resultado de SVG es excelente para dibujar algo como un icono en un botón. No hace falta decir que las imágenes SVG pueden ser influenciadas por CSS, y usando JavaScript, puede conectar controladores de eventos a sus elementos.
• ¿Necesitas crear un juego de navegador interactivo? Aquí, definitivamente, necesitamos tecnología de lienzo. El juego del navegador, seguramente, contendrá muchos elementos móviles y animaciones complejas. Los elementos del mundo del juego interactuarán entre sí, lo que significa ciertos requisitos de rendimiento. El lienzo es ideal para resolver tales problemas.

Cabe señalar que entre estas dos opciones extremas hay una gran zona intermedia. Por ejemplo, como desarrollador y diseñador web, creo que SVG es más conveniente desde un punto de vista práctico. Ni siquiera sé si haría algún proyecto real usando el lienzo. Quizás esto se deba en parte a que no estoy suficientemente familiarizado con el lienzo. Y estoy familiarizado con SVG bastante bien. Estudié esta tecnología, escribí un libro al respecto. Como resultado, sé lo suficiente sobre SVG para que esta tecnología pueda ayudarme a hacer lo que necesito.

Estimados lectores! ¿En qué situaciones usa SVG y en qué lienzo?