{ freetool24 }
Image Tools

Guía de SVG para Desarrolladores: Gráficos Escalables que Funcionan en Todas Partes

Aprende cómo funciona SVG, cómo optimizar archivos SVG para la web, patrones de uso inline vs externo, y cómo animar y manipular SVGs con CSS y JavaScript.

7 min de lectura

Ilustraciones vectoriales coloridas en una pantalla

SVG (Scalable Vector Graphics) es el único formato de imagen que los navegadores entienden de forma nativa como XML estructurado, estilizable y scriptable. Un logotipo en SVG se renderiza con nitidez en un monitor 1×, una pantalla 4K y una valla publicitaria impresa — todo desde el mismo archivo. Comprender SVG te convierte en un desarrollador frontend más competente.

Qué hace diferente a SVG

Los formatos de imagen rasterizada (JPEG, PNG, WebP) almacenan las imágenes como una cuadrícula de píxeles. Al ampliarlas, se produce desenfoque. SVG almacena las imágenes como descripciones matemáticas de formas:

<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" fill="#3b82f6" />
  <text x="50" y="55" text-anchor="middle" fill="white" font-size="14">Hello</text>
</svg>

Esto renderiza un círculo azul con el texto "Hello" — a cualquier tamaño, perfectamente nítido.

Cuándo usar SVG:

  • Logotipos e iconos (deben mantenerse nítidos a cualquier tamaño)
  • Ilustraciones y diagramas
  • Gráficas y visualizaciones de datos (D3.js genera SVG)
  • Animaciones y gráficos interactivos
  • Iconos de interfaz (mucho mejor que las fuentes de iconos)

Cuándo NO usar SVG:

  • Fotografías e imágenes fotorrealistas complejas (usar JPEG/WebP)
  • Capturas de pantalla (usar PNG)
  • Cuando el SVG tiene miles de nodos (se vuelve más lento que Canvas)

Elementos básicos de SVG

Formas

<!-- Rectángulo -->
<rect x="10" y="10" width="80" height="60" rx="8" fill="#e2e8f0" stroke="#94a3b8" stroke-width="2"/>

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

<!-- Elipse -->
<ellipse cx="50" cy="50" rx="40" ry="20" fill="#10b981"/>

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

<!-- Polígono -->
<polygon points="50,10 90,90 10,90" fill="#f59e0b"/>

<!-- Polilínea (forma abierta) -->
<polyline points="10,80 30,20 50,60 70,30 90,70" fill="none" stroke="#ef4444" stroke-width="3"/>

Trazados — la forma universal

El elemento <path> puede describir cualquier forma utilizando un minilenguaje de comandos de movimiento, línea, curva y arco:

<path d="M 10 80 Q 50 10 90 80" fill="none" stroke="#8b5cf6" stroke-width="3"/>

Comandos de trazado:

  • M x,y — Mover a (levantar pluma)
  • L x,y — Línea a
  • H x — Línea horizontal
  • V y — Línea vertical
  • Q cx,cy x,y — Curva de Bezier cuadrática
  • C cx1,cy1 cx2,cy2 x,y — Curva de Bezier cúbica
  • A rx,ry rot large-arc sweep x,y — Arco
  • Z — Cerrar trazado

Raramente se escriben trazados a mano — las herramientas de diseño los exportan. Pero saber leerlos ayuda en la depuración y optimización.

El viewBox: SVGs responsive

El atributo viewBox es la clave para crear SVGs responsive:

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Contenido dibujado en un espacio de coordenadas de 200×100 -->
</svg>

Sin width/height en el elemento, el SVG rellena su contenedor como una imagen responsive. Establece width: 100% en CSS y escala perfectamente.

.logo svg {
  width: 100%;
  height: auto;
}

Tres formas de usar SVG en la web

1. Archivo externo (<img>)

<img src="logo.svg" alt="Logotipo de empresa" width="200" height="80">

✅ Simple, se guarda en caché, funciona en todas partes
❌ No se puede estilizar con CSS, no es scriptable

2. Fondo CSS

.icon {
  background-image: url('icon.svg');
  background-size: contain;
  width: 24px;
  height: 24px;
}

✅ Adecuado para iconos decorativos
❌ Sin control CSS de los internos del SVG, sin accesibilidad

3. SVG inline (el más potente)

<button>
  <svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true">
    <path d="M5 4l7 6-7 6" fill="none" stroke="currentColor" stroke-width="2"/>
  </svg>
  Siguiente
</button>

✅ Control CSS completo, scriptable, usa currentColor para heredar el color del texto
❌ No se guarda en caché, aumenta el tamaño del HTML

Para iconos en componentes de interfaz, SVG inline es la mejor opción. Las hojas de sprites (un único <svg> con elementos <symbol> y referencias <use>) ofrecen almacenamiento en caché con posibilidad de estilización.

Estilizar SVG con CSS

Los SVGs inline responden a CSS como cualquier elemento HTML:

.icon {
  width: 24px;
  height: 24px;
  color: #3b82f6; /* controla currentColor */
}

.icon:hover {
  color: #1d4ed8;
}

En el SVG, usa currentColor en lugar de colores codificados:

<path fill="currentColor" d="..."/>
<path stroke="currentColor" d="..."/>

Así, el color del icono se controla completamente desde CSS — el modo oscuro, los estados hover y la tematización funcionan sin más configuración.

Animaciones CSS en SVG

@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner {
  animation: spin 1s linear infinite;
  transform-origin: center;
}

<svg viewBox="0 0 24 24">
  <circle class="spinner" cx="12" cy="12" r="10"
    fill="none" stroke="#3b82f6" stroke-width="2"
    stroke-dasharray="31.4" stroke-dashoffset="10"/>
</svg>

stroke-dasharray y stroke-dashoffset son las propiedades de animación más potentes de SVG — permiten animaciones de dibujo donde los trazados parecen dibujarse solos.

Optimizar archivos SVG

Las herramientas de diseño exportan SVGs con metadatos innecesarios, comentarios e IDs del editor. Un SVG exportado típico puede pesar 15 KB; optimizado, podría quedarse en 3 KB.

Qué eliminar:

  • La declaración <?xml version="1.0"?> (no es necesaria inline)
  • xmlns:xlink, xmlns:dc, espacios de nombres de metadatos de Adobe/Inkscape
  • Atributos id usados únicamente por el editor
  • Comentarios y espacios en blanco
  • Elementos de grupo redundantes <g>
  • Valores de atributo por defecto (fill="black", opacity="1")

Herramientas como SVGO automatizan este proceso. Cuando necesites una versión rasterizada para plataformas que no admiten SVG, conviértelo a PNG con nuestro conversor de SVG a PNG.

Accesibilidad

Los SVGs utilizados como contenido significativo necesitan descripciones accesibles:

<svg role="img" aria-labelledby="title desc">
  <title id="title">Gráfico de ingresos</title>
  <desc id="desc">Gráfico de barras que muestra los ingresos mensuales creciendo de $10k en enero a $45k en junio de 2026</desc>
  <!-- contenido del gráfico -->
</svg>

Los SVGs decorativos (iconos junto a botones con etiqueta) deben ocultarse a los lectores de pantalla:

<svg aria-hidden="true" focusable="false">...</svg>

Referencia rápida: atributos útiles de SVG

Atributo Qué hace
viewBox="x y w h" Define el sistema de coordenadas
fill Color de relleno de la forma (none, hex, currentColor)
stroke Color del contorno
stroke-width Grosor del contorno
stroke-linecap Estilo del extremo de línea: butt, round, square
stroke-linejoin Estilo de esquina: miter, round, bevel
opacity Transparencia del elemento (0–1)
transform translate(), rotate(), scale(), skew()
clip-path Recorta el contenido a una forma
filter Aplica filtros SVG (desenfoque, sombra, etc.)

SVG es una de las herramientas más infrautilizadas de la web. Una vez que comprendes el sistema de coordenadas y el modelo de estilización, puedes crear iconos, ilustraciones, gráficas y animaciones que se ven perfectos a cualquier tamaño y responden dinámicamente a la interacción del usuario.

Volver a todos los artículosVer herramientas