SVG: cuándo usarlo y cuándo convertirlo a PNG

La diferencia real entre SVG y PNG no es de calidad, es de naturaleza: un SVG describe una imagen con fórmulas matemáticas (vector), mientras que un PNG la guarda como una cuadrícula fija de píxeles (raster). De ahí se derivan todas las decisiones prácticas: cuándo un SVG se ve perfecto a cualquier tamaño y cuándo un PNG es, sencillamente, la opción más razonable. Puedes convertir SVG a PNG, JPG o WebP —y al revés— con la herramienta de Docuboxer, en el navegador y sin subir el archivo a ningún servidor.

Qué es en realidad un SVG

Un archivo SVG (Scalable Vector Graphics) es texto plano: XML que describe formas, curvas, colores y transformaciones. No hay píxeles guardados en ningún sitio; el navegador (o cualquier programa que lo abra) calcula la imagen sobre la marcha, a la resolución exacta que necesite. Por eso puedes abrir un SVG con un editor de texto y leer literalmente las coordenadas de sus trazos.

Esa naturaleza textual tiene dos consecuencias que conviene tener presentes desde el principio: es editable como código (puedes cambiar un color con una búsqueda y reemplazo) y es estilable con CSS y manipulable con JavaScript, algo que un PNG jamás podrá ofrecer.

Dónde gana el SVG sin discusión

Para gráficos vectoriales por naturaleza —dibujos hechos de formas geométricas, no de fotografías— el SVG no tiene rival serio:

• Logos e iconos: se ven nítidos desde un favicon de 16 px hasta un cartel a tamaño gigante, con el mismo archivo.
• Ilustraciones planas: dibujos de trazo simple, sin degradados fotorrealistas ni texturas, mantienen un peso mínimo.
• Diagramas y gráficos de datos: el texto dentro del SVG sigue siendo texto seleccionable e indexable, no una imagen del texto.
• Cualquier densidad de pantalla: un mismo SVG se ve igual de nítido en una pantalla estándar y en una retina de alta densidad, sin exportar variantes @1x, @2x y @3x.
• Estilizable con CSS: puedes cambiar el color de un icono en modo oscuro con una regla de CSS, sin tocar el archivo ni duplicarlo.

Dónde pierde el SVG

El vector deja de ser una ventaja en cuanto la imagen no es, por naturaleza, geométrica:

• Fotografías: no existe una forma razonable de describir una foto como formas vectoriales. Para eso están los formatos raster —y si buscas el más eficiente hoy, conviene comparar convertir entre PNG, JPG y WebP según el caso.
• Ilustraciones con miles de nodos: un dibujo muy detallado, con degradados complejos, texturas o filtros (desenfoques, sombras, máscaras), puede generar un SVG que pesa más que un PNG equivalente y que además consume más CPU al renderizarse, porque el navegador tiene que recalcular la geometría en cada repintado.
• Animaciones con muchos elementos: renderizar cientos de trazos vectoriales en movimiento es más caro para el navegador que reproducir un vídeo o un GIF con los mismos fotogramas ya calculados.

La regla práctica: si al abrir el SVG en un editor ves miles de líneas de coordenadas, probablemente estás forzando un formato que no encaja con el contenido.

El peso real de un SVG: minificación y basura del editor

Como es texto, un SVG se minifica y se comprime muy bien: quitar espacios, comentarios y decimales innecesarios puede reducir su tamaño de forma notable, igual que ocurre al minificar HTML, CSS o JavaScript. Pero también es habitual que un SVG exportado directamente desde Illustrator, Figma o Sketch arrastre metadatos del editor, capas ocultas, grupos vacíos e IDs generados automáticamente que no aportan nada visual y solo inflan el archivo. Antes de publicar un SVG en producción, vale la pena limpiarlo.

El punto de seguridad que no puedes ignorar

Un SVG puede contener <script> y atributos de eventos como onload, porque técnicamente es un documento con capacidad de ejecutar código, no una imagen inerte. Si tu sitio permite que usuarios suban SVG de terceros, necesitas sanearlos antes de servirlos, igual que sanearías cualquier HTML no confiable. El matiz importante: cuando el SVG se referencia con una etiqueta <img> o como fondo CSS, el navegador lo trata como una imagen y no ejecuta el script; el riesgo real aparece cuando el SVG se inserta en línea directamente en el DOM de la página.

Cuándo hay que rasterizar sí o sí

Hay destinos que simplemente no admiten SVG, y ahí no hay debate posible: toca convertir a PNG, JPG o WebP.

• Miniaturas de redes sociales: Open Graph y Twitter Cards no renderizan SVG; el og:image siempre debe ser un formato raster.
• Correo electrónico: la mayoría de clientes de correo bloquean o no soportan SVG.
• Favicons en algunos navegadores y sistemas: aunque el soporte de SVG como favicon ha mejorado, sigue siendo buena práctica ofrecer también versiones PNG en varios tamaños, algo que puedes generar con el generador de favicons.
• Cualquier flujo que espere una imagen final: editores de vídeo, presentaciones o sistemas de impresión que no procesan vectores.

Para esos casos, convierte el SVG con el tamaño de salida que necesites y, si el resultado pesa de más, pásalo por un compresor de imágenes antes de publicarlo.

El criterio, resumido

"Usa siempre SVG" es un mal consejo porque ignora la mitad del problema. El criterio correcto combina dos preguntas: ¿la imagen es, por naturaleza, vectorial (formas, no fotos)? y ¿el destino donde se va a mostrar admite SVG? Si ambas respuestas son sí, el SVG gana casi siempre. Si alguna es no, rasteriza sin remordimientos.

Preguntas frecuentes

Herramientas relacionadas

• Convertir SVG — SVG ↔ PNG, JPG, WebP, sin subir el archivo.
• Convertir imágenes — Cambia entre PNG, JPG y WebP según el destino.
• Comprimir imágenes — Reduce el peso del PNG resultante antes de publicarlo.
• Generador de favicons — Genera todos los tamaños PNG que necesitas a partir de tu logo.

También te puede interesar: cómo convertir HEIC a JPG y qué es minificar código y por qué reduce tu web.