Skip to content
user@convertitive:~$convertitive

Conversor de SVG a PNG

Suelte un SVG o pegue su código, elija un tamaño, descargue un PNG. Nada abandona su navegador.

SVG es independiente de la resolución — el mismo archivo se renderiza nítido a 16 píxeles o a 16 000 — pero buena parte de la web todavía no puede con él. Los clientes de correo lo eliminan, los CMS antiguos rechazan la subida, las cadenas de generación de favicons quieren mapas de bits de tamaño fijo, y un diseñador que entrega recursos a un equipo no diseñador a menudo necesita algo que simplemente se abra en todas partes. Ahí es cuando se aplana un vector a un ráster, y como el origen no tiene resolución fija, usted elige las dimensiones de salida. Esta herramienta renderiza su SVG con el propio rasterizador del navegador sobre un canvas exactamente al tamaño que especifique, y luego codifica un PNG — con la transparencia preservada — sin que el archivo salga jamás de su máquina.

Drop an .svg file here, or

SVG up to 8 MB. Stays in your browser.

How to use

  1. Cargue su SVG

    Arrastre un archivo .svg (hasta 8 MB) sobre la zona de arrastre, haga clic para elegir uno, o pegue el código SVG en bruto en el cuadro de texto. En cualquier caso, la herramienta lee los atributos width, height y viewBox para detectar el tamaño intrínseco.

  2. Fije el tamaño de salida

    Escriba un ancho o alto exacto en píxeles — con la proporción bloqueada, la otra dimensión sigue automáticamente — o pulse los botones 1x, 2x o 4x para multiplicar el tamaño intrínseco. Para pantallas retina, 2x es la elección habitual.

  3. Elija un fondo

    Transparente (el valor por defecto) mantiene intacto el canal alfa del SVG en el PNG. Elija Blanco o un color personalizado si la imagen va a colocarse en algún lugar que no maneje la transparencia, como un flujo de trabajo solo JPEG o ciertos clientes de correo.

  4. Previsualice y descargue

    El resultado se renderiza en vivo sobre un fondo ajedrezado para que vea exactamente qué áreas quedan transparentes. Haga clic en Descargar PNG — el archivo lo genera localmente el codificador de canvas de su navegador y nunca se sube a ninguna parte.

Frequently asked questions

¿Se sube mi SVG a un servidor?
No. El SVG se convierte en una URL de blob local, lo renderiza el propio motor SVG de su navegador en una imagen fuera de pantalla, se dibuja en un canvas y se codifica a PNG con canvas.toBlob() — todo en JavaScript en su máquina. No hay ninguna petición de subida en absoluto.
¿Por qué mi SVG se renderiza a un tamaño extraño?
Muchos SVG — especialmente las exportaciones de iconos — solo llevan un viewBox y no tienen atributos width/height. Los navegadores que muestran ese archivo en un <img> recurren a un tamaño por defecto (a menudo 300×150, a veces 0×0), y por eso los conversores pueden producir salidas de tamaños raros. Esta herramienta analiza directamente el código SVG: si width y height están presentes los usa; si solo existe un viewBox, toma su proporción con un ancho por defecto de 512 px; si fallan ambos, recurre a 512×512. Siempre puede anular el tamaño detectado antes de exportar.
¿Por qué el texto de mi SVG se ve distinto en el PNG?
Los elementos <text> del SVG se renderizan con las fuentes que tenga el navegador que rasteriza, y en el contexto <img> las referencias externas a fuentes web no se descargan — así que su tipografía cuidadosamente elegida cae en una fuente genérica del navegador. Si la tipografía exacta importa, convierta el texto a contornos (texto a trazados) en su herramienta de diseño antes de exportar el SVG; los trazados se rasterizan de forma idéntica en todas partes.
¿Por qué no aparecen las imágenes incrustadas ni el CSS externo?
Cuando un navegador rasteriza un SVG dentro de un elemento <img>, trata el archivo como un documento independiente: las referencias externas — hojas de estilo enlazadas, fuentes web y etiquetas <image> que apuntan a otras URL — no se descargan, y el contenido de otro origen puede contaminar el canvas y bloquear por completo la exportación. La solución es hacer el SVG autocontenido: incruste el CSS en línea e inserte las imágenes ráster como URI data:.
¿Se conserva la transparencia?
Sí. PNG tiene un canal alfa completo, y con el fondo en Transparente, cada área que su SVG deja sin pintar permanece transparente en la salida. La vista previa ajedrezada muestra exactamente dónde. Elija Blanco o un color personalizado solo cuando quiera aplanar el fondo deliberadamente.
¿Qué escala debo usar para pantallas retina / de alta densidad?
Exporte al doble del tamaño al que se mostrará la imagen — un logotipo mostrado a 200×80 píxeles CSS debería ser un PNG de 400×160. Las pantallas de alta densidad meten aproximadamente cuatro píxeles físicos en cada píxel CSS, así que una exportación 1x se ve borrosa en ellas. 4x solo vale la pena para usos cercanos a la impresión; para la visualización web normal solo vuelve a cuadruplicar el tamaño del archivo.

About

Cómo rasterizan los navegadores el SVG en un contexto de imagen

Cargar un SVG mediante un elemento <img> (o dibujarlo en un canvas) pone el motor SVG del navegador en un modo restringido: los scripts dentro del archivo nunca se ejecutan, los manejadores de eventos se ignoran y los recursos externos — fuentes, hojas de estilo, imágenes referenciadas — no se descargan. El documento se renderiza como una imagen pura y autocontenida. Esa restricción es exactamente lo que hace que un conversor del lado del cliente como este sea seguro de usar con cualquier SVG que encuentre: incluso un archivo malicioso solo se trata como píxeles, nunca como código. También es el origen de la principal limitación de la herramienta — cualquier cosa que el SVG traiga de fuera de sí mismo, sencillamente, no aparecerá.

Elegir dimensiones: rasterice en grande, reduzca después

Escalar un vector hacia arriba no cuesta nada, pero escalar un ráster hacia arriba siempre lo degrada. Así que el flujo de trabajo sensato es rasterizar una vez al tamaño más grande que cualquier consumidor vaya a necesitar — digamos, 4 veces el tamaño nominal del diseño — y producir las variantes más pequeñas reduciendo ese PNG maestro, que es una operación casi sin pérdidas. Ir en la otra dirección (exportar pequeño y luego ampliar) desecha detalle que el SVG podría haber proporcionado gratis. Como PNG usa compresión sin pérdidas, el único coste real de un tamaño de exportación generoso son bytes en disco.

Sources & references

Authoritative references behind the math, constants, and tables on this page. Verified by Buğra Sözeri on the dates shown and re-checked at every deploy.