Conversor de SVG a PNG

Esta herramienta convierte un gráfico vectorial SVG en una imagen PNG rasterizada. Suelta un archivo SVG o pega su código, elige una escala (o escribe un ancho personalizado) y descarga el PNG.

¿Cómo calcula el tamaño correcto?

Lee los atributos width y height del propio SVG cuando ambos tienen valores absolutos, como 120px o 48. Si falta alguno o viene en porcentaje, recurre al atributo viewBox y calcula el lado que falte a partir de su proporción, cuando solo uno de los dos es usable. Si el archivo no tiene ninguno de estos datos, usa 300x150, el mismo tamaño por defecto que aplican los navegadores a una etiqueta <img> sin tamaño especificado. A partir de ahí, elegir una escala de 1x, 2x o 4x multiplica ese tamaño base, o puedes escribir un ancho personalizado y el alto se ajusta automáticamente para mantener la proporción.

¿Se sube el SVG a algún sitio?

No, todo ocurre en tu dispositivo. El navegador dibuja el SVG en un elemento canvas oculto y lee los píxeles resultantes para construir el PNG, así que el archivo nunca se envía a un servidor. Esto también significa que el SVG se trata como una simple imagen: si tiene etiquetas <script> o controladores de eventos incrustados, no se ejecutan, porque dibujar en un canvas no interpreta el documento como sí lo haría insertarlo en una página.

¿Qué pasa con un SVG mal formado?

El conversor necesita un código que al menos contenga una etiqueta <svg> reconocible; un texto que no se parezca en nada a SVG se rechaza antes de intentar dibujar nada. Fuera de eso, el renderizado queda en manos del motor SVG del propio navegador, así que la mayoría del SVG bien formado (incluidos grupos anidados, gradientes y fuentes o imágenes incrustadas) se ve igual que si abrieras el archivo directamente. Un XML realmente roto, a diferencia de un simple ancho o alto ausente, seguirá fallando porque el navegador no puede interpretarlo como documento.

¿Cuándo se usa esto?

Úsala para convertir un logo o un icono en PNG para algún sitio que no acepta SVG, como un CMS antiguo, una firma de correo o un motor de videojuegos. También puedes exportar el mismo icono en 1x, 2x y 4x para distintas densidades de pantalla, algo útil para iconos de aplicaciones o favicons que necesitan varios PNG de tamaño fijo. Para más sobre los dos formatos de imagen y cuándo conviene cada uno, consulta la guía de formatos de imagen de MDN.