Introducción a SVG

SVG (Scalable Vector Graphics) describe gráficos bidimensionales en XML. En lugar de almacenar una cuadrícula de píxeles de colores (como lo hacen JPEG, PNG o GIF), un archivo SVG almacena las instrucciones para dibujar formas: líneas, curvas, círculos, rectángulos y texto. El navegador lee esas instrucciones y renderiza la imagen de nuevo en cualquier tamaño en que se muestre, por lo que el resultado se mantiene nítido a cualquier nivel de zoom o resolución de pantalla.

SVG es una recomendación del W3C y se integra con otros estándares como el DOM, CSS y JavaScript. Dado que cada forma es un elemento real en el documento, puedes aplicarle estilos con CSS, animarla y responder a clics y hovers igual que con cualquier otro elemento HTML.

Esta página explica cómo funciona SVG dentro de una página HTML, cómo está dispuesto su sistema de coordenadas, cuándo usar SVG en lugar de Canvas o una imagen rasterizada, y las tres formas estándar de incrustar un documento SVG.

Cómo funciona SVG en una página HTML

Una imagen SVG es en sí misma un pequeño documento XML. El elemento raíz <svg> contiene elementos hijos de forma, y el navegador los pinta en el orden del código fuente: los elementos posteriores se dibujan encima de los anteriores, del mismo modo que se apilan las capas en un programa de pintura.

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

El sistema de coordenadas

SVG utiliza una cuadrícula de coordenadas cuyo origen (0, 0) es la esquina superior izquierda. El eje x crece hacia la derecha y el eje y crece hacia abajo — ten en cuenta que esto difiere de la convención y-arriba que puedes conocer de las clases de matemáticas.

• Los atributos width y height en <svg> establecen el tamaño del área de dibujo en píxeles.
• Un atributo viewBox (por ejemplo, viewBox="0 0 100 100") define el espacio de coordenadas interno, permitiendo que el mismo dibujo escale para ajustarse a cualquier tamaño renderizado.

En el ejemplo anterior, el centro del círculo está en (50, 50) — el centro de un lienzo de 100×100 — y su radio alcanza 40 unidades hacia afuera en todas las direcciones.

Lectura de los atributos de <circle>

Cada atributo del elemento <circle> controla un aspecto de cómo se dibuja:

Obtén más información sobre el pintado de contornos en trazado SVG, y consulta todas las formas y atributos en la referencia SVG.

SVG vs. Canvas vs. imágenes rasterizadas

Elegir la tecnología adecuada depende de lo que vayas a dibujar y cómo va a cambiar.

• SVG es la mejor opción para gráficos que deben mantenerse nítidos a cualquier tamaño y que deseas aplicar estilos, animar o hacer interactivos: iconos, logotipos, gráficos, diagramas y mapas. Cada forma es un nodo del DOM, por lo que es accesible y fácil de programar. Puede volverse lento cuando una escena contiene decenas de miles de elementos individuales.
• Canvas dibuja píxeles en un mapa de bits con JavaScript. No tiene DOM por forma, lo que lo hace eficiente para escenas que cambian rápidamente con muchos objetos — juegos, efectos de partículas y visualizaciones de datos en tiempo real — pero el resultado no escala sin volver a dibujar y es más difícil de hacer accesible.
• Las imágenes rasterizadas (JPEG, PNG, GIF, WebP) almacenan píxeles fijos. Son la elección correcta para fotografías y texturas complejas, pero se difuminan o pixelan cuando se amplían y pesan más a altas resoluciones.

Una regla simple: usa SVG para arte vectorial independiente de la resolución y con scripts; usa Canvas para renderizado de píxeles de alta frecuencia; usa formatos rasterizados para fotografías.

Incrustar SVG en HTML

Los archivos SVG usan la extensión .svg y son compatibles con todos los navegadores modernos. Hay tres formas comunes de colocar SVG en una página, cada una con sus propias ventajas y desventajas.

<svg> en línea

Escribe el marcado SVG directamente dentro de tu HTML. Esto te da acceso completo a cada forma, por lo que puedes aplicarle estilos con CSS y animar o programar elementos individuales desde la misma página.

<body>
  <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
  </svg>
</body>

<img> con una fuente SVG

Apunta un elemento <img> a un archivo .svg externo. Es sencillo y se puede almacenar en caché, pero el SVG se trata como una imagen plana: sus elementos internos no pueden recibir estilos ni programarse desde la página anfitriona.

<img src="circle.svg" width="100" height="100" alt="A yellow circle outlined in green" />

El elemento <object>

El elemento <object> carga el SVG como un documento separado al tiempo que expone su DOM a los scripts, y permite proporcionar contenido alternativo para navegadores que no puedan cargarlo.

<object data="circle.svg" type="image/svg+xml" width="100" height="100">
  Your browser does not support SVG.
</object>

Para más información sobre el elemento en línea, consulta la etiqueta HTML <svg> y SVG en HTML5.

Creación de imágenes SVG

Puedes escribir SVG a mano en cualquier editor de texto, lo cual es práctico para iconos y formas simples. Para obras de arte con muchas curvas y trayectorias, un programa de dibujo como Inkscape suele ser más conveniente — exporta archivos .svg limpios que luego puedes refinar a mano. Para dibujar formas curvas con código, comienza con el elemento SVG path, y para segmentos rectos consulta el elemento SVG line.

Hacer SVG accesible

Cuando un SVG transmite significado, proporciona algo que la tecnología de asistencia pueda leer. El enfoque depende de cómo esté incrustado el SVG:

• Para <svg> en línea, agrega un <title> (y una <desc> más larga opcional) como los primeros hijos, y marca la raíz con role="img". Referenciar el título con aria-labelledby vincula el nombre accesible al elemento.

<svg role="img" aria-labelledby="circleTitle"
     xmlns="http://www.w3.org/2000/svg" width="100" height="100">
  <title id="circleTitle">A yellow circle outlined in green</title>
  <desc>A solid yellow disk with a four-pixel green border, used as a status indicator.</desc>
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

• Para un SVG cargado mediante <img>, usa un atributo alt descriptivo, exactamente como lo harías con cualquier imagen.
• Si el gráfico es puramente decorativo, ocúltalo a la tecnología de asistencia con aria-hidden="true" (en línea) o con un alt="" vacío (en <img>) para que los lectores de pantalla lo omitan.

También puedes agregar texto accesible dentro de un dibujo con el elemento SVG text.

Ventajas de usar SVG

En comparación con los formatos rasterizados como JPEG y GIF, SVG ofrece varias ventajas:

• Las imágenes SVG pueden generarse y modificarse con cualquier editor de texto.
• Las imágenes SVG pueden programarse, indexarse, buscarse y comprimirse.
• Puedes imprimir imágenes SVG con alta calidad a cualquier resolución.
• Las imágenes SVG pueden escalarse y ampliarse sin perder calidad.
• Cada forma es parte del DOM, por lo que puede recibir estilos con CSS y animarse.
• SVG es un estándar abierto del W3C.

Práctica