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

¿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 -->

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

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.

Conversiones relacionadas

Lo más habitual al trabajar con imágenes son estas direcciones de conversión:

• JPG a WEBP
• PNG a JPG
• HEIC a JPG
• PNG a WEBP
• TIFF a PNG
• RAW a JPG