Convertidor gratuito de SVG a PNG

SVG vs PNG

SVG (Scalable Vector Graphics) es un formato vectorial, marcado XML que describe formas matemáticamente. Un círculo en SVG es «dibuja un círculo de radio R en (x, y) con color de relleno F», instrucciones, no píxeles. El navegador renderiza las instrucciones al tamaño en que muestres el SVG, así que se mantiene nítido a 1x, 2x, 3x y más. PNG (Portable Network Graphics) es un formato raster, una cuadrícula fija de píxeles con valores de color fijos. PNG es lo que obtienes cuando «congelas» un SVG a una resolución específica. Convertir SVG a PNG se llama rasterización: elegir una cuadrícula de píxeles objetivo y renderizar las instrucciones vectoriales a ese tamaño fijo, tras lo cual el resultado es una imagen raster normal con todas las restricciones de tamaño que eso implica.

SVG fue desarrollado por el Grupo de Trabajo SVG del W3C fundado en 1998; SVG 1.0 se convirtió en Recomendación W3C el 4 de septiembre de 2001; SVG 1.1 siguió el 14 de enero de 2003 y fue la versión dominante durante la siguiente década; SVG 1.1 Segunda Edición llegó el 16 de agosto de 2011; SVG 2 alcanzó Candidate Recommendation el 4 de octubre de 2018 pero se ha estancado, sigue siendo CR en lugar de Recomendación completa a partir de 2026. PNG se convirtió en Recomendación W3C el 1 de octubre de 1996 e IETF RFC 2083 en marzo de 1997; el formato ha estado estable desde entonces.

¿Por qué convertir SVG a PNG?

• Clientes de correo abandonando el soporte SVG. Microsoft comenzó a retirar el soporte de SVG inline en Outlook para web y el nuevo Outlook para Windows a partir de septiembre de 2025, con el despliegue completado en octubre de 2025, los SVG inline ahora se renderizan como espacio en blanco. Los adjuntos SVG todavía funcionan, pero las plantillas de correo con estilo inline que antes incrustaban logos SVG necesitan fallbacks PNG. La interfaz web de Gmail renderiza bien el SVG; Apple Mail también; la ruptura mayor está del lado de Microsoft.
• Plataformas de redes sociales. Twitter/X, Instagram, Facebook, LinkedIn rechazan los uploads SVG directamente o los comprimen y recodifican a PNG/JPEG antes de mostrarlos. Pre-rasterizar a las dimensiones preferidas de la plataforma (1200x630 para Open Graph, 1080x1080 para Instagram) elude su autoconversión con pérdida.
• Generación de iconos de aplicaciones. Los iconos de app iOS deben ser PNG 1024x1024 (listado App Store) más varios tamaños específicos del dispositivo; los iconos adaptativos Android se renderizan en el launcher a 432x432 (108dp en xxxhdpi) con 512x512 para el listado Play Store; los iconos de manifiesto PWA típicamente necesitan 192x192 y 512x512. SVG no es aceptado por ninguno de estos.
• Impresión bajo demanda y prepress. Printful, Redbubble, Society6, RedPrint y la mayoría de los servicios de impresión bajo demanda requieren PNG (o PDF) a resoluciones específicas, normalmente 300 DPI para el tamaño físico objetivo. SVG no se acepta en sus flujos de upload.
• CMS y apps heredados. Instalaciones de WordPress antiguas, herramientas admin heredadas, editores de documentos anteriores al soporte SVG del navegador, dondequiera que «debe ser PNG» sea un requisito estricto.
• Emojis de Discord y similares. La subida de emojis personalizados de Discord requiere PNG (o GIF animado para emojis animados); tamaño recomendado 128x128 con un límite de tamaño de archivo de 256 KB. SVG no se acepta.

Cómo funciona la conversión en tu navegador

La técnica de rasterización mediante la API Canvas es sencilla pero tiene sutilezas. El pipeline estándar: cargar el SVG como elemento Image vía URL Blob (URL.createObjectURL(svgBlob)) o directamente como data URI (data:image/svg+xml;base64,...); esperar el evento onload; crear un canvas con las dimensiones de salida deseadas; llamar a ctx.drawImage(image, 0, 0, width, height) para rasterizar el SVG al tamaño elegido; exportar mediante canvas.toBlob('image/png'). Los renderizadores SVG de los navegadores manejan correctamente degradados, máscaras, filtros, texto y la mayor parte del conjunto de características SVG durante esta rasterización. Tres advertencias importan. Los recursos externos fallan bajo CORS: los SVG que referencian imágenes externas (<image href="https://other-domain.com/photo.jpg">) o fuentes externas pueden no cargarse si el servidor cross-origin no devuelve cabeceras CORS apropiadas, el canvas se vuelve «tainted» y toBlob lanza un SecurityError. Incrusta imágenes como data URI y fuentes como @font-face con src en data URI para evitarlo. Los SVG que contienen etiquetas <script> no se ejecutan cuando se cargan como Image, el decodificador de imagen del navegador despoja el contexto de scripting por seguridad. Las animaciones SMIL se aplanan a un solo fotograma en time=0; si el SVG depende de animación para su estado visual, el PNG rasterizado no lo capturará. Diferencias de píxeles entre navegadores: Chrome, Firefox y Safari producen salidas rasterizadas sutilmente diferentes para el mismo SVG debido a diferencias en sus respectivos renderizadores vectoriales; para iconos de producción, renderiza una vez y entrega el PNG en lugar de depender de la conversión por navegador en tiempo de ejecución.

Elegir la resolución de salida correcta

El SVG no tiene resolución inherente, la elección es tuya. Objetivos comunes: icono de listado iOS App Store 1024x1024; icono de listado Android Play Store 512x512 (con el icono adaptativo en el launcher a 432x432, diseñado dentro de una zona segura de 264x264); iconos de manifiesto PWA 192x192 y 512x512; favicon históricamente 16x16, 32x32, 48x48 (el favicon.ico moderno agrupa los tres tamaños; la mejor práctica moderna entrega icon.svg para navegadores que lo soportan más un fallback apple-touch-icon.png 192x192); tarjeta social Open Graph 1200x630; tarjeta Twitter 1200x675; cuadrado Instagram 1080x1080; emoji Discord 128x128; emoji Slack 128x128; impresión a 300 DPI requiere 3x la dimensión en pulgadas en píxeles (una impresión de logo de 4 pulgadas necesita 1200x1200). Para renderizado en pantalla con calidad Retina, apunta a 2x el tamaño mostrado, un icono mostrado de 100x100 debería exportarse a 200x200 para mantenerse nítido en pantallas Retina.

Cómo usar este convertidor

1. Proporciona el SVG. Suelta un archivo .svg en la zona de subida, o pega marcado SVG sin procesar en el área de texto. Ambas vías funcionan igual.
2. Establece las dimensiones de salida. Ancho y alto en píxeles; el toggle de bloqueo de relación de aspecto mantiene las proporciones cuando cambias una dimensión. Máximo 8192x8192 (el límite de tamaño canvas en la mayoría de navegadores modernos; algún hardware se limita a 4096 u 8192).
3. Elige un fondo. Transparente (predeterminado, preserva el canal alfa del SVG), blanco sólido, negro sólido, o cualquier color personalizado. Útil cuando el destino no soporta transparencia (algunos contextos de impresión heredados).
4. Convierte y descarga. El botón Convertir rasteriza el SVG al tamaño elegido y muestra la vista previa; Descargar guarda el PNG en tu dispositivo.

Alcance honesto: lo que esta herramienta hace y no hace

Esta herramienta rasteriza un único SVG a un único PNG al tamaño elegido. No genera el conjunto completo de iconos multitamaño que las tiendas de aplicaciones requieren (1024x1024 + 180x180 + 167x167 + 152x152 + 120x120 + 87x87 + 80x80 + 60x60 + 58x58 + 40x40 + 29x29 + 20x20 solo para iOS), para eso, usa una herramienta dedicada como RealFaviconGenerator o App Icon Generator. No optimiza el PNG resultante (usa la herramienta SVG Optimizer para limpiar primero el SVG fuente; para optimización PNG usa un compresor separado). No agrupa la salida favicon.ico multitamaño. No anima, los PNG exportados son de un solo fotograma, incluso si el SVG tenía animación SMIL. Para la generación por lotes de muchos tamaños desde un SVG, usa una CLI como sharp-cli (Node.js) o resvg-cli (Rust); la conversión por tamaño que hacen es la misma que esta herramienta, solo scriptable.

Privacidad: por qué el solo-navegador importa aquí

Los archivos SVG a menudo contienen activos de marca propietarios, logos en proceso, iconos de productos internos o archivos fuente proporcionados por diseñadores bajo NDA. Los servicios de conversión del lado servidor (CloudConvert, Online-Convert, Convertio) suben tu SVG a su infraestructura donde queda en logs. Esta herramienta ejecuta todo el pipeline de rasterización en tu navegador vía la API Canvas, verifícalo en la pestaña Red de DevTools mientras haces clic en Convertir, o desconecta la página (modo avión) después de que cargue y el convertidor sigue funcionando. Seguro para trabajo de marca no lanzado, iconos de productos internos, archivos de diseñador bajo NDA o cualquier SVG que no quieras que se copie en el disco duro de un extraño.

Preguntas frecuentes

¿Por qué convertir SVG a PNG en lugar de usar SVG directamente?

Para la mayoría de navegadores modernos, no tienes que hacerlo. SVG se renderiza nativamente en Chrome, Firefox, Safari, Edge y Opera, y es el formato correcto para la mayoría de usos web. La conversión es necesaria cuando el destino no soporta SVG: Microsoft retiró el SVG inline en Outlook web y el nuevo Outlook para Windows en septiembre-octubre de 2025; los iconos de app iOS / Android deben ser PNG; los servicios de impresión bajo demanda requieren PNG; la subida de emojis personalizados Discord y Slack en PNG; algunos CMS heredados todavía rechazan subidas SVG. Para esos contextos, rasterizas una vez y entregas el PNG.

¿A qué resolución debería exportar?

Coincide con el destino. Listado iOS App Store: 1024x1024. Play Store Android: 512x512 (icono adaptativo en el launcher: 432x432). Manifiesto PWA: 192 y 512. Tarjeta social Open Graph: 1200x630. Cuadrado Instagram: 1080x1080. Para pantallas Retina, exporta a 2x el tamaño CSS mostrado, un icono 100x100 debería ser PNG 200x200 para mantenerse nítido. Para impresión, 300 DPI significa 300 píxeles por pulgada mostrada (una impresión de logo de 4 pulgadas = PNG 1200x1200). El máximo aquí es 8192x8192, que es el límite canvas del navegador moderno.

¿Por qué a mi SVG le faltan partes después de la conversión?

Tres causas comunes. Recursos externos bloqueados por CORS: si el SVG referencia imágenes o fuentes en otro dominio que no devuelve cabeceras CORS apropiadas, el canvas se vuelve «tainted» y la exportación las descarta silenciosamente. Incrusta imágenes como data URI y fuentes como @font-face con src en data URI. Los scripts dentro del SVG no se ejecutan: las etiquetas <script> son despojadas por el modelo de seguridad del decodificador de imagen del navegador, lo que el script genere no aparecerá. Las animaciones SMIL se renderizan en time=0 (el fotograma inicial); el estado visual animado no se captura. Para SVG que dependen de JavaScript o animación, renderiza primero en un navegador real y haz una captura de pantalla, o usa Puppeteer headless.

¿Preserva la transparencia?

Sí cuando se selecciona «Transparente» como fondo, el PNG conserva el canal alfa del SVG, con los píxeles semitransparentes totalmente preservados. Elige un color sólido (blanco, negro, personalizado) cuando el destino no soporta transparencia o cuando necesitas un color de fondo específico horneado (algunos contextos de impresión heredados).

¿Puedo generar varios tamaños desde un SVG?

No con un solo clic, esta herramienta produce un único PNG por conversión. Para generación de conjuntos de iconos de app-store (la docena de tamaños que iOS y Android requieren), usa una herramienta dedicada como RealFaviconGenerator (web), App Icon Generator (web), o una CLI como sharp-cli (Node.js) o resvg-cli (Rust), la conversión por tamaño que realizan es la misma rasterización estilo Canvas, solo scriptada en muchos tamaños.

¿Se suben mis archivos SVG?

No. La rasterización se ejecuta enteramente en tu navegador vía la API Canvas. Tu SVG y el PNG resultante nunca cruzan la red, verifícalo en la pestaña Red de DevTools mientras haces clic en Convertir, o desconecta la página (modo avión) después de que cargue y el convertidor sigue funcionando. Seguro para trabajo de marca no lanzado, iconos de productos internos, archivos fuente de diseñador bajo NDA o cualquier SVG que no quieras que se copie en el disco duro de un extraño.

Herramientas relacionadas