Hablemos de SVG y Canvas: Conceptos y Diferencias

390Palabras
2Minutos
02 Aug, 2024
- Tecnología

En el desarrollo frontend, a veces necesitamos trabajar con gráficos y animaciones. Para ello, HTML5 ofrece dos tecnologías principales: SVG y Canvas. Este artículo presentará sus conceptos, diferencias y te ayudará a entender sus diferencias mediante ejemplos de código.

¿Qué es SVG?

SVG (Scalable Vector Graphics) es un formato de gráficos vectoriales basado en XML. Se utiliza para definir gráficos vectoriales, con la ventaja de que son escalables, es decir, no pierden calidad al ampliarse o reducirse. Las imágenes SVG están compuestas por rutas, líneas, textos y otros gráficos básicos, y estos elementos se pueden manipular mediante operaciones DOM.

Ejemplo de SVG

1
<svg width="100" height="100">
2
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
3
</svg>

El código anterior dibuja un círculo rojo con un borde negro. El centro del círculo está en las coordenadas (50, 50) y tiene un radio de 40.

¿Qué es Canvas?

Canvas es un elemento introducido en HTML5 para dibujar gráficos. Es una superficie de dibujo a nivel de píxeles que se puede manipular mediante JavaScript. A diferencia de SVG, Canvas es más adecuado para operaciones con grandes cantidades de píxeles, como la renderización de imágenes en juegos.

Ejemplo de Canvas

1
<canvas id="myCanvas" width="100" height="100"></canvas>
2
<script>
3
  var canvas = document.getElementById("myCanvas");
4
  var ctx = canvas.getContext("2d");
5
  ctx.beginPath();
6
  ctx.arc(50, 50, 40, 0, 2 * Math.PI);
7
  ctx.fillStyle = "red";
8
  ctx.fill();
9
  ctx.lineWidth = 3;
10
  ctx.strokeStyle = "black";
11
  ctx.stroke();
12
</script>

En este ejemplo, utilizamos Canvas para dibujar un círculo relleno de color rojo con un borde negro.

Diferencias entre SVG y Canvas

Aunque tanto SVG como Canvas se pueden utilizar para dibujar gráficos, tienen diferencias significativas. A continuación, se presentan las principales diferencias entre ambos:

Característica	SVG	Canvas
Modo de renderización	Basado en gráficos vectoriales	Basado en píxeles
Escalado	Mantiene la calidad del gráfico, sin distorsión	El escalado puede resultar en pixelación
Manejo de eventos	Soporta eventos DOM (clics, desplazamientos, etc.)	No soporta directamente, requiere cálculos manuales
Animación	Animación con CSS y JavaScript	Actualización manual mediante JavaScript
Tamaño de archivo	Generalmente más pequeño	Depende de la complejidad de la imagen, puede ser más grande
Casos de uso	Gráficos, mapas, iconos	Juegos, visualización de datos, procesamiento de imágenes

Conclusión

SVG y Canvas tienen sus propias ventajas, y la elección de la tecnología depende del caso de uso específico. Si necesitas gráficos vectoriales de alta calidad con interactividad, SVG es una mejor opción; mientras que si necesitas manejar grandes cantidades de imágenes de píxeles o crear animaciones complejas, Canvas es más adecuado.

Espero que este artículo te ayude a comprender mejor las diferencias entre SVG y Canvas.