Formato SVG: La Guía Técnica Completa
Qué es SVG
SVG (Scalable Vector Graphics) es un formato de imagen vectorial basado en XML estandarizado por el W3C en 2001. A diferencia de imágenes raster (JPG, PNG, WebP) que almacenan píxeles individuales, SVG describe gráficos matemáticamente — puntos, líneas, curvas, formas — permitiendo escalar infinitamente sin pérdida de calidad.
Ventajas fundamentales
- Escala infinita sin pérdida: misma calidad en 16×16 o 4096×4096 píxeles
- Tamaño de archivo pequeño: gráficos simples ocupan KBs (no MBs)
- Editable como código: SVG es texto XML — puede editarse en cualquier editor
- Animable con CSS/JavaScript: SVG soporta animaciones nativas
- Accesibilidad: estructura semántica permite lectores de pantalla
- Buscable: texto en SVG es indexado por Google
- Estilizable con CSS: cambia colores, trazos, opacidad vía CSS
Cuándo usar SVG
- Logos: vectorial garantiza calidad en cualquier tamaño/dispositivo
- Iconos: sustituyó fuentes de iconos (Font Awesome → iconos SVG)
- Ilustraciones simples: gráficos con líneas, formas, texto
- Diagramas: flujogramas, mapas, gráficos
- Interfaces web modernas: estándar para UI moderna
- Impresión: vectorial garantiza calidad en cualquier DPI
Cuándo NO usar SVG
- Fotografías: SVG no es eficiente para contenido fotográfico (usa JPG/WebP/AVIF)
- Imágenes con gradientes complejos: archivos SVG quedan grandes
- Plataformas legacy: algunos sistemas antiguos no soportan (usa PNG fallback)
- Email: clientes de email tienen soporte limitado a SVG (usa PNG)
Estructura básica
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="red" />
<text x="50" y="55" text-anchor="middle">Hola</text>
</svg>
Este SVG produce un círculo rojo con texto "Hola". El viewBox define el sistema de coordenadas — escala automáticamente.
Optimización
SVGs exportados de Illustrator/Figma frecuentemente tienen metadatos innecesarios. Herramientas como SVGO (SVG Optimizer) reducen tamaño 30-70% sin pérdida visual:
svgo input.svg -o output.svg
SVG vs raster
| Aspecto | SVG | Raster (PNG/JPG) |
|---|---|---|
| Escala | Infinita | Píxeles fijos |
| Tamaño (logos) | Pequeño (KB) | Medio (KB-MB) |
| Tamaño (fotos) | Enorme si complejo | Optimizado |
| Edición | Como código | Editor de imagen |
| Animación | Nativo | Limitado (GIF/WebP) |
| Accesibilidad | Excelente | Limitada (alt text) |
Conversión
KaijuConverter convierte SVG a PNG/JPG cuando necesitas raster (compatibilidad legacy, email, redes sociales). Inverso (PNG → SVG) es más difícil — funciona para gráficos simples pero falla en fotografías.
Conclusión
SVG es el estándar moderno para logos, iconos e ilustraciones en 2026. Usa SVG siempre que el contenido sea vectorial (gráficos con líneas/formas). Usa raster (JPG/WebP/AVIF) para fotografías. En algunos casos, usa cascada <picture> con SVG primario + PNG fallback para máxima compatibilidad.
Conversiones relacionadas
Lo más habitual al trabajar con imágenes son estas direcciones de conversión: