SVG en HTML5 - Aprender HTML

SVG (Scalable Vector Graphics) es un formato basado en XML para describir gráficos bidimensionales como formas — puntos, líneas, curvas y texto — en lugar de una cuadrícula de píxeles. Como el navegador dibuja un SVG a partir de una descripción matemática, permanece perfectamente nítido a cualquier tamaño y en cualquier densidad de pantalla, razón por la cual los iconos, logotipos, gráficos y diagramas se entregan tan frecuentemente como SVG.

HTML5 ofrece varias formas de incluir SVG en una página, y cada una implica distintas concesiones en cuanto al acceso al DOM, la caché, los estilos y el fallback. Esta página recorre todos los métodos de inserción habituales y luego te ayuda a elegir entre ellos.

Si eres nuevo en este formato, comienza con la introducción a SVG. Para una lista completa de elementos y atributos, consulta la referencia de SVG.

SVG inline

El método más potente es escribir el marcado SVG directamente en tu HTML. Como el SVG pasa a formar parte del documento, cada forma es un nodo real del DOM: puedes estilizarla con CSS, manipularla con JavaScript y responder a eventos en rutas individuales.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="300" height="200" viewBox="0 0 300 200"
         xmlns="http://www.w3.org/2000/svg"
         role="img" aria-labelledby="circleTitle">
      <title id="circleTitle">A pink circle outlined in purple</title>
      <circle cx="150" cy="100" r="50" stroke="purple" stroke-width="5" fill="pink" />
    </svg>
  </body>
</html>

Pruébalo tú mismo »

Entendamos el código:

Un SVG inline siempre comienza con una etiqueta <svg> y termina con </svg>.
width y height establecen el tamaño del cuadro SVG en la página (en píxeles CSS).
viewBox="0 0 300 200" define el sistema de coordenadas interno: los valores son min-x min-y width height. El navegador escala estas unidades de usuario para ajustarse a los valores width/height mostrados, por lo que un viewBox es lo que hace que el gráfico sea verdaderamente escalable y responsivo. (Si omites width/height, el SVG se expandirá para llenar su contenedor manteniendo la relación de aspecto del viewBox.)
xmlns="http://www.w3.org/2000/svg" declara el espacio de nombres SVG. Es obligatorio cuando el SVG se sirve como archivo .svg independiente; dentro de HTML5 el navegador suele inferirlo, pero incluirlo mantiene el marcado portable.
El elemento <circle> dibuja un círculo. cx y cy son las coordenadas x/y de su centro (con valor predeterminado 0,0 si se omiten), y r es el radio.
stroke y stroke-width controlan el contorno — en este caso un borde púrpura de 5px. fill establece el color interior, aquí rosa.

SVG dispone de un conjunto de elementos de forma básicos que puedes combinar para construir un gráfico. Consulta la lista de elementos de forma SVG más abajo.

Peligro

SVG es XML, por lo que cada elemento debe cerrarse correctamente. Las etiquetas de cierre automático como <circle ... /> necesitan la barra inclinada final, y las etiquetas contenedoras como <svg> necesitan su correspondiente </svg>.

Accesibilidad para SVG inline

El SVG decorativo puede ocultarse a las tecnologías de asistencia con aria-hidden="true". Cuando el gráfico transmite información, expónla:

Añade role="img" para que los lectores de pantalla traten el <svg> completo como una única imagen.
Dale un <title> (un nombre accesible corto) y, si es necesario, un <desc> (una descripción más larga), y luego referencialos con aria-labelledby.

<svg viewBox="0 0 100 100" role="img" aria-labelledby="t d"
     xmlns="http://www.w3.org/2000/svg">
  <title id="t">Sales chart</title>
  <desc id="d">Bar chart showing a 20% rise in Q4 sales.</desc>
  <rect x="10" y="40" width="20" height="50" fill="teal" />
</svg>

Ten en cuenta que <title> y <desc> son elementos SVG especiales, no texto visible — <title> no es lo mismo que el <title> HTML en el encabezado del documento.

Insertar un archivo `.svg` externo

El marcado inline aumenta el tamaño de tu HTML y no puede almacenarse en caché por separado. Cuando tienes un recurso reutilizable, guarda el SVG en su propio file.svg y referéncialo. Hay cuatro formas comunes de hacerlo.

Como imagen con `<img>`

El enfoque más sencillo y ampliamente compatible. El SVG se comporta como cualquier otra imagen — se almacena en caché, admite carga diferida y es fácil de usar.

<img src="logo.svg" width="120" height="40" alt="Company logo" />

Concesiones: no puedes acceder a los elementos internos del SVG desde el CSS o JavaScript de la página, y los scripts dentro del SVG no se ejecutan. Esto es generalmente lo que deseas para iconos y logotipos. Proporciona siempre texto alt. Consulta la guía de <img> e imágenes en HTML.

Como objeto con `<object>`

<object> carga el SVG como un documento separado, de modo que sus scripts internos se ejecutan y puedes acceder a él mediante contentDocument. También ofrece contenido de fallback natural entre las etiquetas.

<object type="image/svg+xml" data="diagram.svg" width="300" height="200">
  <img src="diagram.png" alt="Diagram fallback" />
</object>

Concesiones: los scripts entre dominios están sujetos a la política del mismo origen (CORS), y los estilos del SVG desde la hoja de estilos de la página padre no se aplican. Lee más en el capítulo de la etiqueta <object> de HTML.

Como incrustado con `<embed>`

<embed> también carga el SVG como un documento externo. Es similar a <object>, pero no puede proporcionar contenido de fallback (no tiene etiqueta de cierre ni nodos hijo).

<embed type="image/svg+xml" src="diagram.svg" width="300" height="200" />

Prefiere <object> sobre <embed> cuando necesites un fallback. Consulta la etiqueta <embed> de HTML para más detalles.

Como `background-image` de CSS

Cuando el SVG es puramente decorativo, establécelo como fondo CSS. Se almacena en caché y mantiene el HTML limpio, pero es invisible para las tecnologías de asistencia e inaccesible mediante scripts.

<style>
  .hero {
    width: 300px;
    height: 200px;
    background-image: url("pattern.svg");
    background-size: cover;
  }
</style>
<div class="hero"></div>

Incluso puedes insertar un SVG pequeño como URI de datos: background-image: url('data:image/svg+xml,...').

SVG inline frente a archivo externo

Capacidad	`<svg>` inline	Externo (`img`/`object`/`embed`/CSS)
Estilizar formas con el CSS de la página	Sí	No (solo `<object>`/`<embed>` mediante CSS interno)
Manipular formas individuales desde la página con scripts	Sí	Limitado / bloqueado por CORS
Almacenado en caché separado del HTML	No	Sí
Reutilizable en varias páginas sin copiar y pegar	No	Sí
Mantiene el HTML pequeño	No	Sí

Regla general: opta por SVG inline cuando necesites animar, tematizar o interactuar con el gráfico (iconos que cambian de color al pasar el cursor, gráficos interactivos). Usa un <img src="*.svg"> externo para logotipos estáticos e imágenes decorativas que reutilizas en todo el sitio.

SVG frente a imágenes rasterizadas

SVG es un formato vectorial; PNG, JPEG, GIF y WebP son formatos rasterizados (de píxeles).

Independencia de resolución. SVG escala a cualquier tamaño sin desenfoque y sin archivos @2x/@3x separados — ideal para iconos, logotipos y dibujos de líneas en pantallas de alta densidad de píxeles.
Archivos pequeños para gráficos simples. Los gráficos planos con pocas formas suelen ser mucho más pequeños como SVG, y el texto que contienen sigue siendo seleccionable y buscable.
Editable y manipulable mediante scripts. SVG es texto, por lo que se puede comparar en el control de versiones y animar.

Cuándo SVG no es la opción adecuada: fotografías e imágenes con gran detalle. Una foto descrita como miles de formas sería enorme y lenta de renderizar — usa JPEG o WebP en su lugar. SVG destaca en geometría nítida, mientras que los efectos complejos por píxel pertenecen a los formatos rasterizados o al elemento <canvas>.

Elementos de forma SVG

El SVG inline proporciona un conjunto de formas predefinidas que puedes combinar para construir gráficos:

rectángulo <rect> — rectángulos y rectángulos con esquinas redondeadas
círculo <circle> — círculos definidos por un centro y un radio
elipse <ellipse> — óvalos con radios x/y independientes
línea <line> — un segmento recto entre dos puntos
polilínea <polyline> — una serie de segmentos rectos conectados
polígono <polygon> — una forma cerrada a partir de una lista de puntos
trayecto <path> — líneas y curvas arbitrarias, la forma más flexible

Véase también

Práctica

¿Qué método te permite estilizar y manipular formas SVG individuales con el propio CSS y JavaScript de la página?

Escribir el SVG de forma inline con un elemento <svg> en el HTML.Insertar el SVG con <img src='logo.svg'>.Establecer el SVG como background-image de CSS.Referenciar el archivo SVG con <embed>.