Transforma tus diseños vectoriales SVG en imágenes PNG de alta definición con un solo clic.
El 80% de los problemas al convertir SVG a PNG se originan en el archivo fuente, no en la herramienta. Antes de subir nada, pasa por esta lista:
Fuentes incrustadas o convertidas a trazados. Si tu SVG usa tipografías de Google Fonts, fuentes del sistema o familias personalizadas, y esas fuentes no están incrustadas en el archivo, el conversor las sustituirá por una fuente genérica. Solución: en tu editor vectorial (Illustrator, Figma, Inkscape), convierte todo el texto a trazados antes de exportar. El texto deja de ser editable, pero garantiza que se verá exactamente como diseñaste.
Elementos fuera del viewBox. Los SVG permiten que elementos visuales existan fuera del área visible definida por el atributo viewBox. En un navegador con scroll, podrías verlos; en un conversor PNG, simplemente se recortan. Revisa que todo lo que necesitas visible esté dentro del marco.
Capas ocultas. Algunos editores exportan SVG con capas marcadas como display: none o visibility: hidden. Estas capas no aparecen en el PNG, pero inflan el tamaño del archivo SVG sin razón. Elimínalas antes de exportar.
Imágenes rasterizadas embebidas. Si tu SVG contiene imágenes bitmap embebidas en base64 (común en exportaciones de Illustrator con «incrustar imágenes»), el peso del archivo puede multiplicarse por 10x. El PNG resultante tendrá la misma calidad que esas imágenes embebidas, no la calidad vectorial del resto del diseño.
Subir y descargar es la parte trivial. Las decisiones intermedias son las que determinan si el PNG sirve para su propósito.
Resolución: píxeles absolutos vs. densidad de píxeles. Algunas herramientas piden ancho y alto en píxeles. Otras piden DPI (puntos por pulgada). No son lo mismo. Si tu PNG es para web, los píxeles absolutos importan: un icono de 64×64 px se verá igual en cualquier monitor. Si es para impresión, necesitas DPI — un diseño A4 a 300 DPI requiere 2480×3508 píxeles.
Compresión PNG. PNG usa compresión lossless (sin pérdida), pero el nivel de compresión varía. Nivel 0 = sin compresión, archivo enorme. Nivel 9 = máxima compresión, archivo más pequeño pero más lento de generar. La diferencia de calidad visual es cero; solo afecta tamaño y velocidad. Un buen conversor usa compresión óptima sin pedirte que decidas.
Fondo transparente vs. opaco. Esta decisión parece menor hasta que subes un logo SVG con fondo transparente a una plataforma que lo convierte a JPEG — de repente, tu logo tiene un fondo blanco cuadrado que no pediste. Si sabes que el PNG se usará en un contexto que no soporta transparencia, elige fondo blanco o del color del destino desde el principio.
Escalar proporcionalmente. Si tu SVG mide 100×100 unidades y tú pides un PNG de 800×600, el contenido se estirará horizontalmente. La mayoría de conversores ofrecen un checkbox de «mantener proporción» — siempre activado. Si necesitas una dimensión específica que no coincide con la proporción original, primero ajusta el lienzo en tu editor vectorial.
El archivo PNG está descargado. Antes de usarlo en producción, confirma estos cinco aspectos:
Estos errores aparecen una y otra vez en foros de diseño y desarrollo. Conocerlos te ahorra reconvertir archivos repetidamente.
Error 1: Exportar desde Illustrator con «Usar artboards» desactivado. Cuando un documento tiene múltiples artboards y exportas sin la casilla activada, el SVG resultante contiene todos los artboards apilados. El conversor PNG renderiza todo como una sola imagen gigante y desordenada. Activa siempre «Usar artboards» y selecciona el artboard específico.
Error 2: SVG generado por código con viewBox incorrecto. Si generas SVG programáticamente (D3.js, React con SVG, herramientas de diagramas), el viewBox puede no coincidir con el contenido visible. El resultado: un PNG con mucho espacio vacío o contenido recortado. Inspecciona el SVG en un editor antes de convertir.
Error 3: Usar un SVG minificado que elimina atributos críticos. Las herramientas de minificación de SVG agresivas pueden eliminar atributos como xmlns, width, height o viewBox. Sin estos, el conversor no sabe cómo renderizar el archivo y produce resultados impredecibles. Si tu SVG fue procesado por un optimizador, verifica que el resultado se abre correctamente en un navegador antes de convertirlo.
Error 4: Confundir resolución de pantalla con resolución de impresión. Un PNG de 750×750 px se ve perfecto en pantalla pero se pixela en una impresión de 10cm a 300 DPI. Define siempre el destino del archivo ANTES de elegir la resolución de conversión.
No todo archivo vectorial debe terminar como PNG. Hay situaciones donde exportar SVG como PNG es contraproducente, y otras donde un formato rasterizado alternativo funciona mejor.
Usa PNG cuando: necesitas transparencia real (logos sobre fondos variables), la imagen contiene texto legible a tamaño reducido, el destino soporta PNG pero no SVG (algunas plataformas de email, herramientas de presentación offline), o la imagen se insertará en un documento PDF donde el vector no se renderiza correctamente.
Evita PNG y mantén SVG cuando: la imagen se mostrará en una página web moderna (todos los navegadores soportan SVG nativamente), necesitas escalabilidad sin pérdida (dashboard responsivo, iconos que cambian de tamaño), o el archivo se editará frecuentemente — cada cambio requiere reconvertir si ya pasaste a PNG.
Considera WebP en lugar de PNG cuando: el tamaño del archivo es prioritario (WebP con transparencia pesa entre un 25% y un 35% menos que PNG equivalente), y tu destino soporta WebP (navegadores modernos, WordPress 5.8+, la mayoría de CDNs).
Considera JPG cuando: no necesitas transparencia y la imagen es una ilustración compleja con muchos gradientes — JPG con compresión al 85% producirá un archivo significativamente más pequeño que PNG sin pérdida visible. Para este caso, la conversión de SVG a JPG en Pixes ofrece el control de calidad que necesitas.
Un SVG inflado produce un PNG inflado. Antes de convertir SVG a rasterizado, dedicar 30 segundos a optimizar el archivo fuente puede reducir el tamaño final del PNG entre un 10% y un 40%, dependiendo de la complejidad del diseño.
Las optimizaciones más efectivas para SVG pre-conversión:
opacity:0, grupos vacíos, definiciones Pixes incluye una herramienta de optimización SVG que procesa estos ajustes automáticamente. Usarla antes de la conversión es especialmente útil cuando trabajas con SVGs exportados de editores que priorizan la editabilidad sobre la eficiencia del archivo.
Cuando tienes 5, 20 o 200 archivos SVG que necesitan convertirse, hacerlo uno por uno es inaceptable. Un flujo de trabajo por lotes requiere consideraciones que no aplican a la conversión individual:
Consistencia de resolución. Todos los archivos del lote deben compartir la misma configuración de resolución si se usarán juntos (un set de iconos, una serie de ilustraciones). Mezclar 128px y 256px en el mismo set de iconos produce resultados visuales incoherentes en la interfaz final.
Nomenclatura del archivo de salida. Un buen conversor por lotes preserva el nombre del archivo SVG original y cambia solo la extensión. Si la herramienta genera nombres genéricos como image_001.png, perderás tiempo renombrando manualmente.
Manejo de errores. En un lote de 50 archivos, estadísticamente uno o dos tendrán problemas — un SVG corrupto, un archivo que no es realmente SVG, un documento con dependencias externas. La herramienta debe reportar cuáles fallaron sin detener todo el proceso.