Qué es un archivo SVG y cuándo convertirlo a PNG

Un archivo SVG (Scalable Vector Graphics, gráficos vectoriales escalables) es una imagen vectorial guardada como texto XML: en lugar de píxeles contiene instrucciones del tipo “traza una curva de aquí a allá, rellena esta zona de este color, escribe este texto con esta fuente”. Como el navegador vuelve a dibujar esas instrucciones cada vez que muestra la imagen, se ve nítida a cualquier tamaño y un icono sencillo apenas ocupa unos kilobytes. La regla práctica: mantén en SVG los logotipos, iconos y gráficos, y conviértelos a PNG (o a JPG si no necesitas transparencia) cuando vayan a redes sociales, correo, documentos de oficina o plataformas que no aceptan vectores.

En esta guía verás dónde gana el vector, dónde se convierte en un estorbo, qué ajustes determinan el resultado al pasarlo a píxeles y por qué algunos archivos se rechazan directamente.

Cuando toca rasterizar, convertir SVG a PNG da un resultado sin pérdida que conserva la transparencia, convertir SVG a WebP produce un archivo más ligero y convertir SVG a JPG ofrece la máxima compatibilidad. Si buscas el archivo más pequeño posible, prueba convertir SVG a AVIF, y si después necesitas ajustar las dimensiones, usa redimensionar imagen. La conversión se hace en el servidor y el archivo no se guarda.

Qué es un archivo SVG y en qué se diferencia de una imagen de píxeles

Una imagen rasterizada, como un JPG o un PNG, es una cuadrícula de puntos de color. Si amplías un PNG de 400 píxeles a 1200, el navegador no tiene información adicional: inventa los puntos intermedios y el resultado se ve borroso. Ampliar un dibujo vectorial, en cambio, consiste en aplicar la misma descripción matemática a un lienzo mayor, así que no se pierde nada.

La segunda diferencia es que se puede editar como texto. Un SVG se abre en cualquier editor de texto y puedes cambiar a mano colores, grosores de línea o capas enteras. La versión más corta de un SVG insertado en una página se parece a esto: <svg viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="#2a9d8f"/></svg>. Esa línea dibuja un círculo verde, y basta con cambiar el valor de fill para cambiarle el color. Cuando una marca actualiza su paleta, eso convierte semanas de redibujar iconos en un simple buscar y reemplazar.

Cómo abrir un archivo SVG

El visor más fiable es el navegador: arrastra el archivo a una pestaña vacía y se mostrará. Para editarlo, usa un programa de dibujo vectorial o un editor de texto. Algunos visores de imágenes, suites de oficina y paneles corporativos no abren SVG o lo muestran incompleto; la mayoría de las veces que un archivo “parece roto”, el problema es del programa que lo abre, no del archivo.

De qué depende su peso

Un dibujo vectorial pesa según la cantidad de nodos que contiene, no según el tamaño con que se muestra. Un icono limpio puede quedarse por debajo de un kilobyte. Un dibujo generado por un programa de vectorizado automático, con decenas de miles de nodos, puede llegar a varios megabytes y exigir mucho trabajo al navegador. Lo que hay que vigilar es la complejidad, no las dimensiones.

Hay una prueba rápida: guarda el dibujo en vectorial y también en píxeles al tamaño en que lo vas a usar, y compara los dos archivos. Si el rasterizado pesa claramente menos, el dibujo es demasiado complejo para mantenerlo como vector.

Dónde el vector gana de verdad

• Logotipos y marcas. El mismo archivo sirve para la tarjeta de visita, el cartel y el favicon.
• Iconos de interfaz. Ya no hace falta exportar juegos distintos para pantallas de alta densidad.
• Gráficos y diagramas. El texto sigue siendo texto, así que los lectores de pantalla y los buscadores pueden leerlo.
• Imágenes con variantes de color. La versión para el modo oscuro es un atributo cambiado, no un archivo nuevo.

Las fotografías, las texturas naturales y las ilustraciones con miles de colores mezclados no tienen sentido como vector. Tampoco se ofrece la conversión automática de píxeles a vector, y es a propósito: el resultado o se aleja mucho del original o pesa más que la imagen que pretendía sustituir.

Animación e interactividad

Una ventaja menos conocida es que cada parte del dibujo se puede manipular por separado: resaltar una barra de un gráfico, marcar una región en un mapa o girar solo la flecha de un icono, sin archivos adicionales. Esa flexibilidad tiene un coste, porque un dibujo con muchas piezas en movimiento exige trabajo extra a los teléfonos menos potentes. Si notas tirones al desplazarte por la página, reduce la animación o rasteriza esa pieza. Ten en cuenta que al rasterizar, cualquier animación queda reducida a una imagen fija.

Cuándo conviene convertir un archivo SVG a PNG

Sobre el papel, el vector parece imbatible, pero en el día a día hay situaciones claras en las que toca pasarlo a píxeles.

• El destino no admite vectores. Las imágenes para compartir en redes, las plantillas de correo y muchos paneles de tiendas en línea solo aceptan imágenes rasterizadas.
• La imagen va dentro de un documento. Los programas de oficina y los flujos de impresión se comportan de forma mucho más predecible con un archivo de resolución fija.
• Depende de una fuente. Si el texto no se convirtió a contornos, se verá distinto en un equipo que no tenga esa tipografía. Rasterizar congela el aspecto.
• El dibujo es enorme. Pintar decenas de miles de nodos en cada visita cuesta más que servir una sola imagen ya rasterizada.

Si no se da ninguno de estos casos, quédate en vectorial. Rasterizar es un camino de ida: conserva siempre el archivo original, publiques lo que publiques.

Tabla comparativa: a qué formato convertir un SVG

Formato de destino	Transparencia	Calidad de salida	Cuándo elegirlo
PNG	Se conserva	Sin pérdida	Logotipos, iconos, gráficos de bordes nítidos
WebP	Se conserva	90	Archivo más ligero para la web
AVIF	Se conserva	60	El archivo más pequeño, navegadores modernos
JPG	Se rellena de blanco	90	Sin transparencia y con máxima compatibilidad
GIF	De un bit, bordes dentados	256 colores como máximo	Sistemas antiguos que exigen GIF
BMP	Se rellena de blanco	24 bits, sin comprimir	Programas antiguos que solo leen BMP

En la mayoría de los casos la elección está entre PNG y WebP: PNG si el archivo va a otra persona o a una plataforma externa, WebP si se publica en tu propia web. Las dos últimas filas, convertir SVG a GIF y convertir SVG a BMP, solo tienen sentido para software antiguo que no acepta otra cosa.

Ajustes al rasterizar: tamaño, densidad y fondo

Tres aspectos deciden lo que obtendrás al otro lado.

Tamaño de salida

El conversor dibuja el SVG a 144 DPI, y el tamaño en píxeles del resultado se deduce del ancho y el alto declarados dentro del propio archivo a esa densidad. Es decir, no escribes un tamaño de destino. Si algún lado del resultado superara los 4000 píxeles, la imagen se reduce a 4000 manteniendo la proporción. Si necesitas una medida exacta tienes dos caminos: cambiar los valores width y height en un editor de texto antes de convertir, o ajustar la imagen resultante con el redimensionador. Reducir después no causa problemas; ampliar después significa estirar píxeles y pierde nitidez, así que si necesitas una exportación grande, hazla grande dentro del SVG.

Qué pasa con el fondo transparente

Un dibujo con transparencia la conserva al pasar a PNG, WebP y AVIF. JPG y BMP no tienen canal alfa, así que el fondo se rellena de blanco; GIF solo admite transparencia de un bit, por lo que los bordes suaves pueden verse dentados. Por eso convertir a JPG un logotipo pensado para fondos oscuros es mala idea.

Fuentes e imágenes incrustadas

Si el texto del dibujo usa una tipografía que el servidor no tiene, las letras se dibujan con una fuente sustituta. La forma más segura de evitarlo es convertir el texto a contornos antes de exportar. Si el dibujo contiene una foto o una textura, esa imagen tiene que estar incrustada dentro del propio archivo; los SVG que enlazan a un archivo o una dirección externa se rechazan, por el motivo que verás a continuación.

Qué archivos SVG rechaza el conversor

Un SVG no es solo un dibujo: también es un documento XML y puede contener código ejecutable o referencias a otros recursos. Por seguridad, el conversor no procesa archivos que incluyan:

• Scripts. Bloques script y atributos de evento como onclick.
• Llamadas a recursos externos. Enlaces a una imagen, una fuente o una hoja de estilos de fuera del archivo.
• Definiciones de entidades XML. Declaraciones ENTITY al comienzo del documento.

La mayoría de los archivos exportados desde programas de diseño pasan estos controles sin problemas. Si alguno falla, arreglarlo suele ser rápido: vuelve a exportar con las imágenes incrustadas, convierte el texto a contornos y elimina scripts y declaraciones que no uses. SVG nunca aparece como formato de salida: las herramientas solo generan imágenes rasterizadas.

Consejos para publicar SVG en una web

Hay dos maneras de poner un dibujo en una página y se comportan de forma distinta. Enlazar el archivo como una imagen normal es lo más sencillo: el navegador lo guarda en caché y el código queda limpio, pero no puedes modificar el dibujo desde fuera. Insertarlo directamente en el código de la página permite controlar sus colores con las reglas de estilo, que es como una sola regla puede cambiar todos los iconos al pasar al modo oscuro. El precio es que, si usas el mismo icono en diez sitios, el código se repite diez veces y pierdes la ventaja de la caché.

En accesibilidad bastan dos costumbres. Añade un título breve a los dibujos que transmiten información, para que el lector de pantalla pueda anunciarlos, y oculta de forma explícita los puramente decorativos, para que no intente describir un gráfico vacío.

Una última advertencia: los archivos que exportan los programas de diseño suelen venir cargados de metadatos del editor, capas ocultas y una precisión decimal absurda. Limpiarlos antes de publicar a menudo reduce el archivo a la mitad; un icono sin limpiar puede pesar decenas de kilobytes cuando limpio pesaría unos pocos.

Preguntas frecuentes

¿Puedo convertir un PNG en SVG?

No como paso automático. Crear vectores a partir de píxeles significa inventar información que nunca existió, y el resultado es una imitación tosca o un archivo con miles de nodos que pesa más que el original. Lo correcto es volver al dibujo de origen o redibujar el logotipo.

¿Es seguro aceptar archivos SVG de terceros?

El formato puede llevar scripts y referencias externas, así que no conviene insertar en tu web dibujos de origen desconocido. Rasterizarlos elimina el riesgo, porque el resultado solo contiene píxeles; por esa misma razón el conversor rechaza los archivos con scripts o enlaces externos.

¿Qué formato uso para el favicon?

Los navegadores modernos aceptan favicons vectoriales, pero algunos clientes antiguos y los accesos directos del sistema operativo siguen esperando una imagen rasterizada. Lo práctico es ofrecer ambos: el SVG como fuente principal y copias en PNG de 32, 96 y 180 píxeles.

¿Por qué el PNG convertido es más pequeño de lo que esperaba?

El tamaño de salida depende del ancho y el alto declarados en el SVG. Si el programa de diseño exportó el dibujo a 48 × 48, el resultado también será pequeño. Abre el SVG en un editor de texto, aumenta esos valores y vuelve a convertirlo; al ser vectorial, no perderá nitidez.

Si aún dudas del formato de destino, cómo elegir el formato de imagen resume las opciones en una tabla, y en optimización de imágenes para SEO encontrarás las reglas de nombres de archivo y texto alternativo para cuando tengas la exportación lista. Si te debates entre los dos formatos clásicos, consulta PNG vs JPG: diferencias, y para entender por qué limpiar el código de un SVG lo aligera tanto, lee qué es minificar código.