Cómo convertir SVG a PNG (y cuándo deberías hacerlo)

El formato SVG es perfecto para la web, pero muchos lugares no lo aceptan: las plataformas sociales, los clientes de correo y numerosos servicios de impresión prefieren una imagen rasterizada. Convertir SVG a PNG toma un minuto y, si eliges el tamaño de exportación adecuado, quedará tan nítida como el original. Una advertencia: PNG no se puede revertir limpiamente a SVG, así que guarda siempre tu archivo original. Si ya sabes lo que necesitas, ve directamente al convertidor de SVG a PNG; de lo contrario, esta guía cubre cuándo convertir, qué tamaño en píxeles exportar para web, retina e impresión, y cómo mantener intacto tu fondo transparente.

SVG frente a PNG en un minuto

SVG es un formato vectorial: un conjunto de instrucciones de dibujo (trazados y formas) que se renderiza con nitidez a cualquier tamaño, ya sean 16 px o 16.000 px, y mantiene un peso ligero, ideal para logotipos, iconos y arte geométrico. Es editable en un editor de texto e incluso soporta animaciones.

PNG es un formato rasterizado: una cuadrícula fija de píxeles. Se ve nítido en su tamaño nativo, pero se difumina al ampliarlo. Destaca en degradados, sombras y detalles fotográficos, y se visualiza de forma predecible en cualquier lugar.

Lo principal en lo que la gente suele equivocarse: convertir SVG a PNG no "pierde" calidad en el momento de la exportación. Los píxeles se generan a partir de las matemáticas vectoriales, por lo que una exportación del tamaño adecuado es perfecta a nivel de píxel. El verdadero coste es que el PNG queda fijado a una resolución para siempre.

Regla general: conserva el SVG como tu fuente de verdad y exporta un PNG cada vez que el destino lo exija.

Cuándo debes convertir SVG a PNG

Conviertes cuando el destino no puede manejar SVG, no porque PNG sea de alguna manera mejor. En la práctica, estas situaciones surgen constantemente:

• Redes sociales. Instagram, X/Twitter, Facebook y LinkedIn no aceptan cargas de archivos SVG. Convierte a PNG o JPG antes de publicar.
• Correo electrónico. La mayoría de los clientes de correo tienen un soporte limitado o nulo para SVG. Usa PNG para imágenes de boletines y firmas de correo.
• Favicons e iconos de aplicaciones. Los navegadores modernos aceptan favicons SVG, pero los iconos táctiles de Apple y los navegadores más antiguos aún requieren versiones PNG. Nuestra guía sobre cómo crear un favicon desde un logotipo explica todo el proceso paso a paso.
• Servicios de impresión. Muchos impresores de productos fotográficos (pegatinas, tarjetas de visita, merchandising) aceptan PNG pero no SVG.
• Software heredado y algunos CMS. Las herramientas antiguas y los flujos de trabajo de documentos pueden representar SVG incorrectamente o no hacerlo en absoluto; un PNG es la opción segura. Algunas versiones de Office y flujos de trabajo de documentos antiguos manejan SVG de forma inconsistente.

Y cuándo no convertir: en sitios web. Allí, el SVG se mantiene nítido a cualquier tamaño, puede estilarse y animarse con CSS, y a menudo pesa menos que un PNG grande. Si tu único destino es tu propio sitio, omite la conversión por completo.

Fuente de los puntos sobre el soporte de plataformas: ConverterUp.

Cómo convertir SVG a PNG en Tool Cloud (paso a paso)

1. Abre la página del convertidor de SVG a PNG.
2. Sube tu archivo SVG. Puedes subir varios archivos a la vez si estás convirtiendo un conjunto.
3. Convierte y descarga el PNG. Para obtener un tamaño exacto en píxeles, establece los campos de ancho y alto (o usa la opción de resolución, que varía entre 72 y 1200) antes de convertir; también hay un interruptor para mantener la relación de aspecto. Los archivos subidos se eliminan automáticamente después del procesamiento.

Dado que el convertidor requiere un ancho y un alto explícitos, no necesitas modificar el viewport de tu SVG ni redimensionar nada en un editor de diseño: simplemente decide el tamaño de salida (siguiente sección) y escríbelo.

Convertir SVG a PNG sin una herramienta web

No necesitas un convertidor en línea para esto. Cada herramienta de diseño exporta PNG directamente:

• Figma, Illustrator, Affinity, Inkscape: usa el cuadro de diálogo de exportación, elige PNG y establece el tamaño de exportación en píxeles (aquí es donde aplicas el factor de escala que se indica a continuación). Esta es la mejor opción si tienes el archivo fuente, ya que puedes convertir el texto a contornos y eliminar rectángulos de fondo no deseados en el mismo proceso.
• Desde un sitio web: haz clic derecho en el SVG (o en el archivo SVG abierto en una pestaña del navegador) y usa "Guardar imagen como"; normalmente obtendrás el SVG, así que expórtalo o conviértelo desde allí.
• Último recurso, sin ninguna herramienta: abre el SVG en un navegador, amplía hasta el máximo mientras siga siendo nítido y haz una captura de pantalla. Perderás la transparencia a menos que uses una herramienta de captura que la soporte, y los bordes no serán tan limpios como en una exportación real. Sirve para un boceto rápido, no para producción.

¿Qué tamaño en píxeles debes exportar? (Guía del factor de escala)

Elige tu tamaño de exportación multiplicando las dimensiones del viewport del SVG por un factor de escala: un SVG con un viewport de 200×200 exportado a 1x da un PNG de 200×200 px, a 2x da 400×400 px y a 3x da 600×600 px. En el convertidor, ese mismo cálculo se reduce a introducir el ancho y el alto. Luego, ajusta la escala según el destino:

Para iconos y logotipos web cotidianos, 2x es el punto óptimo práctico: un solo archivo a 2x cubre tanto pantallas estándar como retina, ya que se reduce suavemente en las pantallas normales. Si una especificación exige un tamaño fijo concreto, la respuesta es usar 1x correspondiente al viewport. Para impresión, utiliza 3x–4x; eso proporciona suficientes píxeles para elementos impresos pequeños como pegatinas o tarjetas de visita, mientras que las impresiones grandes necesitan proporcionalmente más.

No hay penalización de calidad por exportar un tamaño mayor del necesario, porque los píxeles provienen de las matemáticas vectoriales, no de un estiramiento. El único inconveniente es el tamaño del archivo, que crece con el cuadrado de la escala: un PNG a 4x tiene dieciséis veces más píxeles que uno a 1x. Así que elige tu tamaño en función de dónde irá el archivo, no bajo la premisa de que "más grande es más seguro".

Mantener la transparencia (y cuándo usar un fondo blanco)

El canal alfa de PNG preserva nativamente la transparencia del SVG, que es exactamente lo que deseas para logotipos e iconos que deben situarse sobre diferentes fondos. Exporta a cualquier escala y la transparencia se conserva intacta.

Sin embargo, aquí hay una trampa clásica. Un SVG puede parecer tener un fondo blanco en un navegador cuando en realidad estás viendo la página detrás de él. Antes de convertir, pruébalo sobre un fondo oscuro. Si la forma sigue viéndose correctamente, tienes transparencia real; si ves un recuadro blanco, tu SVG tiene un rectángulo de fondo integrado.

Cuándo rellenar un fondo en su lugar: algunas plataformas y herramientas antiguas no manejan bien la transparencia. Para esas subidas, un fondo sólido (generalmente blanco) es la opción más segura.

Y si tu SVG contiene un rectángulo de fondo que no deseas, elimínalo en tu archivo de diseño antes de exportar. Esa es una corrección en el archivo de diseño, no un ajuste de conversión.

Errores comunes que arruinan las exportaciones SVG

La mayoría de las conversiones de SVG a PNG salen bien. Las que no suelen fallar de una de estas tres formas:

• Fuentes. El texto en SVG se renderiza con las fuentes disponibles para la máquina que lo procesa, según la especificación SVG 1.1. Si el rasterizador no tiene tu fuente, obtienes sustitución de texto o un diseño roto. La solución es sencilla: convierte el texto a trazados (contornos) en tu herramienta de diseño antes de exportar el SVG. Esta es la causa más común de «¿por qué mi logo se ve mal en el PNG?».
• Recorte. Algunos convertidores recortan la salida al viewport declarado del SVG, y el contenido del SVG puede extenderse más allá, por lo que todo lo que esté fuera puede perderse. Comprueba que nada importante quede fuera del lienzo antes de exportar.
• Filtros avanzados. La renderización de filtros y degradados SVG puede variar entre motores. Los rasterizadores de servidor los manejan de forma distinta que los navegadores; por ejemplo, ImageMagick delega en librsvg cuando está disponible y usa un motor interno más limitado como respaldo. Los propios degradados se rasterizan limpiamente a cualquier escala (MDN), pero cadenas complejas de filtros pueden verse distintas a tu vista previa en el navegador. Si ocurre, simplifica los efectos o prerasterízalos en tu herramienta de diseño.

Conversión masiva de un conjunto de iconos

Un conjunto de iconos vive o muere por su consistencia. Una mezcla de tamaños, o algunos iconos con fondo transparente y otros con fondo blanco, se ve mal en la interfaz de un producto o app, incluso si cada archivo individual está bien.

Así que decide dos cosas desde el inicio:

1. Una escala. 2x para web es la opción habitual.
2. Una política de fondo. Normalmente transparente, salvo que el destino no pueda manejar alfa.

Luego aplica ambas a cada archivo. La forma práctica: sube varios SVG a la vez al convertidor y exporta todo el lote con el mismo ancho y alto, en lugar de convertir los archivos uno por uno y acabar con resultados inconsistentes.

Si después necesitas varios tamaños a partir de un SVG original (digamos 16, 32 y 512 px), vuelve a exportar desde el SVG a cada tamaño, o pasa el PNG por un redimensionador de imágenes — no amplíes un PNG pequeño, solo lo borras.

Preguntas frecuentes, respondidas en un solo lugar

¿La conversión de SVG a PNG pierde calidad?

No, si exportas al tamaño adecuado. Los píxeles del PNG se generan a partir de las matemáticas vectoriales, así que el resultado es tan nítido como el SVG a esa resolución. La única pérdida real es flexibilidad: el PNG queda fijo en un tamaño de píxel para siempre.

¿Puedo convertir PNG de vuelta a SVG?

No de forma limpia. El trazado aproxima la cuadrícula de píxeles en lugar de restaurar los trazados originales, por lo que nunca es sin pérdidas: los logotipos de color plano se trazan aceptablemente, mientras que las fotos y los degradados se trazan mal. Guarda tu SVG original como archivo maestro y no necesitarás trazado en primer lugar.

¿Qué fondo debo usar?

Transparente para cualquier elemento que se coloque sobre fondos variables, algo que el canal alfa del PNG maneja nativamente. Rellena solo un fondo sólido (normalmente blanco) cuando el destino no soporte transparencia.