Saltar al contenido
Toolars
Explorar

Convertir SVG a PNG

Abre un SVG y esta página lo limpia con una lista de elementos permitidos muy estricta y después renderiza la versión segura sobre un PNG transparente a la escala que elijas, todo dentro de tu navegador. Los scripts nunca se ejecutan y el archivo no se sube. La salvedad que conviene conocer: todo lo que queda fuera de esa lista, como estilos CSS, filtros, marcadores o imágenes incrustadas, se elimina antes de renderizar.

Datos de la herramienta

Límite de tamaño SVG
2 MiB de marcado, identificado como image/svg+xml
Escala
Botones 1x, 2x, 3x y 4x, con 2x preseleccionado aquí; «Escala de exportación» también admite de 0,01 a 32
Tope de salida
8192 px por lado y 24 MP tras escalar
Se elimina antes de renderizar
Scripts, controladores de eventos, atributos style y <style>, filtros, marcadores, <image>, foreignObject, URL externas y data:
Se rechaza directamente
Declaraciones DOCTYPE o ENTITY, y archivos sin width/height ni viewBox
Fondo
Transparente en PNG; solo se aplica un color de relleno si cambias a JPEG

Ruta de la tarea / de la entrada al resultado

Cómo rasterizar un SVG a PNG

  1. 01

    Añade el SVG

    «Elegir archivo» admite un solo .svg cada vez. El marcado original nunca se inserta en la página; la vista previa solo aparece tras el renderizado saneado.

  2. 02

    Elige el tamaño

    Pulsa 1x, 2x, 3x o 4x en «Escala de exportación», o escribe valores exactos en píxeles en «Ancho de salida» y «Alto de salida».

  3. 03

    Sanitizar y convertir

    Pulsa «Sanitizar y convertir». El resumen indica el tamaño final en píxeles y cuántos elementos inseguros o no compatibles se han eliminado.

  4. 04

    Revisa y descarga

    Si el recuento de elementos eliminados es mayor que cero, compara la vista previa con la ilustración original antes de descargar el PNG.

De gráfico vectorial a píxeles

SVG describe formas, por lo que se ve nítido a cualquier tamaño, pero muchos destinos, como las herramientas de presentaciones, los editores de documentos o las fichas de tiendas de apps, piden un mapa de bits fijo. Rasterizar a PNG conserva la transparencia y no pierde nada más allá de la cuadrícula de píxeles que elijas.

Esa cuadrícula es la decisión importante. La escala multiplica el ancho y el alto propios del SVG, o su viewBox cuando faltan esos atributos, de modo que un icono de 64×64 pasa a 128×128 a 2x. Ampliar el PNG después lo volverá borroso, así que renderiza al tamaño más grande que vayas a necesitar.

El saneado explica la mayoría de las sorpresas. Se conservan trazados, formas básicas, texto, degradados, trazados de recorte, máscaras, patrones y referencias <use> locales, además de atributos de presentación como fill y stroke. Los estilos definidos en clases CSS, atributos style o un bloque <style> se descartan, así que una ilustración exportada de ese modo puede verse negra o sin relleno.

Preguntas frecuentes

¿Por qué mi PNG sale negro o pierde sus colores?
Lo más probable es que los colores se definieran con CSS: un bloque <style>, reglas de clase o atributos style. Todo eso se elimina, y las formas SVG tienen relleno negro por defecto. Vuelve a exportar el SVG con atributos de presentación (fill, stroke) en lugar de CSS, o pide a tu herramienta de diseño una exportación con atributos en línea.
¿Qué escala elijo para pantallas de alta densidad?
Esta página se abre en 2x, que duplica las dimensiones declaradas del SVG y sirve para la mayoría de las pantallas de alta densidad. Usa 3x o 4x para ubicaciones más grandes, teniendo en cuenta que el resultado debe seguir cabiendo en 8192 px por lado y 24 MP.
¿Por qué faltan las puntas de flecha o las sombras paralelas?
En SVG, las puntas de flecha se dibujan con elementos marker y las sombras paralelas con elementos filter, y ninguno de los dos está en la lista de permitidos del saneador. Convierte esos efectos en trazados simples en tu editor antes de exportar el SVG.
¿Por qué se ha rechazado mi SVG?
Los motivos habituales son una declaración DOCTYPE o ENTITY, un archivo de más de 2 MiB, un archivo que no se identifica como image/svg+xml o un elemento raíz sin width, height ni viewBox. Una escala que llevaría el renderizado por encima del tope de píxeles se rechaza indicando el límite.
¿Aparecen en el PNG las fuentes y las imágenes enlazadas?
No. Las URL externas, las URL data: y los elementos <image> se eliminan, así que las imágenes enlazadas y las fuentes web nunca se cargan. El texto se dibuja con una fuente que el navegador ya tenga para la font-family indicada; convierte el texto en contornos en tu editor cuando importe la tipografía exacta.

Conversor de SVG a imagen