Cómo convertir SVG a PNG sin perder la transparencia

Los archivos SVG admiten transparencia de forma nativa, pero muchos convertidores rellenan el fondo de blanco. Aquí te explicamos cómo mantener tu canal alfa intacto.

Por qué se pierde la transparencia

Cuando se renderiza un SVG a un archivo PNG plano, el convertidor tiene que decidir qué colocar detrás de las áreas transparentes. Los convertidores de baja calidad usan el blanco por defecto. Los buenos preservan el canal alfa: los píxeles transparentes se mantienen transparentes en el PNG de salida.

Paso a paso: Preserva la transparencia

1. Revisa tu SVG de origen
Abre tu SVG en un editor de texto. Si ves elementos con opacity="0" o fill="none", tu SVG tiene transparencia. Si todos los elementos tienen un color de relleno sólido y un fondo <rect>, no la tiene.

2. Elige un convertidor que admita canal alfa
Los convertidores basados en navegador que usan Canvas API (como SVG2PNG) renderizan los SVG de forma correcta porque usan el renderizador de SVG nativo del navegador, el mismo que muestra los SVG con transparencia en las páginas web.

3. Selecciona PNG como formato de salida
PNG es el único formato ráster común que admite transparencia alfa completa de 8 bits. JPEG no admite transparencia en absoluto. WebP sí la admite, pero solo en su formato extendido más reciente.

4. No añadas un fondo
Algunos convertidores ofrecen añadir un fondo blanco o de color: rechaza esta opción. Lo que quieres es el renderizado crudo del SVG sobre un lienzo transparente.

Prueba tu resultado

Después de la conversión, abre el PNG en cualquier visor de imágenes. Si el fondo se muestra con un patrón de cuadros de ajedrez, la transparencia alfa se ha preservado. Si es de blanco sólido, el convertidor la ha eliminado.

Casos de uso comunes

Archivos de logotipos: Los logotipos casi siempre necesitan fondos transparentes para colocarlos en encabezados de distintos colores, tarjetas de visita y mercancía promocional
Iconos: Los iconos de apps, favicons y elementos de UI deben tener fondos transparentes para funcionar en cualquier interfaz
Marcas de agua: Los gráficos de superposición semitransparentes necesitan compatibilidad con el canal alfa en el PNG de salida
Pegatinas e insignias: Las insignias para ecommerce y las pegatinas promocionales dependen de la transparencia para sus formas no rectangulares

Preguntas frecuentes

¿Se pierde calidad al convertir SVG a PNG?

Para visualización en pantalla, no, siempre que lo renderices a una resolución suficientemente alta. Para impresión, exporta a un equivalente de 300 DPI (por ejemplo, 3000px para una impresión de 10 pulgadas).

¿Puedo convertir SVG a PNG con transparencia desde mi móvil?

Sí. Abre un convertidor basado en navegador en tu móvil, sube el SVG y descarga el PNG. Los navegadores móviles tienen la misma capacidad de renderizado de SVG que los de escritorio.