Etiqueta HTML svg - Aprende HTML

La etiqueta <svg> se usa como contenedor para gráficos SVG.

SVG (Scalable Vector Graphics) es un lenguaje para gráficos bidimensionales basado en XML. A diferencia de los formatos de trama como PNG o JPEG, una imagen SVG se describe mediante formas y coordenadas en lugar de una cuadrícula fija de píxeles, por lo que permanece nítida a cualquier tamaño y escala sin perder calidad. SVG también admite interactividad, animación y acceso completo a cada elemento a través del DOM.

Esta página explica cómo incrustar SVG directamente en HTML, el importantísimo sistema de coordenadas viewBox, las formas de dibujo básicas, cómo hacer que SVG sea accesible, los atributos del elemento <svg> y cómo se compara SVG con <canvas>.

Sintaxis de `<svg>`

La etiqueta <svg> viene en pares. Las formas que deseas dibujar se escriben entre las etiquetas de apertura (<svg>) y cierre (</svg>).

Ejemplo de la etiqueta HTML `<svg>`:

Etiqueta HTML <svg>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <div style="display:flex; flex-flow:row wrap;">
      <svg width="180" height="180">
        <rect x="20" y="20" rx="20" ry="20" width="100" height="100" style="fill:lightgray; stroke:#1c87c9; stroke-width:4;"/>
      </svg>
      <svg width="200" height="200">
        <circle cx="100" cy="70" r="60" stroke="#1c87c9" stroke-width="4" fill="lightgray"/>
      </svg>
      <svg width="200" height="200">
        <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lightgray; stroke:#1c87c9; stroke-width:4; fill-rule:evenodd;"/>
      </svg>
    </div>
  </body>
</html>

Pruébalo tú mismo »

Peligro

El atributo xmlns solo es obligatorio para el elemento <svg> externo de documentos SVG independientes (un archivo .svg). No es necesario para elementos <svg> internos ni cuando se incrusta SVG en línea en un documento HTML.

Ejemplo de la etiqueta HTML `<svg>` dibujando una elipse:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="400" height="200">
      <ellipse cx="100" cy="50" rx="100" ry="50" fill="#1c87c9" />
    </svg>
  </body>
</html>

Pruébalo tú mismo »

El viewBox y el sistema de coordenadas SVG

El viewBox es el concepto más importante en SVG. Define el sistema de coordenadas en el que se dibujan todas las formas y es lo que hace que un SVG sea verdaderamente escalable.

Los atributos width y height establecen el tamaño del cuadro SVG en la página (en píxeles CSS). El atributo viewBox, en cambio, define el sistema de coordenadas interno mediante cuatro números:

viewBox="min-x min-y width height"

min-x, min-y — las coordenadas de la esquina superior izquierda del área de visualización.
width, height — cuántas unidades de usuario de ancho y alto tiene el área de visualización.

El navegador mapea ese área de visualización interna al width/height en pantalla, escalando según sea necesario. Así, un círculo dibujado en cx="50" cy="50" con viewBox="0 0 100 100" siempre queda en el centro, sin importar el tamaño con que se renderice el SVG.

El ejemplo a continuación dibuja el mismo círculo en dos SVG. El primero depende únicamente de width/height, por lo que las coordenadas son coordenadas de píxeles y el círculo está ligado a ese tamaño. El segundo añade un viewBox, de modo que el dibujo escala para llenar un cuadro mucho más grande mientras el código permanece idéntico:

<!-- No viewBox: coordinates are pixels, fixed 100×100 drawing -->
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="#1c87c9" />
</svg>

<!-- viewBox: same coordinates, but the 0 0 100 100 grid is
     stretched to fill a 300×300 box on the page -->
<svg width="300" height="300" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="#1c87c9" />
</svg>

Dado que el segundo SVG separa el sistema de coordenadas (viewBox) del tamaño renderizado (width/height), es posible redimensionarlo —incluso con CSS— y todas las formas escalan proporcionalmente. Por eso viewBox es esencial para iconos e ilustraciones responsivos.

Formas SVG

Los dibujos SVG se construyen a partir de un pequeño conjunto de elementos de formas básicas colocados dentro de <svg>. Cada uno usa sus propios atributos de coordenadas y dimensiones:

<rect> — un rectángulo, posicionado con x/y y dimensionado con width/height; rx/ry redondean las esquinas. Ver Rectángulo SVG.
<circle> — un círculo definido por su centro cx/cy y radio r. Ver Círculo SVG.
<ellipse> — como un círculo pero con dos radios, rx y ry. Ver Elipse SVG.
<line> — una línea recta desde (x1,y1) hasta (x2,y2). Ver Línea SVG.
<polygon> — una forma cerrada definida por una lista de points. Ver Polígono SVG.
<path> — la forma más poderosa; su atributo d codifica líneas, curvas y arcos para dibujar casi cualquier cosa. Ver Path SVG.

La mayoría de las formas comparten los atributos de presentación fill (color interior), stroke (color del contorno) y stroke-width (grosor del contorno). Para la lista completa de elementos y atributos, consulta la Referencia SVG.

Accesibilidad

El SVG en línea es parte del DOM de la página, por lo que los lectores de pantalla pueden leerlo, pero solo si se le proporciona texto accesible. Una forma de aspecto decorativo sin etiqueta se anuncia como algo poco útil.

Para SVG con significado (iconos, gráficos, logotipos), haz lo siguiente:

Añade un elemento <title> como primer hijo: actúa como nombre accesible (y se muestra como tooltip).
Opcionalmente, añade un elemento <desc> para una descripción más detallada.
Coloca role="img" en el <svg> para que la tecnología de asistencia lo trate como una sola imagen.
Referencia el texto con aria-labelledby, o usa aria-label directamente.

<svg width="120" height="120" viewBox="0 0 120 120"
     role="img" aria-labelledby="logoTitle logoDesc">
  <title id="logoTitle">W3Docs logo</title>
  <desc id="logoDesc">A blue circle with a light gray center.</desc>
  <circle cx="60" cy="60" r="50" fill="#1c87c9" />
  <circle cx="60" cy="60" r="25" fill="lightgray" />
</svg>

Si un SVG es puramente decorativo y no agrega información, ocúltalo de la tecnología de asistencia con aria-hidden="true".

Diferencias entre SVG y Canvas

A primera vista, tanto SVG como Canvas hacen lo mismo: dibujar ilustraciones vectoriales usando puntos de coordenadas. Sin embargo, existen diferencias entre ellos. Veámoslas.

SVG es un lenguaje para describir gráficos 2D en XML, mientras que Canvas se usa para dibujar gráficos 2D al vuelo (con JavaScript).

SVG es como un programa de "dibujo". El dibujo contiene instrucciones para cada forma, y cualquier parte de cualquier forma puede modificarse. Los dibujos están orientados a formas.

Canvas es como un programa de "pintura". Cuando los píxeles llegan a la pantalla, eso es tu dibujo. Solo puedes cambiar formas sobrescribiéndolas con otros píxeles. Las pinturas están orientadas a píxeles.

SVG se basa en XML, lo que significa que cada elemento está disponible dentro del DOM de SVG. En SVG, la forma dibujada se recuerda como un objeto. En Canvas, el navegador olvida la forma dibujada inmediatamente después de haberla renderizado. Si necesitas hacer cambios en el dibujo, debes redibujarlo desde cero.

Atributos

Atributo	Valor	Descripción
height	longitud, porcentaje	Define la altura del elemento SVG en la página.
width	longitud, porcentaje	Define el ancho del elemento SVG en la página.
viewBox	min-x min-y width height	Define la posición y el tamaño del sistema de coordenadas interno (el viewport SVG).
preserveAspectRatio	alineación + meetOrSlice (ver más abajo)	Controla cómo se escala y alinea el `viewBox` cuando su relación de aspecto difiere del cuadro SVG.
x	longitud, porcentaje	Establece la coordenada x de un contenedor SVG anidado. No tiene efecto en el `<svg>` más externo.
y	longitud, porcentaje	Establece la coordenada y de un contenedor SVG anidado. No tiene efecto en el `<svg>` más externo.

Valores de preserveAspectRatio

Cuando la relación de aspecto del viewBox no coincide con el cuadro SVG, preserveAspectRatio decide cómo ajustarlo. Toma un valor de alineación seguido opcionalmente de un valor de meetOrSlice:

Alineación (a qué borde/centro anclar):

none — estirar para llenar, ignorando la relación de aspecto.
xMinYMin, xMidYMin, xMaxYMin
xMinYMid, xMidYMid (predeterminado), xMaxYMid
xMinYMax, xMidYMax, xMaxYMax

Meet o slice (cómo escalar):

meet (predeterminado) — escalar hasta que todo el viewBox quepa dentro del cuadro.
slice — escalar hasta que el viewBox cubra todo el cuadro, recortando el desbordamiento.

Atributos eliminados

Los atributos version, baseProfile, contentScriptType y contentStyleType se usaban en SVG 1.1, pero están deprecados/eliminados en SVG 2 y ya no son necesarios. SVG 2 es la revisión actual de la especificación SVG, más estrechamente integrada con HTML y CSS; los navegadores modernos renderizan SVG sin estos atributos.

Práctica

¿Cuáles de las siguientes afirmaciones sobre la etiqueta SVG son correctas? (Selecciona todas las que correspondan)

La etiqueta SVG es un contenedor para gráficos vectoriales en HTML.Los gráficos SVG NO pierden calidad al hacer zoom o redimensionarlos.Los gráficos SVG están basados en píxeles, como PNG o JPEG.El atributo viewBox define el sistema de coordenadas interno del SVG.El atributo xmlns es obligatorio para SVG en línea dentro de un documento HTML.

Sintaxis de <svg>

Ejemplo de la etiqueta HTML <svg>:

Ejemplo de la etiqueta HTML <svg> dibujando una elipse: