¿Qué es SVG?
SVG (Scalable Vector Graphics) es un formato de imagen basado en XML que describe gráficos mediante formas geométricas — líneas, curvas, polígonos, texto — en lugar de píxeles. Esto lo hace infinitamente escalable: un SVG se ve nítido a cualquier tamaño, desde un icono de 16×16 px hasta una valla publicitaria de 10 metros.
Es el estándar abierto del W3C para gráficos vectoriales en la web, soportado de forma nativa por todos los navegadores modernos desde 2011.
SVG vs imágenes rasterizadas (JPG, PNG)
| Característica | SVG | JPG / PNG |
|---|---|---|
| Tipo | Vectorial | Rasterizado (píxeles) |
| Escalabilidad | Infinita, siempre nítido | Se pixela al ampliar |
| Tamaño de archivo | Pequeño para gráficos simples | Proporcional a la resolución |
| Transparencia | Sí | Solo PNG |
| Animación | Sí (CSS/SMIL) | Solo GIF/WebP animado |
| Editable en texto | Sí (XML) | No |
| Fotografías | No adecuado | Ideal |
Cuándo usar SVG
✅ Ideal para SVG:
- Logos e identidad corporativa.
- Iconos de interfaz de usuario (UI).
- Ilustraciones y diagramas.
- Infografías y gráficos de datos.
- Animaciones de interfaz (CSS transitions).
- Elementos que deben verse bien en pantallas Retina / HiDPI.
❌ No usar SVG para:
- Fotografías y imágenes con muchos gradientes de color (usa JPG o WebP).
- Cuando la compatibilidad con email HTML es crítica (Outlook no renderiza SVG).
- Imágenes muy complejas con miles de elementos (puede ser más pesado que un PNG).
SVG en HTML: cómo usarlo
Como etiqueta <img> (más sencillo)
<img src="logo.svg" alt="Logo de la empresa" width="200" height="60">
Inline en el HTML (permite estilar con CSS)
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="#e53e3e"/>
</svg>
Como fondo CSS
.icon {
background-image: url('icono.svg');
background-size: contain;
}
Cómo editar un SVG
SVG es XML legible por humanos. Puedes editarlo con:
- Inkscape (gratis, multiplataforma) — editor vectorial de referencia.
- Adobe Illustrator — estándar en la industria.
- Figma — diseño UI online, exporta SVG limpio.
- SVGO — optimizador de SVG por línea de comandos que reduce el tamaño eliminando metadatos innecesarios.
- Cualquier editor de texto — directamente en el XML.
SVG y rendimiento web
Un SVG bien optimizado pesa solo 1-5 KB para logos e iconos simples. Algunos consejos:
- Usa SVGO para eliminar metadatos, comentarios y decimales innecesarios.
- Evita incrustar bitmaps dentro del SVG (aumenta el tamaño enormemente).
- Para sprite de iconos, combina todos los SVG en un único fichero
sprite.svgy referencialos con<use>.
Conversiones habituales
- SVG a PNG — para plataformas que no admiten SVG.
- SVG a JPG — para miniaturas o previews.
- PNG a SVG — vectorización automática (con limitaciones).
- AI a SVG — de Illustrator a formato web estándar.
Conversiones relacionadas
Lo más habitual al trabajar con imágenes son estas direcciones de conversión: