Problemas de transparencia de SVG a PNG
Esta guía se centra en diagnosticar resultados. Para convertir, consulta SVG a PNG con fondo transparente.
Blanco visible no siempre significa pérdida de transparencia
Abre el PNG en un editor que muestre transparencia o colócalo sobre un fondo de color. El visor puede mostrar blanco detrás de píxeles transparentes. Si el blanco forma parte de la imagen, busca rectángulos opacos, formas rellenas o imágenes incrustadas en el SVG.
SVG a PNG no elimina esos elementos. Edita el SVG original cuando puedas. Fondo transparente es otra operación para recortar la imagen rasterizada y requiere revisar el resultado.
No hay interruptor de transparencia
El convertidor recibe un SVG y ofrece ancho, alto y compresión PNG. Puede conservar áreas ya transparentes sin casillas Preserve Transparency o Alpha Channel. No hay borrador de color ni selector PNG-8/PNG-24.
Revisa bordes y elementos ausentes
| Síntoma | Qué comprobar |
|---|---|
| Curvas dentadas | Dimensiones de salida y resolución de las imágenes incrustadas |
| Halo blanco | Trazos, sombras y píxeles del original; aumentar compresión no lo elimina |
| Letras diferentes | Disponibilidad de fuentes; convierte texto importante en trazados si hace falta |
| Gráficos o estilos ausentes | Imágenes enlazadas y CSS externo; prepara un SVG autónomo |
| Sombras o máscaras diferentes | Compara los efectos y simplifica los incompatibles en el editor original |
Casos Especiales
Comprueba cada efecto en el PNG: no todos los renderizadores SVG producen los mismos píxeles. Una foto incrustada conserva su fondo opaco hasta editar esa imagen. La opacidad de un trazado no elimina un rectángulo blanco debajo.
SVG con Imágenes Raster Incrustadas
Si el SVG contiene imágenes raster:
- Las partes raster mantienen la transparencia original
- Las partes vectoriales se convierten normalmente
- Verificar que las imágenes incrustadas tienen transparencia
Efectos de Transparencia Complejos
Para SVGs con:
- Efectos de desenfoque
- Sombras paralelas
- Modos de mezcla
Estos pueden convertirse de forma diferente. Probar y ajustar según sea necesario.
Elementos Semi-Transparentes
SVGs con valores de opacidad:
- Compara la opacidad renderizada con el SVG original.
- Puede aumentar el tamaño del archivo
- Verificar la precisión visual después de la conversión
Probando la Transparencia
Haz estas comprobaciones sobre el PNG descargado. Los cuadros dibujados en el original son píxeles; los del visor son una ayuda visual. Compara al menos dos fondos. El ejemplo HTML corresponde a tu propia página de prueba.
Método de Prueba Rápida
- Abrir el PNG en un editor de imágenes
- Buscar el fondo de tablero de ajedrez (transparente)
- Agregar una capa de color detrás
- Verificar que el gráfico se ve correcto
Prueba en Navegador
<div style="background: linear-gradient(45deg, #333, #666)">
<img src="your-graphic.png" alt="Prueba de transparencia">
</div>
Comprobar que no aparece ninguna caja blanca.
Optimizando PNG Transparente
Empieza por las dimensiones necesarias. La compresión PNG sin pérdida cambia el esfuerzo de codificación, no los píxeles transparentes. Reducir la paleta en otro editor puede ahorrar bytes y alterar degradados; redimensionar elimina o remuestrea píxeles.
Guarda una copia original, cambia un ajuste a la vez y compara las descargas sobre fondos claros y oscuros. No hay un ahorro fijo del 20–50% o 40–80% para todos los gráficos. Si el destino acepta WebP, compara una exportación WebP aparte.
Cambia una cosa a la vez
Guarda el SVG y modifica solo una propiedad o dimensión antes de comparar sobre fondos claros y oscuros. Los campos admiten hasta 8192 px por lado. La compresión PNG cambia el esfuerzo de codificación, no la fuerza del alfa ni la calidad.
Revisa dimensiones y márgenes por separado del alfa
Un logo transparente puede verse mal si el dibujo ocupa poco espacio en el lienzo. Revisa el viewBox del SVG y la posición del dibujo en su editor. Ajusta el margen allí; los campos del conversor redimensionan dentro de un rectángulo y no editan márgenes del lienzo.
Para un recurso 2×, duplica las dimensiones de visualización manteniendo la proporción. Exporta y revisa cada tamaño. logo@2x.png es una convención de nombres, no una opción que cree detalle.
<img src="logo.png" srcset="logo@2x.png 2x" alt="Logo de la empresa">
Ambos archivos deben existir en tu web. Comprueba tamaño y fondo reales: el código no añade transparencia. Si hay halos en ambos tamaños, vuelve a revisar los bordes del original en lugar de ampliarlo repetidamente.
Preguntas frecuentes
¿Más compresión repara los bordes?
No. Revisa el dibujo original y las dimensiones.
¿Puedo corregir una carpeta completa aquí?
No. Se procesa un SVG por tarea. Corrige las fuentes en un editor y convierte cada archivo por separado.
Más herramientas para tus imágenes
Explora las herramientas de conversión, PDF y GIF de ImgConvert.
- Conversores de imágenes
- Herramientas PDF
- Herramientas GIF