Saltar al contenido principal
ToolsByUs

SVG a PNG

SVG a PNG rasteriza arte vectorial a mapa de bits con el tamaño en píxeles que quieras, en tu navegador. El dibujo lo vuelve a rasterizar el motor vectorial del propio navegador al tamaño que pidas, así que una exportación a 4× es de verdad 4× nítida y no una copia ampliada de una versión menor.

Solo local
Ancho
Escala
Formato
Código SVG
249 B5 líneasLín. 1, Col. 1
Vista previa512 × 512 · origen 64×64

Generando…

¿Cómo funciona SVG a PNG?

Un SVG no tiene píxeles. Tiene un viewBox, un conjunto de formas y un conjunto de reglas para convertir esas formas en píxeles — y las reglas las aplica quien lo renderice, al tamaño que se le pida. Ahí está todo el valor de la conversión: el navegador rasteriza los vectores a tu resolución objetivo, así que 1024 píxeles de un dibujo de 64 son de verdad 1024 píxeles de detalle y no una ampliación de 16× de un render de 64 píxeles.

La cuestión del tamaño, que no siempre tiene respuesta

Un dibujo puede declarar width="100%", declarar solo un viewBox, o no declarar nada. Las tres cosas son válidas y ninguna le dice al renderizador qué tamaño en píxeles usar. Así que se lee el viewBox cuando no hay atributos utilizables, la proporción se toma de él y, cuando no hay nada que leer, la herramienta dice qué valor ha inventado en lugar de adivinar en silencio.

Qué no sobrevive al viaje, y por qué

El dibujo se carga como imagen, y eso lo convierte en un documento aislado. Los scripts que contenga nunca se ejecutan — esa es la propiedad de seguridad que hace que esto se pueda ofrecer con seguridad — y tampoco nada que necesite un contexto de navegación:

  • Las referencias externas no cargan. <image href="photo.png">, un @import en un <style>, una web font desde una CDN: todo se descarta. Un logo que depende de una fuente remota se renderiza con una fuente de respaldo.
  • foreignObject se renderiza de forma inconsistente. Algunos motores dibujan el HTML de dentro; otros lo dejan en blanco.
  • Las custom properties de CSS de la página no llegan hasta él. currentColor se resuelve al color inicial, que suele ser negro.

El remedio para lo primero es insertar los recursos dentro del SVG antes de convertir, lo que en la mayoría de pipelines de build es un cambio de una línea y en el resto una edición manual.

Elegir un formato

PNG para todo lo que tenga transparencia o color plano, que es la mayoría del arte vectorial. WebP cuando el archivo vaya a un sitio web y quieras el más pequeño — el soporte ya es universal. JPEG solo cuando el fondo sea opaco y el dibujo sea de carácter fotográfico, porque no tiene canal alfa y un canvas transparente codificado como JPEG sale negro.

SVG

<svg viewBox="0 0 64 64" width="64" height="64">…</svg>

PNG

drawing-512.png
512 × 512 pixels
transparent background
9.4 KB

¿Qué opciones y casos límite admite SVG a PNG?

Referencia técnica y opciones
ParámetroTipoValor predeterminadoComportamiento y casos límite
Anchopíxeles512El ancho de salida. La altura sigue la proporción del propio dibujo, tomada de su viewBox — así que un dibujo 2:1 con 512 de ancho mide 256 de alto.
Escala1× | 2× | 3× | 4×1×Multiplica el ancho. Útil para un recurso retina: 512 a 2× son 1024 píxeles, que es lo que se supone que contiene un nombre de archivo @2x.
FormatoPNG | WebP | JPEGPNGPNG conserva la transparencia y no tiene pérdidas. WebP es más pequeño con la misma calidad. JPEG no tiene canal alfa ninguno, así que un fondo transparente se pinta sólido antes de codificar.
Fondotransparente | colortransparenteTransparente para PNG y WebP. Cualquier otra cosa pinta primero el color — algo necesario para JPEG y útil cuando el dibujo asume que detrás hay una página clara.
Tamaño intrínsecodetectadoatributos, luego viewBoxSe lee de width/height, con el viewBox como respaldo. Cuando no existe ninguno, la herramienta lo dice, porque el tamaño que usa es entonces una invención y no el del dibujo.
Recursos externosno se carganse descartanLas imágenes enlazadas, las web fonts y las hojas de estilo importadas no se resuelven dentro de un contexto de imagen. Si el dibujo depende de ellas, insértalas dentro del SVG antes de convertir.
Scriptsnunca se ejecutan—El script dentro del SVG no se ejecuta. Es una propiedad de seguridad, no una limitación, y es la razón por la que el dibujo se carga como imagen en lugar de inyectarse en la página.
Límite de salidapíxeles4096 × 4096Por encima de unos 16 megapíxeles la asignación del canvas falla en un teléfono en lugar de limitarse a ir lenta, así que la exportación se rechaza con un mensaje en vez de producir un archivo en blanco.

Preguntas frecuentes

¿El PNG será nítido a 4×?

Sí, y de eso consiste la diferencia con un reescalado. El SVG se entrega al navegador con el tamaño objetivo en píxeles, así que el motor vectorial rasteriza cada curva a esa resolución. Ampliar una versión menor interpolaría entre los píxeles existentes y produciría bordes blandos; esto genera detalle nuevo. Lo único que lo limita es cómo esté hecho el dibujo — un trazo de exactamente una unidad se adelgaza a medida que crece el canvas.

Mi fuente web no se ha renderizado. ¿Por qué?

Porque el dibujo se carga como imagen, y una imagen es un documento aislado: no puede traer una fuente, una imagen ni una hoja de estilo desde ningún sitio. Un @font-face remoto se descarta y el texto recurre a una fuente del sistema. Para conservar las letras, convierte el texto en trazados en tu editor o incrusta la fuente como data URI base64 dentro del SVG antes de convertir.

¿Por qué mi SVG transparente sale negro en la salida JPEG?

Porque JPEG no tiene canal alfa. Un canvas recién creado es transparente y un píxel transparente no tiene nada que codificar, así que sale negro — la queja más común sobre cualquier conversor de SVG a JPEG. La opción de fondo de aquí pinta primero un color precisamente por eso. Si necesitas transparencia, usa PNG o WebP.

¿A qué tamaño debo exportar?

El tamaño al que se va a mostrar, multiplicado por el device pixel ratio de las pantallas donde vaya a aparecer. Un icono de 24 píxeles mostrado en una pantalla 2× quiere un archivo de 48 píxeles. Una ilustración principal que ocupa 800 píxeles CSS en una pantalla retina quiere 1600. Exportar a 4096 «por si acaso» cuesta ancho de banda en cada carga de página y no compra nada que un archivo del tamaño correcto no tenga ya.

La herramienta dice que ha inventado un tamaño. ¿Qué significa?

Que el SVG no tiene width, ni height, ni viewBox, así que no hay forma de saber qué forma tiene. Se asume 512×512 para que la exportación produzca algo en lugar de fallar, y la interfaz indica qué valor se usó para que puedas fijar el ancho tú. Añadir un viewBox al origen es la solución de verdad y cuesta una línea.

¿Se sube mi dibujo?

No. No se sube nada: el SVG se codifica como data URL, se renderiza con el canvas del propio navegador y se codifica a PNG en la pestaña — el panel Network no muestra ninguna petición. Es algo que importa para los dibujos que la gente convierte aquí, que a menudo son logos sin publicar y recursos de marca.

Equipo de ToolsByUs · Cómo comprobamos nuestras herramientas