SVG y canvas son tecnologías que pueden dibujar cosas en los navegadores web, por lo que vale la pena compararlas y comprenderlas cuando una es más adecuada que la otra. Incluso una ligera comprensión de ellos hace que la elección de elegir uno sobre el otro sea bastante clara.
- ¿Un pequeño icono de color plano? Eso es claramente territorio SVG.
- ¿Un juego interactivo similar a una consola? Eso es claramente territorio de lienzo.
Sé que aún no hemos explicado por qué, pero espero que quede claro a medida que profundicemos en ello.
SVG es vectorial y declarativo
Si sabe que necesita arte vectorial, SVG es la elección. El arte vectorial es visualmente nítido y tiende a tener un tamaño de archivo más pequeño que los gráficos rasterizados como JPG.
Eso hace que los logotipos sean un caso de uso de SVG muy común. El código SVG puede ir directamente dentro de HTML y son como instrucciones de dibujo declarativas:
<svg viewBox="0 0 100 100">
<circle cx="50" cy="50" r="50" />
</svg>Si le importa mucho la flexibilidad y la capacidad de respuesta del gráfico, SVG es el camino.
Canvas es una API de dibujo de JavaScript
Pones un <canvas> elemento en HTML, luego haga el dibujo en JavaScript. En otras palabras, emite comandos para decirle cómo dibujar (que es más imperativo que declarativo).
<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>SVG está en el DOM
Si está familiarizado con eventos DOM como click y mouseDown y otras cosas, también están disponibles en SVG. A <circle> no es terriblemente diferente a un <div> en ese sentido.
<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 para accesibilidad
Puede tener una alternativa de texto para lienzo:
<canvas aria-label="Hello ARIA World" role="img"></canvas>También puede hacer eso en SVG, pero dado que SVG y sus entrañas pueden estar directamente en el DOM, generalmente pensamos en SVG como lo que usa si está tratando de crear una experiencia accesible. Explicado de otra manera, puede crear un SVG al que la tecnología de asistencia pueda acceder y encontrar enlaces y subelementos con sus propias explicaciones auditivas y demás.
El texto también está firmemente en territorio SVG. SVG tiene literalmente un <text> elemento, que es accesible y visualmente nítido, a diferencia del lienzo donde el texto suele ser borroso.
Lienzo para píxeles
Como verás en la comparación de Sarah Dranser a continuación, el lienzo es una forma de decir ¡baile, píxeles, baile !. Es una forma divertida de explicar el concepto que lo lleva a casa mejor que cualquier sentimiento técnico seco.
El trabajo altamente interactivo con muchos detalles complejos y degradados es el territorio del lienzo. Verás muchos más juegos construidos con lienzo que SVG por esta razón, aunque siempre hay excepciones (ten en cuenta la simple vectoridad de este juego).
CSS puede jugar con SVG
Vimos anteriormente que SVG puede estar en el DOM y que JavaScript puede entrar y hacer cosas. La historia es similar con CSS.
<svg viewBox="0 0 100 100">
<circle cx="50" cy="50" r="50" />
<style>
circle { fill: blue; }
</style>
</svg>Tenga en cuenta cómo he puesto el <script> y <style> bloques dentro del <svg> para estos ejemplos, que es válido. Pero suponiendo que haya puesto el SVG literalmente en el HTML, puede moverlos o hacer que otros CSS y JavaScript externos hagan lo mismo.
Tenemos una guía masiva de propiedades SVG y CSS. Pero lo que es bueno saber es que las cosas en las que CSS es excelente todavía son posibles en SVG, como :hover estados y animación!
Ver la pluma
ExxbpBE por Chris Coyier (@chriscoyier)
en CodePen.
Combinaciones
Técnicamente, no son completamente excluyentes entre sí. A <svg> se puede pintar a un <canvas>.
Como demuestra Blake Bowen, ¡incluso puede mantener el SVG en el lienzo muy nítido!
Ver la pluma
SVG vs Canvas Scaling por Blake Bowen (@osublake)
en CodePen.
Comparación de Ruth John
Ver la pluma
SVG vs Canvas de Rumyra (@Rumyra)
en CodePen.
Comparación de Sarah Drasner
Tablizado de este tweet.
| DOM / DOM virtual | Lienzo | |
|---|---|---|
| Pros | ||
| Excelente para animación UI / UX | ¡Baila, píxeles, baila! | |
| Excelente para SVG que es independiente de la resolución | Genial para material 3D realmente impresionante o envolvente | |
| Más fácil de depurar | Movimiento de toneladas de objetos | |
| Contras | ||
| Tanques con muchos objetos. | Más difícil de hacer accesible | |
| Porque tienes que preocuparte por la forma en que animas | No resolución independiente desde el primer momento | |
| Se rompe a la nada |
Comparación de Shirley Wu
Tablizado de este tweet.
| SVG | Lienzo | |
|---|---|---|
|
Pros |
Fácil de empezar | Muy eficiente |
| Más fácil de registrar las interacciones de los usuarios | Fácil de actualizar | |
| Fácil de animar | ||
|
Contras |
DOM potencialmente complejo | Más trabajo para empezar |
| No funciona para una gran cantidad de elementos | Más trabajo para manejar las interacciones | |
| Tienes que escribir animaciones personalizadas |
Mucha gente considera que los escenarios con muchos objetos (más de 1000, como dice Shirley) son el territorio del lienzo.
SVG es la opción predeterminada; el lienzo es la copia de seguridad
Una opinión fuerte, pero me parece correcta:
Una forma extremadamente básica de responder es “use canvas cuando no pueda usar svg” (donde “can’t” podría significar animar miles de objetos, manipular cada píxel individualmente, etc.). Para decirlo de otra manera, SVG debería ser su opción predeterminada, muestre su plan de respaldo.
– Benjamin De Cock (@bdc) 2 de octubre de 2019
Envolver
Entonces, si revisamos esos dos primeros puntos…
- ¿Un pequeño icono de color plano? SVG va en el DOM, por lo que algo como un icono dentro de un botón tiene mucho sentido para SVG, sin mencionar que se puede controlar con CSS y tener controladores de eventos JavaScript regulares y demás.
- ¿Un juego interactivo similar a una consola? Eso tendrá muchos elementos en movimiento, animaciones e interacciones complejas, consideraciones de rendimiento. Esas son cosas en las que el lienzo sobresale.
Y, sin embargo, hay un montón de puntos intermedios aquí. Como diseñador / desarrollador web del día a día, encuentro SVG mucho más útil en un nivel práctico. No estoy seguro de haber realizado ningún trabajo de producción en lienzo. Parte de eso se debe a que no conozco tan bien el lienzo. Escribí un libro sobre SVG, así que he investigado mucho más en ese lado, pero sé lo suficiente que SVG está haciendo lo correcto para mis necesidades.