Optimización y conversión de SVG: cuándo usar SVG, PNG o JPG
SVG es un formato vectorial basado en texto que escala sin pixelarse, pero los SVG exportados directamente desde herramientas de diseño suelen venir hinchados con metadatos inútiles, atributos específicos del editor y estilos en línea. Limpiarlos, quitarles su superficie de ataque oculta y saber cuándo un PNG es la mejor opción son las tres habilidades que hacen que los SVG rindan bien en la web.
SVG se gana su sitio para logos, iconos, ilustraciones y cualquier marca que deba mantenerse nítida a cualquier tamaño. El flujo es siempre el mismo: exportar desde la herramienta, pasar por SVGO, sanitizar antes de incrustar en HTML y rasterizar a PNG solo cuando choques con un límite del navegador o de la cadena de herramientas. Un SVG limpio y optimizado es a la vez más pequeño y más seguro que el archivo que te entrega la herramienta de diseño.
Qué hace que SVG sea distinto de PNG y JPEG
SVG (Scalable Vector Graphics) almacena la obra como XML: un árbol de primitivas geométricas como `<path>`, `<circle>` y `<polygon>` con atributos de relleno y trazo. Como la geometría es independiente de la resolución, un SVG escala desde un favicon de 16 píxeles hasta una valla publicitaria sin que un solo píxel se emborrone.
PNG y JPEG guardan una cuadrícula fija de muestras de color. Ampliarlos obliga al renderizador a interpolar entre muestras, por eso los logos e iconos en PNG se ven borrosos en pantallas retina a 2× o más salvo que se proporcione una versión 2×. SVG evita el problema por completo.
La contrapartida de SVG es la complejidad. Una fotografía codificada como SVG con miles de rutas rellenas de degradados es mucho más grande y lenta de renderizar que un JPEG de la misma imagen. SVG es la herramienta correcta cuando la geometría es simple; raster lo es cuando la imagen es fotográficamente compleja.
Por qué los SVG exportados pesan más de lo necesario
Herramientas como Figma, Illustrator o Inkscape exportan SVG correctos pero poco magros. El archivo exportado suele incluir: declaración XML, preámbulo `<!DOCTYPE>`, namespaces propios del editor (`xmlns:dc`, `xmlns:cc`, `xmlns:rdf`), nombres de capa como `<title>` y `<desc>`, reglas de estilo en línea duplicadas del cascade, coordenadas con seis decimales cuando bastan dos y grupos que contienen un único hijo.
Nada de esto afecta al aspecto, pero infla el archivo. Un logo exportado desde Illustrator con 24 KB se queda con frecuencia en 4–6 KB tras la optimización, sin cambios visibles, y ese ahorro cuenta cuando el logo se carga en cada página.
Un pipeline práctico de optimización de SVG
- Exporta una base limpia desde la herramienta de diseño
En Figma usa 'Copy as SVG' o exporta con 'Include id attributes' apagado. En Illustrator usa 'SVG Tiny' o la opción de exportación 'Minify'. Reducir ruido en la exportación facilita el trabajo del optimizador.
- Ejecuta SVGO
SVGO (SVG Optimizer) es la herramienta estándar. `npx svgo --multipass input.svg -o output.svg` aplica varias pasadas para eliminar metadatos, colapsar grupos, convertir formas en rutas y unificar estilos redundantes. La bandera `--multipass` compensa el tiempo extra.
- Revisa el resultado a ojo
Abre el archivo optimizado en el navegador y compáralo con el original. El preset por defecto de SVGO es conservador, pero ajustes agresivos como `convertShapeToPath` pueden redondear esquinas o alterar el aspecto de obras complejas. Conserva el original hasta haber verificado la salida.
- Sirve con gzip o Brotli
SVG es XML, y el XML comprime extremadamente bien. Un SVG ya optimizado de 5 KB suele transferirse en 1,5 KB por Brotli. Configura `Content-Type: image/svg+xml` y asegúrate de que las reglas de compresión del servidor incluyen `.svg`.
SVG frente a PNG y JPEG
| Propiedad | SVG | PNG | JPEG |
|---|---|---|---|
| Escalabilidad | Infinita, sin pérdida | Resolución fija | Resolución fija |
| Transparencia | Sí (nativa) | Sí (canal alfa) | No |
| Mejor contenido | Iconos, logos, diagramas | Capturas, gráficos con transparencia | Fotografías |
| Tamaño en fotos | Enorme (impracticable) | Grande | Pequeño |
| Editable como código | Sí | No | No |
| Soporte de animación | Sí (CSS/SMIL) | Solo APNG | No |
| Soporte de navegador | Todos los modernos | Universal | Universal |
Cuándo rasterizar SVG a PNG
Hay contextos que no aceptan SVG: clientes de correo (la mayoría los eliminan o los renderizan mal), imágenes Open Graph (las redes sociales exigen PNG o JPEG), toolchains de favicon anteriores al soporte SVG y apps móviles nativas que importan activos como bitmaps.
Al rasterizar, elige la resolución de forma deliberada. Un logo que aparece a 200 px de ancho en la página necesita al menos 400 px para pantallas retina 2×. Si además aparece a 600 px en otro sitio, renderiza a 1200 px y deja que el navegador reduzca: reducir PNG queda visualmente limpio. `magick -background none input.svg -resize 800x png:output.png` de ImageMagick preserva la transparencia y renderiza a 800 px de ancho.
Para rasterizar directamente en el navegador, PixMovo acepta una subida SVG y exporta un PNG a la resolución elegida, útil para conversiones puntuales sin instalar ImageMagick.
Ajustes útiles de plugins de SVGO
- `removeViewBox: false`: mantén el atributo viewBox o el SVG no escalará correctamente en todos los navegadores.
- `cleanupIds: true`: renombra IDs verbosos a cortos; cuidado si tienes JavaScript que los referencia por nombre.
- `mergePaths: true`: combina rutas adyacentes en una, reduciendo tanto peso como nodos DOM.
- `convertColors: { shorthex: true }`: convierte hex de seis dígitos a tres cuando es posible.
- `removeUnknownsAndDefaults: true`: elimina atributos cuyo valor coincide con el valor por defecto del spec, p. ej. `fill-opacity='1'`.
SVG en línea frente a `<img src>`: cuál usar
SVG en línea —pegar el marcado directamente en el HTML— da acceso completo de CSS y JavaScript al interior del SVG. Puedes cambiar el relleno al hover, animar rutas concretas o localizar IDs con querySelector. A cambio, el navegador no puede cachear el SVG por separado y el marcado infla el documento HTML.
Usar `<img>` o `background-image` en CSS permite al navegador cachear el archivo de forma independiente y mantiene el HTML limpio. En este modo, JavaScript y CSS externo no pueden alcanzar el interior del SVG. Para iconos cuyo color deba responder al tema, el SVG en línea o un SVG en un `<use>` que referencia a un sprite es el enfoque correcto.
Preguntas frecuentes
- ¿Qué herramienta es mejor para optimizar SVG?
- SVGO es el estándar. Ejecuta `npx svgo --multipass input.svg -o output.svg` para la mayoría de los archivos. La bandera multipass aplica varias rondas y suele dar la salida más pequeña.
- ¿Es seguro usar SVG subidos por usuarios en una web?
- No sin sanitizar. Los SVG pueden contener scripts, manejadores de eventos y referencias externas que provocan vulnerabilidades XSS. Pasa siempre los SVG subidos por DOMPurify o un sanitizador en servidor antes de incrustarlos o de guardarlos para otros usuarios.
- ¿Cuándo debo convertir un SVG a PNG?
- Cuando el contexto de destino no acepte SVG: clientes de correo, imágenes Open Graph, muchos pipelines nativos móviles y cualquier sitio que exija un bitmap a una resolución concreta. Rasteriza a 2× el tamaño de display para que quede nítido en pantallas retina.
- ¿Por qué mi SVG se ve borroso después de optimizar con SVGO?
- Los ajustes agresivos de fusión de rutas o conversión de formas pueden haber alterado la geometría. Comprueba si `mergePaths`, `convertShapeToPath` o `roundingPrecision` causaron el cambio y añádelos a la lista de plugins deshabilitados en tu configuración de SVGO.
- ¿Puedo animar un SVG?
- Sí. Las animaciones CSS sobre elementos SVG funcionan en todos los navegadores modernos. SMIL está soportado pero desaconsejado en algunos motores; CSS es la opción segura a largo plazo. JavaScript también puede manipular elementos SVG del DOM para animaciones interactivas.