Guía Completa del Formato SVG: Estructura, Elementos, Animación y Conversión

¿Qué es SVG?

SVG (Scalable Vector Graphics, Gráficos Vectoriales Escalables) es un formato de imagen vectorial basado en XML desarrollado por el W3C y estandarizado como SVG 1.1 (2003). A diferencia de los formatos rasterizados (PNG, JPEG, WebP) que almacenan cuadrículas de píxeles, SVG almacena descripciones geométricas de formas — coordenadas, curvas, colores, transformaciones — que pueden renderizarse a cualquier resolución sin pérdida de calidad.

Un archivo SVG es texto XML plano que puede:

Abrirse y editarse en cualquier editor de texto
Incrustarse directamente en HTML (SVG en línea)
Referenciarse como etiqueta <img>, background-image CSS u <object>
Estilizarse con CSS, scriptearse con JavaScript y animarse con CSS o SMIL
Indexarse por motores de búsqueda (el texto SVG es texto legible)
Imprimirse a cualquier escala sin pixelación

SVG se usa para iconos, logotipos, ilustraciones, visualizaciones de datos (D3.js), elementos de UI, mapas y diagramas.

Estructura del Documento SVG

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
     width="200" height="200"
     viewBox="0 0 200 200"
     role="img"
     aria-label="Círculo azul con borde rojo">

  <title>Círculo Azul</title>

  <circle cx="100" cy="100" r="80"
          fill="#3B82F6" stroke="#EF4444" stroke-width="3"/>

</svg>

El viewBox

El viewBox define el espacio de coordenadas interno del SVG, desacoplándolo del tamaño renderizado:

<svg width="400" height="400" viewBox="0 0 100 100">
  <!-- la coordenada (50,50) es el centro independientemente del tamaño renderizado -->
  <circle cx="50" cy="50" r="40" fill="blue"/>
</svg>

Esto hace que SVG sea verdaderamente "escalable" — el mismo archivo se renderiza perfectamente a 16×16 (favicon) o 4096×4096.

Elementos de Forma Básicos

<!-- Rectángulo con esquinas redondeadas -->
<rect x="10" y="10" width="80" height="60" rx="5" ry="5"/>

<!-- Círculo -->
<circle cx="50" cy="50" r="30"/>

<!-- Elipse -->
<ellipse cx="50" cy="50" rx="40" ry="25"/>

<!-- Línea -->
<line x1="0" y1="0" x2="100" y2="100" stroke="black" stroke-width="2"/>

<!-- Polígono (ruta cerrada) -->
<polygon points="50,10 90,90 10,90" fill="yellow" stroke="orange"/>

El Elemento Path

El elemento <path> usa un mini-lenguaje de comandos de ruta:

<path d="M 10,10 L 90,10 L 90,90 L 10,90 Z"/>
<!-- M=Mover a, L=Línea a, Z=Cerrar ruta — dibuja un cuadrado -->

<path d="M 10,50 C 10,10 90,10 90,50"/>
<!-- C=Curva Bezier cúbica — dibuja un arco -->

Comando	Descripción	Parámetros
`M x,y`	Mover a	Punto de destino
`L x,y`	Línea a	Punto de destino
`H x`	Línea horizontal	Solo coordenada X
`V y`	Línea vertical	Solo coordenada Y
`C x1,y1 x2,y2 x,y`	Bezier cúbica	Dos puntos de control + punto final
`Q x1,y1 x,y`	Bezier cuadrática	Un punto de control + punto final
`A rx,ry rot large sweep x,y`	Arco	Parámetros de arco elíptico
`Z`	Cerrar ruta	Ninguno

Mayúsculas = coordenadas absolutas. Minúsculas = relativas (desde el punto actual).

Texto en SVG

<text x="50" y="50" font-family="Arial" font-size="16" fill="#333"
      text-anchor="middle" dominant-baseline="middle">
  ¡Hola, SVG!
</text>

<!-- Texto en múltiples líneas con tspan -->
<text x="10" y="30" font-size="14">
  <tspan x="10" dy="0">Primera línea</tspan>
  <tspan x="10" dy="20">Segunda línea</tspan>
  <tspan x="10" dy="20" font-weight="bold">Tercera línea en negrita</tspan>
</text>

El texto SVG es texto real — buscable, seleccionable, accesible e indexable por motores de búsqueda.

Gradientes, Filtros y Rutas de Recorte

Gradientes

<defs>
  <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" style="stop-color:#3B82F6"/>
    <stop offset="100%" style="stop-color:#8B5CF6"/>
  </linearGradient>
</defs>
<rect width="200" height="100" fill="url(#grad1)"/>

Filtros

<defs>
  <filter id="sombra">
    <feDropShadow dx="4" dy="4" stdDeviation="4" flood-color="#00000055"/>
  </filter>
  <filter id="desenfoque">
    <feGaussianBlur stdDeviation="4"/>
  </filter>
</defs>
<rect x="10" y="10" width="80" height="80" fill="orange" filter="url(#sombra)"/>

Animación SVG

Animación CSS

<style>
  .girar { animation: rotar 2s linear infinite; transform-origin: center; }
  @keyframes rotar { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
</style>
<circle cx="50" cy="50" r="30" fill="blue" class="girar"/>

Animación SMIL (nativa de SVG)

<circle cx="50" cy="50" r="30" fill="blue">
  <animate attributeName="cx" from="50" to="150" dur="2s" repeatCount="indefinite"/>
  <animate attributeName="fill" values="blue;red;blue" dur="3s" repeatCount="indefinite"/>
</circle>

Optimización SVG

Los archivos SVG de herramientas de diseño (Figma, Illustrator) contienen metadatos innecesarios. SVGO es la herramienta de optimización estándar:

# Instalar
npm install -g svgo

# Optimizar (configuración predeterminada)
svgo entrada.svg -o salida.svg

# Optimizar todos los SVG en un directorio
svgo -r -f ./iconos/

Reducciones típicas de SVGO: 20–80% del tamaño del archivo.

Conversión de SVG

SVG a PNG/JPEG (Rasterización)

# Inkscape (mejor calidad)
inkscape --export-type=png --export-width=512 entrada.svg -o salida.png

# ImageMagick
magick -background none -resize 512x512 entrada.svg salida.png

# rsvg-convert (librsvg, rápido)
rsvg-convert -w 512 -h 512 entrada.svg -o salida.png

SVG a PDF

# Inkscape
inkscape --export-type=pdf entrada.svg -o salida.pdf

# Cairo (rsvg-convert)
rsvg-convert -f pdf entrada.svg -o salida.pdf

SVG a ICO (favicon)

magick -background none entrada.svg -resize 16x16 16.png
magick -background none entrada.svg -resize 32x32 32.png
magick -background none entrada.svg -resize 48x48 48.png
magick 16.png 32.png 48.png favicon.ico

SVG vs Canvas vs WebGL

Característica	SVG	Canvas (2D)	WebGL
Tipo	Modo retenido (DOM)	Modo inmediato	GPU acelerado inmediato
Escalabilidad	Infinita (vector)	Raster (resolución fija)	Raster (búfer fijo)
Interacción con DOM	Sí	No	No
Accesibilidad	Sí (ARIA, texto legible)	No	No
Indexación SEO	Sí	No	No
Mejor para	Iconos, ilustraciones, gráficos	Juegos, procesamiento de imágenes	3D, efectos complejos
Rendimiento (+10k elementos)	Lento (overhead DOM)	Rápido	Muy rápido

SVG es la elección correcta cuando los elementos necesitan ser interactivos, accesibles o buscables, y cuando el número de elementos se mantiene manejable. Para el renderizado de miles de elementos con necesidades de rendimiento, Canvas es superior.

Formato SVG: Guía Completa de Gráficos Vectoriales Escalables