Del vector a los píxeles
El SVG describe una imagen mediante formas y trazados, y por eso se ve nítido a cualquier tamaño. Es perfecto para webs, pero muchos lugares no lo admiten: redes sociales, apps de mensajería, documentos de oficina, firmas de correo, fichas de tiendas de apps y muchos formularios piden una imagen normal.
Convertir a PNG transforma el dibujo en píxeles a un tamaño fijo y conserva el fondo transparente. Para que los iconos pequeños salgan nítidos, este conversor renderiza cualquier SVG cuyo lado más largo mida menos de 1024 píxeles a 1024 píxeles, y mantiene los dibujos más grandes a su tamaño declarado, hasta 8192 píxeles.
SVG frente a PNG: comparación rápida
| Característica | SVG | PNG |
|---|---|---|
| Nombre completo | Scalable Vector Graphics | Portable Network Graphics |
| Tipo | Imagen vectorial escrita en XML | Imagen rasterizada |
| Año de creación | 2001 | 1996 |
| Creado por | W3C | PNG Development Group (recomendación del W3C) |
| Compresión | Ninguna (texto plano, opcionalmente SVGZ con gzip) | Sin pérdida (DEFLATE) |
| Transparencia | Sí | Sí, canal alfa completo |
| Animación | Sí, con CSS o SMIL | Solo con la extensión APNG |
| Profundidad de color | Cualquier color, definido en código | Hasta 48 bits más alfa, o paleta de 8 bits |
| Ideal para | Logotipos, iconos e ilustraciones que deben escalar | Capturas, logotipos y gráficos con bordes nítidos |
| Compatibilidad | Todos los navegadores y editores de diseño; rechazado por muchos formularios de fotos | Universal: todos los navegadores, sistemas y editores |
| Tipo MIME | image/svg+xml | image/png |
Cómo convertir SVG a PNG
Paso 1: Elige el SVG
Suelta un archivo .svg exportado desde Figma, Illustrator, Inkscape o una biblioteca de iconos.
Paso 2: Mantén PNG como destino
PNG está preseleccionado. JPG y WebP también están disponibles si no necesitas transparencia.
Paso 3: Convierte
Tu navegador dibuja el SVG al tamaño calculado sobre un lienzo transparente y lo guarda como PNG.
Paso 4: Descarga
Usa el PNG en documentos, presentaciones, redes sociales o donde no se acepte SVG.
Cómo se renderiza el SVG
Tamaño tomado del archivo
Se usan los atributos width y height, o el viewBox si faltan.
Iconos pequeños ampliados
Los dibujos de menos de 1024 px en su lado más largo se renderizan a 1024 px para que los bordes sean nítidos.
Fondo transparente
Las zonas que el SVG no pinta siguen siendo transparentes en el PNG.
Renderizado por tu navegador
El mismo motor que muestra el SVG en una página web dibuja el PNG.
Cuándo necesitas un PNG en lugar de un SVG
Redes sociales y mensajería. Plataformas como Instagram, LinkedIn o WhatsApp no aceptan SVG.
Documentos de oficina. Las versiones antiguas de Word, PowerPoint y Google Slides manejan mejor el PNG.
Firmas de correo. La mayoría de clientes de correo bloquean o ignoran las imágenes SVG.
Iconos de apps y recursos de tiendas. Las tiendas y las herramientas de compilación suelen exigir PNG en tamaños concretos.
Conseguir el tamaño que quieres
Como el SVG no tiene una resolución fija, hay que elegir el tamaño del PNG. Este conversor lee el tamaño que el diseñador declaró en el archivo. Un icono de 24 por 24 se amplía a 1024 por 1024 para que sirva en tamaños grandes, mientras que una ilustración de 2000 píxeles de ancho conserva esos 2000 píxeles.
¿Necesitas un tamaño exacto, como 512 por 512 para un icono de app o 32 por 32 para un favicon? Convierte aquí y luego usa el redimensionador, o genera un juego completo de favicons con el generador de favicons, que reduce por etapas para obtener iconos pequeños nítidos.
Por qué un SVG puede verse distinto
Los navegadores renderizan los SVG en un modo seguro cuando se dibujan como imágenes. Los recursos externos se bloquean, así que un SVG que enlaza fuentes web o imágenes externas puede mostrar una fuente de reserva o imágenes que faltan. Convertir el texto en trazados en tu herramienta de diseño evita ese problema.
Los scripts y las funciones interactivas del SVG también se ignoran, y las animaciones CSS se capturan en su estado inicial. Filtros, degradados, máscaras y trazados de recorte funcionan igual que en una página web.
- Convierte el texto en trazados o incrusta las fuentes antes de exportar el SVG.
- Incrusta las imágenes rasterizadas como data URL en lugar de enlazarlas.
- Revisa el PNG por si faltan elementos cuando el SVG viene de la web.
Consejos para convertir SVG a PNG sin sorpresas
- Comprueba que el SVG tenga viewBox; indica al motor cómo escalar el dibujo.
- Elimina capas ocultas y mesas de trabajo sin usar antes de exportar desde tu herramienta de diseño.
- Para un fondo sólido, convierte a JPG, que rellena de blanco las zonas transparentes.
- Conserva el SVG como archivo maestro y genera PNG cada vez que necesites un tamaño nuevo.
Preguntas sobre la conversión de SVG a PNG
¿Qué tamaño tendrá mi PNG?
El declarado en el SVG, o 1024 píxeles en el lado más largo si el SVG es más pequeño. Los dibujos muy grandes se limitan a 8192 píxeles.
¿El fondo es transparente?
Sí. Todo lo que el SVG no pinta sigue siendo transparente en el PNG.
¿Por qué mi texto sale con otra fuente?
Un SVG dibujado como imagen no puede cargar fuentes web externas. Convierte el texto en trazados o incrusta la fuente antes de exportar el SVG.
¿Se ejecutan los scripts del SVG?
No. El SVG se renderiza como una imagen estática con los scripts desactivados, lo que además es más seguro.
¿Puedo elegir una resolución personalizada?
No directamente en este conversor. Convierte primero y luego usa el redimensionador para fijar unas dimensiones exactas.
¿Se sube el SVG?
No. Tu navegador renderiza y codifica la imagen localmente.