Conversor de SVG a PNG

Acerca de la Conversión de SVG a PNG

Convertir SVG a PNG transforma una descripción vectorial independiente de la resolución en una imagen raster de resolución fija. SVG usa XML para almacenar primitivas geométricas — trazados, círculos, gradientes, texto — que escalan nítidamente a cualquier tamaño; PNG almacena una rejilla finita de píxeles. El proceso de conversión se llama rasterización: el navegador analiza el marcado SVG, ejecuta cualquier CSS incrustado y búsqueda de fuentes, calcula la geometría a las dimensiones de salida elegidas y escribe los datos de píxeles resultantes en un contenedor PNG, JPEG o WebP. Esta herramienta ejecuta toda la canalización localmente vía la API Canvas, admite fondos transparentes, dimensiones personalizadas hasta 4096 píxeles y un deslizador de calidad para salidas con pérdida. Vea también nuestro PNG a SVG y WebP a PNG/JPG.

¿Por qué convertir SVG a PNG — no es mejor SVG?

SVG supera a PNG dondequiera que esté soportado: escala infinitamente, el archivo suele ser más pequeño para iconos y logotipos, puedes animar trazados con CSS, y los lectores de pantalla pueden extraer texto para accesibilidad. Pero el soporte de SVG falla en muchos lugares del mundo real. Los clientes de email (Outlook, Gmail en modo oscuro, Apple Mail móvil) frecuentemente eliminan adjuntos SVG o bloquean SVG en línea completamente. WebView antiguo de Android, apps de lectura Kindle, portapapeles de Word/PowerPoint, subidas a redes sociales (Twitter/X, Instagram, LinkedIn), controladores de impresora y herramientas de diseño de productos como Etsy o Printful exigen entrada raster. Convierte a PNG siempre que cruces a cualquiera de esos entornos — conserva el SVG maestro para todo lo que lo soporte.

¿Cómo maneja PNG la transparencia comparado con JPEG y WebP?

PNG-24 admite un canal alfa de 8 bits, permitiendo 256 niveles de transparencia por píxel — perfecto para logotipos, iconos y elementos de UI que deben mezclarse sobre fondos arbitrarios. JPEG no admite transparencia en absoluto; cualquier píxel SVG transparente se convierte en el color de fondo que especificaste, normalmente blanco. WebP admite el mismo alfa de 8 bits que PNG pero típicamente con archivos 25-50% más pequeños gracias a su algoritmo de compresión más nuevo. Para el raster transparente más pequeño, elige WebP si tus espectadores usan navegadores modernos (Chrome 32+, Safari 16+, Firefox 65+); para máxima compatibilidad (incluyendo clientes de email antiguos y software de diseño), elige PNG. Nunca uses JPEG para gráficos con regiones transparentes a menos que específicamente quieras un fondo coloreado.

¿A qué resolución debo exportar mi SVG?

Iguala tu pantalla objetivo más grande. Para héroes web en pantallas Retina/HiDPI, renderiza a 2x o 3x el tamaño en píxeles CSS: un héroe de 600px necesita un PNG de 1800px para mantenerse nítido en un iPhone 3x. Para iconos de app, sigue las guías de plataforma: iOS requiere maestro de 1024px, Android 512px, los favicons suelen ser multi-tamaño 16/32/48/180/192/512px. Para impresión, multiplica pulgadas por 300 DPI: un logotipo de 4 pulgadas impreso a 300 DPI necesita un PNG de 1200px. Para emoji de Slack y stickers de Discord, PNG de 256px es el tope. Cuando dudes, elige el tamaño más grande — reducir es barato, pero ampliar un PNG demasiado pequeño introduce desenfoque que ningún software puede arreglar.

¿Por qué mi SVG con fuentes incrustadas se renderiza con el texto equivocado?

Los SVG referencian fuentes por nombre de familia (font-family="Helvetica") en lugar de incrustar datos de fuente. Durante la rasterización el navegador busca Helvetica en tu sistema; si falta, el navegador sustituye una alternativa (a menudo Times o DejaVu Sans), y el PNG rasterizado deja grabada la fuente equivocada. Soluciones en orden de fiabilidad: (1) convierte el texto a trazados en tu editor SVG antes de exportar desde Illustrator o Inkscape — cada glifo se convierte en geometría vectorial independiente de las fuentes instaladas; (2) incrusta la fuente con @font-face dentro del SVG; (3) asegura que la misma fuente esté instalada en el sistema que hace la conversión. La conversión a trazado es el estándar de oro para distribución porque el PNG se verá idéntico en cada dispositivo.

¿Puedo convertir cientos de SVG a PNG en lote?

Para conversiones una por una, esta herramienta de navegador es lo suficientemente rápida — cada renderizado toma menos de un segundo. Para cientos o miles de SVG (bibliotecas de iconos, tokens de sistemas de diseño), usa un enfoque de línea de comandos: Inkscape expone 'inkscape --export-type=png --export-width=512 icon.svg' que se programa en un bucle for de Bash; 'magick icon.svg icon.png' de ImageMagick es aún más simple pero su renderizador SVG es más débil en documentos complejos. Para canalizaciones Node.js, la biblioteca 'sharp' es el estándar de producción — usa librsvg debajo y es significativamente más rápida que Chrome sin cabeza. Los sistemas de diseño modernos usan plugins de Storybook o Style Dictionary para regenerar fallbacks raster cada compilación.

¿Por qué mi PNG exportado tiene bordes dentados o curvas pixeladas?

El aliasing ocurre cuando renderizas a resolución demasiado baja — el trazado matemático de la curva se cuantiza a una rejilla de píxeles gruesa, produciendo artefactos visibles de escalera. Soluciones: (1) exporta a 2x o 3x el tamaño de pantalla objetivo para dar al navegador más píxeles para antialias; (2) asegura que tu SVG tenga 'shape-rendering="geometricPrecision"' o dependa del 'auto' predeterminado en lugar de 'crispEdges' que deliberadamente desactiva el antialiasing; (3) verifica que ningún trazo esté establecido a 1px en un límite de píxel no entero, lo que causa renderizado de medio píxel y desenfoque visual. Para salida perfecta al píxel, alinea la geometría SVG a coordenadas enteras en tu herramienta de diseño antes de exportar.