Convertir SVG a PNG

¿Qué es un conversor de SVG a PNG?

Un SVG es un dibujo descrito como instrucciones: líneas, curvas, rellenos y texto, sin un solo píxel dentro del archivo. Un PNG es una rejilla de píxeles. Convertir significa elegir un tamaño y pedirle a un motor que dibuje esas instrucciones a ese tamaño, y por eso el mismo SVG puede dar un favicon nítido de 32 píxeles y un banner nítido de 4096 a partir de un único archivo.

Eso también significa que el tamaño es una decisión, no una propiedad que estés leyendo del archivo. Algunos SVG declaran un tamaño, muchos no, y lo que pasa en el segundo caso es la diferencia entre un conversor que funciona y otro que decepciona en silencio. Esta herramienta te enseña en cuál de los dos casos estás antes de convertir.

Todo ocurre en tu navegador. El archivo se lee en local, el dibujo lo rasteriza el mismo motor que dibuja SVG en cualquier página web, y el PNG lo produce un canvas. No se sube nada, así que no hay límite de tamaño impuesto por una subida ni una copia de tu trabajo en el servidor de nadie.

Cómo se usa

1. Elige un archivo SVG. Se lee en tu navegador en lugar de enviarse a ninguna parte. El panel de debajo informa enseguida del tamaño que pide el archivo, y dice qué regla ha dado ese número, porque un SVG puede declarar un tamaño, insinuar solo una forma, o no decir nada en absoluto.
2. Pon el tamaño que de verdad quieres. Escribe un ancho o un alto, o usa los botones de escala para dos, cuatro u ocho veces el tamaño del archivo. La proporción se mantiene salvo que lo desactives. Como el tamaño de destino se escribe dentro del dibujo antes de rasterizarlo, una exportación a ocho veces tiene ocho veces el detalle y no es una imagen pequeña ampliada.
3. Lee qué no va a sobrevivir y descarga. El panel lista todo lo que hay en el archivo que un navegador se niega a cargar cuando un SVG se usa como imagen, y las fuentes que el archivo espera encontrar en tu máquina. Si esa lista está vacía, el PNG va a coincidir con lo que ves en tu editor vectorial.

Por qué tantos conversores te dan un cuadrado de 150 píxeles

Esta es la queja más repetida sobre la conversión de SVG, y no es un fallo de los conversores. La especificación de SVG distingue dos cosas que suenan igual. La proporción intrínseca es la forma del dibujo, y un viewBox te la da. El tamaño intrínseco es una medida de verdad en píxeles, y eso solo lo dan unos atributos width y height absolutos.

Así que un archivo que empieza con un viewBox de 0 0 1024 1024 y sin width ni height tiene una forma conocida y ningún tamaño conocido. Cuando se le pide dibujarlo sin nada más a lo que agarrarse, el navegador recurre al tamaño de objeto por defecto que CSS define para el contenido reemplazado, que es 300 por 150 píxeles, y encaja la forma dentro. Un dibujo cuadrado sale a 150 por 150. Un banner de cuatro a uno sale a 300 por 75. El original nunca midió 150 píxeles de nada, y lo más probable es que su autor pensara en 1024, pero nada en el archivo lo decía.

Donde más duele es en los juegos de iconos, porque ahí quitar width y height es una convención deliberada: permite que el icono tome su tamaño del CSS allá donde se use. Eso está perfectamente bien para una página web y perfectamente mal para un conversor que no tiene CSS que consultar. La herramienta nombra la regla que se ha aplicado a tu archivo, así que un tamaño pequeño es algo que decides y no algo que descubres después.

Una consecuencia que conviene saber: poner width y height en un SVG que no tiene viewBox recorta el dibujo en vez de escalarlo, porque no hay ningún sistema de coordenadas que mapear sobre la caja nueva. Cuando tu archivo está en ese estado, esta herramienta añade un viewBox deducido del tamaño al que ya se estaba dibujando, para que ampliar escale el dibujo como esperarías.

Lo que un PNG no puede llevarse consigo

Cuando un SVG se carga a través de un elemento de imagen, la especificación lo mete en un modo de procesamiento restringido. Los scripts no se ejecutan y las referencias externas no se resuelven, y eso pasa en todos los navegadores porque es lo que exige la norma y no una política que haya elegido un fabricante. El motivo es sencillo: una imagen no debería poder hacer peticiones de red ni ejecutar código solo por mostrarse.

En la práctica eso hace que unas cuantas cosas desaparezcan sin avisar. Un elemento de imagen dentro del SVG que apunta a una fotografía en otro sitio se dibuja como nada. Una hoja de estilos traída con una regla de import no llega nunca, así que todo lo que estilaba cae a sus valores por defecto. Una fuente web declarada con un origen remoto no se descarga. Una forma reutilizada de otro archivo SVG no aparece. Nada de esto levanta un error en ninguna parte, y por eso la herramienta los busca antes de convertir y lista lo que encuentra.

Las fuentes merecen su propio aviso porque fallan de otra manera. Una fuente nombrada en el archivo pero no cargada desde ningún sitio se busca en la máquina que está dibujando, que es la tuya. Si la tienes, el texto sale perfecto. Si no, el navegador pone otra en su lugar y las letras cambian de ancho, así que los saltos de línea se mueven y la composición se descoloca. Convertir el texto a trazados en tu editor vectorial antes de exportar elimina la duda por completo, a cambio de que el texto deje de ser texto.

Dos límites menores. Lo que haya dentro de un elemento foreignObject es HTML y no SVG, y en este modo no se dibuja. Y el PNG tiene canal alfa, así que las zonas transparentes siguen transparentes en vez de volverse blancas, que suele ser lo que quieres pero conviene saberlo si vas a poner el resultado sobre un fondo oscuro.

¿Por qué es gratis?

Porque el trabajo lo hace tu ordenador. El archivo no sale de la página: se lee en local, lo rasteriza el propio motor de dibujado de tu navegador y lo codifica a PNG un canvas. No hay subida, ni cola, ni un servidor pagando ancho de banda, ni copia alguna de tu trabajo fuera de tu máquina.

Así que no hay cuenta, ni registro, ni marca de agua, ni tope de tamaño más allá de lo que tu navegador pueda tener en memoria. El motor que lee las dimensiones del archivo y encuentra lo que va a perder está en el repositorio junto a la página, con 122 comprobaciones que lo verifican contra las especificaciones de SVG y de CSS.