SVG (Scalable Vector Graphics)
SVG define gráficos basados en vectores XML que pueden incrustarse directamente en las páginas HTML. Los gráficos SVG son escalables y no pierden calidad si se les amplía o se les cambia el tamaño.
¿Qué es SVG?
SVG significa gráficos vectoriales escalables
SVG se utiliza para definir gráficos basados en vectores para la web
SVG define gráficos en formato XML
Cada elemento y atributo en archivos SVG se puede animar
SVG es una recomendación de la W3C
SVG se integra con otros estándares, como CSS, DOM, XSL y JavaScript
El elemento SVG
El elemento HTML <svg> es un contenedor de gráficos SVG. SVG tiene varios métodos para dibujar trazados, rectángulos, círculos, polígonos, texto y mucho más.
Ejemplos
Círculo
Rectángulo
Opacidad y esquinas redondeadas
Estrella
Elipse gradiente
Diferencias entre svg y canvas
SVG es un lenguaje para describir gráficos 2D en XML, mientras que Canvas dibuja gráficos 2D sobre la marcha (con JavaScript).
SVG está basado en XML, lo que significa que todos los elementos están disponibles dentro del DOM de SVG. Puede adjuntar controladores de eventos de JavaScript a gráficos SVG.
En SVG, cada forma dibujada se recuerda como un objeto. Si se cambian los atributos de un objeto SVG, el navegador puede volver a representar la forma automáticamente.
Canvas se representa píxel a píxel. En el canvas, una vez dibujado el gráfico, el navegador lo olvida. Si se debe cambiar su posición, es necesario volver a dibujar toda la escena, incluidos los objetos que puedan haber sido cubiertos por el gráfico.
Comparación entre svg y canvas
La siguiente tabla muestra algunas diferencias importantes entre Canvas y SVG:
| SVG | Canvas |
| Resolución independiente | Resolución dependiente |
| Soporte para controladores de eventos | No hay soporte para controladores de eventos |
| Buenas capacidades de representación de texto | Pobres capacidades de representación de texto |
| Representación lenta si es compleja | Puedes guardar la imagen resultante como .png o .jpg |
| No apto para aplicaciones de juegos | Muy adecuado para juegos con uso intensivo de gráficos |
Aprende más sobre SVG
Para aprender más sobre <svg>, ve al tutorial HTML SVG de W3Schools y aprende gratis.
El contenido de este artículo fue inspiración original del tutorial HTML SVG Graphics de W3Schools.
"La mejor manera de aprender a programar es practicando todos los días"