Convertir SVG a PNG
Rasteriza un vector al tamaño en píxeles que quieras, con la transparencia intacta.
Tu SVG se convierte en esta pestaña con tu navegador; no se sube nadaRasterizar un SVG vectorial a PNG en el tamaño en píxeles que elijas
o arrástralo y suéltalo aquí
SVG
Tamaño natural detectado en el SVG.
Vista previa
Elige o pega un SVG y aquí aparece el resultado rasterizado, con sus dimensiones y su peso reales.
Cómo funciona
Todo pasa en tu navegador: el SVG no se sube a ningún servidor y no hay que registrarse.
Las fuentes y las imágenes que el SVG cargue por URL (por ejemplo <image href="https://…">) no se van a ver: el navegador las bloquea en esta página por seguridad. Convierte texto a trazados en tu editor vectorial antes de exportar si necesitas conservar la tipografía.
El resultado es una imagen nueva, sin metadatos.
Sobre convertir SVG a PNG
Suelta un SVG y elige exactamente qué tan grande debe salir el PNG —un ancho en píxeles, o una escala como 2x o 4x—: la página dibuja el vector en un canvas a ese tamaño y te devuelve un .png. Todo pasa en esta pestaña, en tu navegador, así que no hay que subir nada, no hay cola y no hay límite de archivos; cien iconos son tan instantáneos como uno. Casi nadie llega aquí porque el SVG le disguste. Llega porque algo delante de él no lo acepta: un cliente de correo, un CMS viejo, un anuncio de compraventa, un chat, una diapositiva, la miniatura de un formulario. El PNG es el formato que todo abre, así que el vector tiene que volverse píxeles antes de poder ir ahí.
Esa palabra —píxeles— es lo que hay que entender bien, y es donde fallan sin avisar los convertidores descuidados. Un SVG no tiene resolución fija: es un conjunto de instrucciones de dibujo que se ven nítidas a cualquier tamaño, y por eso los diseñadores trabajan en él. El PNG es lo contrario: una rejilla fija de píxeles, nítida solo al tamaño con el que se generó, y borrosa en cuanto algo la agranda. Por eso la única decisión que importa es el tamaño al que rasterizas, y tienes que tomarla ahora, a propósito. Genera un icono a 32 píxeles y agrándalo luego a 512 y queda hecho una masa; genéralo a 512 y se ve limpio en todo tamaño menor. Por eso la herramienta empieza con un control de tamaño y no con un solo botón: elige el tamaño más grande que puedas llegar a necesitar y reduce desde ahí, nunca al revés.
La transparencia es lo otro que esta página cuida, porque es la segunda razón más común de la búsqueda: la gente busca literalmente un PNG “sin fondo”. Un canvas es transparente por defecto y el PNG lleva un canal alfa completo, así que un SVG con fondo transparente sale como un PNG con fondo transparente, sin ningún recuadro blanco pegado por detrás. Es justo lo contrario de lo que haría un JPG, y es el motivo de elegir PNG y no JPG para un logo o un icono.
Dos límites honestos van por delante, y los dos son sobre el texto. Cuando el navegador rasteriza un SVG lo carga como una imagen, y un SVG usado como imagen corre en un modo restringido: los scripts están desactivados y los recursos externos no se descargan. Eso te conviene, y a la vez es el origen de la sorpresa clásica: una fuente web referenciada por URL no va a cargar, y una fuente que solo existe en la máquina del diseñador tampoco va a estar, así que el texto puede caer sin avisar en otra tipografía. La solución es convertir el texto a contornos (trazados) en tu editor antes de exportar el SVG; entonces las letras son figuras y ya no hace falta ninguna fuente. La trampa relacionada: un SVG que usa un elemento foreignObject contamina el canvas y no se puede exportar, así que la página lo detecta y te lo dice en lugar de devolverte un archivo en blanco.
Todo lo demás es a propósito discreto. Un PNG recién generado no lleva EXIF ni GPS como una foto de cámara, así que aquí no hay nada que borrar; y nada se envía a ningún lado, lo que importa cuando el SVG es un logo sin lanzar o un archivo de un cliente. El único techo es tu equipo: los canvas tienen un tamaño máximo, así que una escala extrema sobre un dibujo ya grande puede fallar, y la página muestra un error claro en vez de una imagen rota.
Por qué un PNG tiene un tamaño y un SVG no, y cómo elegirlo
La idea que conviene tener clara antes de convertir nada: un SVG es independiente de la resolución y un PNG no. Un SVG es marcado —trazos, formas y coordenadas que el navegador dibuja de nuevo al tamaño en que se muestre—, así que se ve nítido en la esfera de un reloj y en una valla publicitaria. Un PNG es un ráster: una rejilla fija de píxeles. Convertir el vector en esa rejilla es un paso de una sola dirección llamado rasterización, y la rejilla que elijas queda fija. Si luego la amplías, el navegador tiene que inventar píxeles que nunca dibujó, y eso es lo que significa “borroso”. Así que el tamaño no es un detalle que aceptar por defecto: es toda la decisión.
Hay una trampa concreta que hace que los conversores ingenuos saquen imágenes difusas. Si un SVG declara un viewBox pero no un ancho y alto explícitos, no tiene tamaño intrínseco en píxeles, y la especificación de CSS dice que un elemento reemplazado en esa situación cae a un tamaño por defecto, históricamente 300 por 150 píxeles. Dibújalo en un canvas sin fijar dimensiones y obtienes una imagen pequeña y suave por muy detallado que fuera el vector. Lo correcto, y lo que hace esta página, es leer el viewBox para conocer la proporción del dibujo y luego rasterizar al tamaño que tú indiques: así un icono cuadrado exportado a 512 es un ráster real de 512 por 512, no uno de 150 estirado.
| Qué vas a hacer | Un tamaño en píxeles sensato | Nota |
|---|---|---|
| Un favicon o icono de app | Exporta a 512 y reduce | Los iconos se muestran en muchos tamaños; genera el más grande una vez y reduce. El generador de favicon de este sitio convierte una imagen cuadrada en un set de iconos completo. |
| Un logo para correo o una diapositiva | 2x su tamaño de visualización | Si se ve a 300px de ancho, exporta a 600px para que quede nítido en pantallas de alta densidad (Retina). |
| Una miniatura o imagen de lista | El ancho exacto de visualización | No hay ventaja en pasarte del tamaño en que se muestra; ajusta al hueco para mantener el archivo pequeño. |
| Algo para imprimir | Tamaño en pulgadas x 300 | La impresión quiere unos 300 píxeles por pulgada, así que un logo de 2 pulgadas son unos 600px. Ojo: el PNG aquí sale en sRGB, no CMYK. |
El límite superior es el propio canvas. Los navegadores limitan cuán grande puede ser un canvas —en Chromium actual un lado de hasta 16.384 píxeles funciona y 32.767 falla, y también hay un límite de área total—, así que un dibujo muy grande a una escala muy alta puede pasarse. Cuando eso ocurre, lo honesto es un error, no una imagen en blanco o cortada en silencio, y eso es lo que muestra esta página. En la práctica no lo vas a tocar con iconos y logos; solo importa si intentas rasterizar una ilustración a sangre completa a 8x.
Las dos cosas que rompen la rasterización de un SVG en silencio: las fuentes y las referencias externas
Cuando cualquier navegador rasteriza un SVG, lo hace cargándolo como imagen, y eso cambia las reglas. Como documenta MDN sobre usar un SVG como imagen, un SVG cargado así corre con JavaScript deshabilitado y, lo importante, no se cargan los recursos externos como imágenes u hojas de estilo: solo sirven si van incrustados como data URI. Es un límite de seguridad, y es deliberado. También es la mayor fuente de sorpresas del tipo “se veía bien en el editor pero el PNG salió mal”, y casi siempre el culpable es el texto.
Las fuentes son recursos externos. Si tu SVG usa texto con una fuente web traída desde una URL, esa fuente no se descarga durante la rasterización y el navegador sustituye por la que tenga: otras letras, otro ancho, a veces otros saltos de línea. Lo mismo pasa con una fuente instalada solo en la computadora del diseñador: no está cuando el archivo se dibuja en otro lado. El arreglo duradero es dejar de depender de las fuentes: en Illustrator, Inkscape, Figma o tu editor, convierte el texto a trazos (también llamado “crear contornos” u “objeto a trazado”) antes de exportar el SVG. Eso reemplaza cada letra por una forma vectorial, así que se ve igual en todas partes porque no hay búsqueda de fuente. El costo es que el texto en contornos ya no se edita como texto, así que guarda un maestro editable y exporta una copia con contornos.
La segunda ruptura es estructural. Un SVG puede incrustar un subárbol de HTML dentro de un elemento foreignObject, y ese contenido contamina el canvas: el navegador lo marca como no origin-clean y se niega a exportarlo, lanzando “Tainted canvases may not be exported”. No hay PNG que sacar de un archivo así con un canvas del navegador, y por eso esta página detecta el foreignObject y te lo dice claro en vez de fallar con un mensaje críptico. Si controlas el SVG, el arreglo es reemplazar el contenido del foreignObject por elementos SVG nativos (texto y formas reales) para que todo el dibujo sea SVG genuino y se rasterice sin problema. Lo mismo vale para cualquier bitmap u hoja de estilo enlazada dentro del archivo: incrústalo como data URI o el render lo descartará en silencio.
Tablas de referencia
Preguntas frecuentes
¿Puedo elegir el tamaño exacto en píxeles del PNG?
Sí, y conviene que lo hagas, porque es lo único que decide la nitidez. Un SVG no tiene un tamaño en píxeles propio: es un dibujo que se ve bien a cualquier medida, así que el tamaño al que lo exportas es el que fija la resolución del PNG. Escribe un ancho en píxeles o una escala (2x, 4x) y genera al tamaño más grande que puedas llegar a usar; después reduces desde ahí. Rasterizar grande y achicar se ve nítido; rasterizar chico y agrandar queda borroso, porque un PNG es una rejilla fija de píxeles y no puede inventar detalle que nunca dibujó. Por eso la herramienta empieza con el control de tamaño y no con un botón único.
¿Conserva la transparencia? ¿Puedo sacar un PNG sin fondo?
Sí. El canvas sobre el que se dibuja el SVG arranca totalmente transparente y el PNG admite un canal alfa real, así que un SVG con fondo transparente sale como un PNG con fondo transparente, sin ningún recuadro blanco detrás. Es la razón principal para elegir PNG y no JPG en logos, iconos y stickers, porque el JPG no tiene transparencia y rellenaría el hueco con un color sólido. Un aviso: si tu SVG trae dibujado un rectángulo de fondo blanco o de color, ese rectángulo también se rasteriza, así que bórralo en tu editor antes si quieres que el PNG quede realmente calado.
El texto o las fuentes de mi SVG se ven distintos al convertir, ¿por qué?
Porque el navegador rasteriza el SVG cargándolo como una imagen, y un SVG usado como imagen corre en un modo restringido que no descarga recursos externos. Una fuente web traída por URL no se va a cargar, y una fuente que solo existe en la máquina donde se hizo el SVG tampoco va a estar, así que el texto cae en otra tipografía, a veces con distinto espaciado o distintos saltos de línea. La solución segura es convertir el texto a contornos (trazados) en tu editor vectorial antes de exportar: las letras pasan a ser figuras y ya no se necesita ninguna fuente para dibujarlas. Es un comportamiento de cómo se rasterizan los SVG como imagen, no un límite de esta herramienta en particular.