¿Cómo convierto un SVG a PNG sin perder las fuentes?
Por qué la salida de SVG a PNG llega a ser 2x del tamaño declarado, y por qué el sandbox del navegador silenciosamente descarta fuentes externas e imágenes vinculadas durante el renderizado.
Un SVG no tiene píxeles en él. Es XML: rutas, rellenos, un viewBox y tal vez un elemento <text> que nombra una fuente que el archivo en realidad no contiene. Rasterizarlo a PNG significa elegir una cuadrícula de píxeles y pintar esas formas sobre ella, por lo que dos cosas deciden si te gusta el resultado. Cuántos píxeles pediste y qué se le permitió al renderizador cargar mientras pintaba.
Ejecutamos ese renderizado dentro de tu navegador. El archivo va a una URL de blob, un elemento <img> lo carga, el navegador lo pinta en un OffscreenCanvas y un codificador de WebAssembly escribe el PNG. Esta aplicación no tiene rutas de API ni acciones de servidor, por lo que un logotipo no publicado nunca se queda en el bucket temporal de alguien esperando una tarea de eliminación. La mayoría de los convertidores de SVG a PNG suben primero y prometen limpieza después. El nuestro nunca envía los bytes a ninguna parte, que es el objetivo de nuestro modelo de privacidad.
¿Qué sucede realmente cuando un navegador rasteriza un SVG?
Tu SVG se entrega a un elemento <img>, y ese detalle impulsa todo lo demás en esta página. Un SVG cargado como imagen se ejecuta en un modo de procesamiento restringido donde los scripts no se ejecutan y las referencias externas no se obtienen, lo que las reglas de conformidad SVG 2 definen como los modos de procesamiento seguros. Una vez que la carga se resuelve, lo pintamos con drawImage en un OffscreenCanvas, leemos los píxeles, codificamos con @jsquash/png y luego ejecutamos oxipng en el nivel 3 sobre los bytes. Ese paso es sin pérdida. El alfa sobrevive todo el viaje, así que un logotipo transparente sale transparente.
¿Qué tamaño tendrá realmente el PNG?
Nuestro convertidor renderiza al doble del tamaño intrínseco del SVG. Un SVG de 500x500 sale a 1000x1000. El duplicado te da un archivo de calidad retina de forma gratuita, y también es lo que la gente tropieza cuando una especificación exige un recuento de píxeles exacto. Si el navegador informa que no hay tamaño intrínseco utilizable, sustituimos 1024x1024 antes de duplicar, por lo que el PNG llega a 2048x2048. La especificación de imágenes CSS cubre por qué un tamaño puede faltar en primer lugar: un elemento reemplazado sin ancho o alto intrínseco vuelve a un tamaño de objeto predeterminado, y un viewBox por sí solo proporciona una relación sin tamaño adjunto. Así que establece el ancho y la altura en el <svg> raíz a la mitad de tu objetivo. 256 de entrada, 512 de salida.
| Lo que declara el <svg> raíz | PNG que escribimos |
|---|---|
| width="500" height="500" | 1000 x 1000 |
| width="256" height="256" | 512 x 512 |
| width="64" height="64" (un ícono) | 128 x 128, generalmente demasiado pequeño |
| Sin tamaño intrínseco utilizable | 2048 x 2048 (1024 de respaldo, duplicado) |
¿Por qué mi texto salió con la fuente incorrecta?
Esta es la queja más común y no es un error en el convertidor. Una regla @font-face que apunta a una URL .woff2 cuenta como una referencia externa, por lo que el modo seguro bloquea esa obtención antes de que comience. Las fuentes cargadas por la página alrededor de la imagen tampoco llegan adentro, porque un SVG en un <img> es un documento separado que realiza su propia resolución de fuentes. Lo que obtienes es lo que la máquina puede coincidir de la lista de font-family, que en la computadora de un revisor significa un respaldo que nunca elegiste. La solución es dejar de enviar texto como texto. Illustrator lo llama Tipo > Crear contornos. Inkscape lo llama Ruta > Objeto a ruta. Ambos convierten cada glifo en una ruta, el archivo crece un poco y el renderizado deja de depender de la máquina.
¿Por qué falta la foto dentro de mi SVG?
La misma regla, síntoma diferente. Si tu SVG incorpora un bitmap a través de un elemento <image> con una URL https absoluta, esa URL no se obtiene, y el PNG regresa con un agujero donde debería estar la foto. Un data: URI funciona bien, porque no hay solicitud de red que quede bloqueada. Hay una segunda razón para incrustar: un bitmap de origen cruzado pintado en un canvas lo mancha, y leer los píxeles de vuelta lanza un SecurityError. Ese fallo al menos se anuncia. Una referencia bloqueada es silenciosa, lo que le cuesta a la gente una tarde. Abre el archivo en un editor de texto y busca http antes de convertir.
¿Puedo convertir un PNG de nuevo a un SVG?
No, y no pretendemos lo contrario. Nuestro convertidor decodifica SVG y no puede codificarlo: los codificadores en la construcción escriben JPEG, PNG, WebP, AVIF y PDF, y ninguno de los 24 pares en 11 formatos tiene SVG como objetivo. Volver de píxeles a rutas es un trazado, una máquina adivinando dónde pertenecen los bordes, y una marca de palabra trazada rara vez es lo suficientemente cercana para enviar. Re-exporta desde el original si aún lo tienes. Si lo que realmente necesitas es el raster a un tamaño mayor, nuestro upscaler ejecuta Real-ESRGAN y siempre escribe PNG: tomó un archivo de 400x269 a 1600x1076 a 4x.
¿Cómo convierto un SVG en un conjunto de favicon?
El generador de íconos toma SVG directamente, que el compresor, redimensionador y recortador no hacen: esos tres aceptan solo JPEG, PNG, WebP, AVIF y GIF. Renderiza tu SVG en un canvas cuadrado del tamaño de la mayor de sus dos dimensiones o 512 píxeles, lo que gane, así que un ícono de 64x64 aún obtiene un canvas de 512 para reducir. Salen siete archivos: favicon.ico empaquetando 16, 32 y 48, favicon-16x16.png, favicon-32x32.png, un apple-touch-icon.png de 180px, android-chrome-192x192.png, android-chrome-512x512.png y site.webmanifest. Por qué ese .ico aún gana sus 4,6 KB es un argumento separado. Un archivo a la vez, límite de 10 MB. El convertidor es la herramienta por lotes: 10 archivos y 50 MB por ejecución.
¿Debería comprimir el PNG después?
Generalmente, y el modo importa más que cualquier control deslizante. En un PNG transparente de 942,4 KB a 900x606, el camino sin pérdida (oxipng nivel 3) salió a 383,9 KB, una reducción del 59% con cada píxel idéntico al de entrada. El camino de paleta (imagequant) llevó ese mismo archivo a 98,3 KB, una reducción del 90%, al reducirlo a 256 colores. El arte vectorial plano es el mejor caso para el modo de paleta, ya que un logotipo con seis rellenos no tiene nada parecido a 256 colores que ceder. La compresión también elimina todos los metadatos. Ejecuta ambos en el compresor y conserva el que se mantenga.
Haz esto a continuación: abre el SVG en un editor de texto, busca http para capturar fuentes e imágenes vinculadas, contornea cualquier texto en vivo, luego establece el ancho y la altura en el <svg> raíz a la mitad de tu tamaño objetivo y súbelo a /convert/svg-to-png. Si el PNG va destinado a una página web, envíalo directamente al compresor, y los números de PNG contra WebP para un archivo con transparencia te dicen si debes cambiar de formato. Si va a un documento, nuestras notas sobre JPG a PDF cubren el tamaño de página que termina teniendo una imagen convertida.