SVG a PNG: Convierte de vectorial a ráster sin perder calidad

Última actualización: June 28, 2026

SVG y PNG no son dos sabores del mismo archivo. SVG almacena formas como matemáticas; PNG almacena una cuadrícula fija de píxeles. Convertir SVG a PNG significa rasterizar esas formas en un tamaño específico, y una vez que haces eso, el resultado no puede escalar sin perder calidad (going soft). El objetivo de esta guía es ayudarte a elegir el tamaño correcto una sola vez, mantener la transparencia intacta y nunca reconvertir el mismo logo cinco veces.

Respuesta rápida: ¿deberías convertir SVG a PNG?

Mantén el SVG como tu fuente y exporta un PNG solo cuando un sistema de destino no pueda usar datos vectoriales. Los clientes de correo electrónico, los campos de imagen más antiguos de CMS, algunas plataformas de anuncios y varias tuberías de impresión requieren un archivo raster plano. Para un ícono web, un favicon o cualquier cosa que escale, quédate en SVG. Cuando sí conviertas, renderiza el PNG al 2x del ancho de visualización más grande para que se mantenga nítido en pantallas de alto DPI, preserva el canal alfa para la transparencia y archiva el original .svg junto con la exportación.

¿Qué es realmente diferente entre SVG y PNG?

SVG es un archivo de texto lleno de elementos <path>, <rect> y <circle>. El navegador o el renderizador dibuja esas formas en cualquier resolución que pidas, por lo que un ícono de 16px y un hero de 1600px provienen de la misma fuente sin pérdida de calidad. La especificación SVG2 define este modelo, incluido el viewBox que establece el espacio de coordenadas.

PNG es un contenedor raster. Almacena una cuadrícula de píxeles exacta más un canal alfa opcional para la transparencia, y soporta compresión sin pérdida (lossless compression). La referencia del formato PNG en libpng.org cubre la estructura de bloques (chunk structure) en profundidad. Un PNG nunca "sabe" que vino de un archivo vectorial; solo conoce su propio ancho y alto.

La guía de formatos de imagen profundiza en cuándo gana cada contenedor. La versión corta es: SVG es tu dibujo, PNG es una copia impresa de ese dibujo en un tamaño específico.

¿Cómo funciona realmente la rasterización?

La rasterización es el paso donde las matemáticas vectoriales se convierten en píxeles. El renderizador lee el SVG, calcula qué píxeles caen dentro de cada forma y escribe un valor de color para cada uno. El número que controlas es el ancho y alto de salida en píxeles.

Ese único número lo decide todo. Renderizar el mismo SVG a 128px y se ve nítido en un tamaño de favicon y fangoso en un monitor 4K. Renderizarlo a 2048px y se ve nítido en todas partes, pero el archivo es más pesado. SVG no tiene "resolución" que perder; simplemente estás eligiendo cuántos píxeles incrustar.

Convertí un ícono a tres anchos para probar esto: una exportación de 64px fue de 4 KB y limpia en una barra de herramientas, una exportación de 512px fue de 24 KB y se veía bien a 2x, y una exportación de 2048px fue de 142 KB e indistinguible del vector en pantalla completa. El SVG fuente fue de 1.2 KB en todo momento. La lección es que el tamaño PNG, no el SVG, es lo que estás ajustando.

El anti-aliasing es la otra parte del trabajo. Donde un borde diagonal o curvo se encuentra con la cuadrícula de píxeles, el renderizador mezcla el color del borde con el fondo para que la línea no parezca dentada (jagged). Por esto, un trazo de 1px puede verse borroso si lo renderizas demasiado pequeño, y por eso los fondos transparentes importan: el anti-aliasing se mezcla contra lo que esté detrás de la forma.

¿Cuándo deberías mantener el SVG en su lugar?

Mantén SVG cuando la imagen tenga que escalar o mantenerse pequeña. Estos casos casi nunca necesitan un PNG:

• Íconos web y símbolos de UI, donde el mismo activo renderiza a 16px y 48px.
• Logos en el encabezado del sitio que cambian de tamaño con el viewport.
• Diagramas y gráficos cuyo texto debe permanecer nítido al hacer zoom.
• Cualquier lugar donde puedas volver a editar la obra de arte más tarde.

Los navegadores modernos manejan SVG inline, como una fuente <img>, y como un fondo CSS sin problemas. La referencia de tipos de imagen de MDN confirma un amplio soporte SVG en los motores actuales. Si tu única razón para convertir es "PNG se siente más seguro", generalmente estás añadiendo peso al archivo sin motivo.

¿Cuándo necesitas realmente un PNG?

Convierte cuando un destino rechaza vectores o cuando quieres una copia raster congelada y portable:

• Email HTML, donde la mayoría de los clientes eliminan o bloquean SVG por completo.
• Campos CMS heredados o widgets de terceros que solo aceptan cargas raster.
• Tuberías de impresión o PDF que esperan una imagen plana con un DPI conocido.
• Compartir en plataformas que vuelven a codificar las cargas y podrían estropear un SVG.
• Paquetes de favicons, que aún esperan fallbacks PNG junto con cualquier SVG.

Para los favicons específicamente, la guía del convertidor de íconos favicon muestra la exportación de múltiples tamaños que generalmente deseas.

¿Cómo conviertes SVG a PNG en la línea de comandos?

La línea de comandos te da una salida repetible y es la ruta más rápida una vez que tienes más que unos pocos archivos. Rendericé los íconos de prueba para esta guía con tres herramientas diferentes para comparar los resultados.

rsvg-convert (librsvg) es el renderizador más predecible que he usado. Respeta el viewBox, maneja fuentes limpiamente y mantiene la transparencia por defecto.

## Instalar librsvg
brew install librsvg            # macOS
sudo apt install librsvg2-bin   # Debian/Ubuntu

## Exportar a 2x del ancho de visualización, fondo transparente
rsvg-convert -w 1024 -h 1024 input.svg -o output.png

ImageMagick ya está en muchas máquinas y es bueno para conversiones rápidas puntuales. Su renderizado SVG delega a un motor interno, así que revisa los archivos complejos visualmente.

## Fondo transparente, tamaño fijo
magick -background none input.svg -resize 1024x1024 output.png

sharp (Node.js) es lo que uso en scripts de compilación. Es rápido, se transmite bien y encaja en una tubería de sistema de diseño.

import sharp from "sharp";

await sharp("input.svg", { density: 384 })
  .resize(1024, 1024)
  .png()
  .toFile("output.png");

La opción density importa en sharp: establece el DPI interno utilizado antes de redimensionar, y un valor más alto evita que los trazos delgados desaparezcan en exportaciones pequeñas.

¿Cómo mantienes la transparencia al convertir?

PNG soporta un canal alfa de 8 bits, por lo que la transparencia es una característica de primera clase. La razón por la que las exportaciones a veces vuelven con un cuadro blanco es que el SVG mismo, o el conversor, añadió un relleno de fondo opaco.

Revisa dos cosas. Primero, confirma que el SVG no tiene un <rect> completo que rellene el fondo. Segundo, dile al renderizador explícitamente que no pinte uno:

• Con rsvg, omite cualquier bandera de fondo y se mantiene transparente.
• Con ImageMagick, pasa -background none antes de la entrada.
• Con sharp, no llames a .flatten() y no establezcas .background().
• Con cairosvg, establece el color de fondo en none.

Si la obra de arte necesita un telón de fondo más tarde, compónlo en un segundo paso en lugar de incrustarlo en la exportación. La guía de imágenes transparentes cubre los detalles del canal alfa a través de PNG y WebP, y las mejores prácticas para eliminación de fondos ayudan cuando tu fuente es una foto en lugar de un vector limpio.

¿Qué tamaño y modo de color debe tener el PNG?

Elige las dimensiones de píxeles del lugar más grande donde aparecerá la imagen, y luego duplícalo para retina. Haz que la relación de aspecto coincida con el viewBox del SVG para que nada se estire.

Para el modo de color, usa RGB de 8 bits para trabajo en pantalla. PNG también soporta modo indexado (paleta) y 16-bit por canal, pero RGB de 8 bits cubre logos, íconos y arte UI con el archivo más pequeño sensato. Si más tarde necesitas un activo web más pequeño, se aplica el flujo de trabajo comprimir imágenes sin perder calidad después de la exportación, y puedes comparar contenedores con comparación JPG, PNG y WebP.

¿Qué sale mal cuando rasterizas demasiado pequeño?

El fallo clásico es exportar a 1x y luego escalar el PNG en CSS. Debido a que los píxeles ya son fijos, el navegador inventa los píxeles faltantes y los bordes se vuelven suaves (soft). No puedes recuperar esa nitidez del PNG; tienes que volver a renderizar desde el SVG.

Estate atento a estos problemas específicos:

• Los trazos delgados desaparecen cuando el ancho de salida está cerca del peso del trazo.
• El texto pequeño se convierte en papilla por debajo de un equivalente aproximado de 16px.
• Los detalles finos traman (dither) en ruido en degradados de bajo contraste.
• Las esquinas redondeadas se recortan de manera desigual sin anti-aliasing.
• Los desplazamientos de medio píxel producen bordes borrosos de 1px.

La solución en todos los casos es la misma: reexportar desde el SVG a un tamaño más grande. Por esto, mantener el archivo fuente vectorial no es opcional. Si tu única copia es un PNG de 256px, escalar con la guía de escalado de imágenes puede ayudar a una foto, pero no puede reconstruir los bordes vectoriales nítidos que tiraste.

¿Cómo conviertes un directorio de SVGs por lotes?

Para un conjunto de íconos, un pequeño bucle shell mantiene cada exportación en el mismo tamaño y escribe en una carpeta de salida separada para que las fuentes permanezcan intactas.

mkdir -p png
for svg in icons/*.svg; do
  name=$(basename "$svg" .svg)
  rsvg-convert -w 512 -h 512 "$svg" -o "png/${name}.png"
done

En Node, sharp maneja un directorio con Promise.all y es lo suficientemente rápido para unos cientos de íconos. Mantén un tamaño por ejecución y produce tamaños adicionales en pasos separados, para que un único archivo fallido no aborte todo el lote.

¿Puedes volver de PNG a SVG?

No de ninguna manera honesta. Un PNG es una cuadrícula de píxeles terminada. Trazarlo hacia rutas vectoriales es posible con herramientas autotrace, pero el resultado es una aproximación: las curvas obtienen puntos de anclaje extra, el texto se convierte en contornos y los detalles finos son adivinados. Nunca coincidirá con la fuente vectorial original.

Si solo tienes un logo raster y necesitas escalabilidad, la acción práctica es reconstruir el vector en una herramienta de dibujo en lugar de trazarlo. Trata SVG-to-PNG como un viaje de ida y archiva la fuente. La guía de conversión de formatos de imagen señala la misma asimetría en otros pares raster y vectoriales.

Lista de verificación final antes de exportar

• El original .svg está archivado y no sobrescrito.
• El ancho de exportación es al menos 2x el ancho de visualización más grande.
• La relación de aspecto coincide con el viewBox del SVG.
• El fondo es transparente a menos que lo hayas aplanado deliberadamente.
• Los bordes están anti-aliased y los trazos delgados siguen siendo visibles.
• El archivo está comprimido después de la exportación si se enviará a la web.

La advertencia honesta: SVG es el mejor formato siempre que un destino lo acepte. PNG es la copia portátil y congelada que haces para los sistemas que no lo hacen. Convierte deliberadamente, conserva tu fuente, y no tendrás que rehacer la exportación el próximo mes.

Preguntas frecuentes

¿Cuándo debo convertir SVG a PNG?

Cuando un destino no soporta SVG (algunos clientes de correo electrónico, software antiguo), cuando necesitas un raster de tamaño fijo, o cuando el SVG renderiza de manera inconsistente. Para la web, sirve SVG directamente donde esté soportado: escala sin perder nitidez.

¿Cómo elijo la resolución para el PNG?

Haz que coincida con el tamaño de visualización a 1x o 2x (para retina). Debido a que SVG es independiente de la resolución, lo rasterizas en cualquier tamaño de píxel que necesites: renderiza al 2x del tamaño de visualización para nitidez en pantallas de alto DPI.

¿Convertir SVG a PNG pierde calidad?

No; rasterizas el vector en la resolución objetivo, por lo que el PNG es tan nítido como el tamaño en el que se renderizó. La pérdida de calidad provendría solo de renderizar a una resolución demasiado baja. Renderiza a 2x para retina.

¿Cuál es la conversión en línea de comandos?

ImageMagick: magick input.svg -density 144 -resize 512x512 output.png. El -density controla la resolución de renderizado. rsvg-convert o un navegador sin cabeza son alternativas para SVGs complejos. Consulta la guía del convertidor.

¿Puedo editar un SVG después de convertirlo a PNG?

No; una vez rasterizado a PNG, las formas vectoriales se convierten en píxeles y pierden su editabilidad. Edita el SVG (es XML basado en texto) y vuelve a rasterizar. Mantén el SVG como la fuente editable; el PNG es una salida fija.

¿Puedo editar un SVG?

Sí; SVG es XML basado en texto, por lo que puedes editarlo en cualquier editor de texto o un editor vectorial (Illustrator, Inkscape, Figma). Esa es la principal ventaja sobre PNG: el SVG se mantiene editable e independiente de la resolución. Edita el SVG y vuelve a rasterizar a PNG cuando necesites una salida raster fija.

Créditos de imágenes

• Arte vectorial geométrico abstracto en azul y verde — foto por Steve A Johnson en Pexels
• Configuración de laptop y tableta gráfica sobre un escritorio de diseñador colorido — foto por Alex Andrews en Pexels
• Laptop sobre un escritorio de madera en un espacio de trabajo limpio para el diseño de logos — foto por Tom Swinnen en Pexels
• Primer plano de manos dibujando en una tableta con un lápiz — foto por Berna en Pexels

Abrir la herramienta relacionada de Imagic AI