SVG a PNG

¿Cómo funciona la conversión SVG a PNG en el navegador?

SVG es un formato vectorial: el gráfico se almacena como descripción matemática (paths, círculos, polígonos, colores), no como cuadrícula de píxeles. PNG, en cambio, almacena cada píxel explícitamente. Durante la conversión, el navegador debe renderizar el SVG a un tamaño de píxeles concreto — el proceso de rasterización.

La herramienta usa la Canvas API, un estándar web nativamente disponible en cualquier navegador evergreen. Tres pasos:

SVG (markup de texto)
    ↓
[1] Parse viewport: leer width/height o viewBox
    ↓
[2] Decodificación imagen navegador: cargar SVG vía Blob URL en <img>
    ↓
[3] Render canvas: drawImage(svg, 0, 0, targetW, targetH)
    ↓
[4] toBlob('image/png'): codificar datos de píxel como PNG
    ↓
PNG (1×, 2×, 3× o ancho propio)

La conversión de vector a raster es sin pérdida siempre que la resolución objetivo sea ≥ que el menor tamaño de detalle visible. Para líneas muy finas en el SVG puede ayudar elegir un DPI más alto.

Exportación Multi-DPI — ¿por qué @1x, @2x, @3x en un clic?

Los iconos de app y Asset Catalogs en iOS y Android siguen una convención fija:

• @1x — el tamaño nominal (p. ej. 60×60 px para un slot de icono iOS)
• @2x — pantalla Retina, doble densidad de píxeles (120×120 px)
• @3x — móvil alta DPI como iPhone Pro Max (180×180 px)

Quien extrae iconos a partir de SVG tradicionalmente necesitaba tres pasos de exportación separados con tres tamaños distintos. Es sobrecarga de flujo de trabajo — sobre todo si tiene un set completo de assets para varios iconos.

El botón Multi-DPI genera de cada SVG los tres PNG en un clic, correctamente nombrados con sufijos de App Store:

hero.svg → [email protected] + [email protected] + [email protected]

En el ZIP encontrará los tres archivos directamente listos para importar en los Asset Catalogs de Xcode, las carpetas Android drawable-*dpi y los plugins de assets de Figma.

Preservación de alfa — ¿qué significa técnicamente?

Muchas herramientas prometen «fondos transparentes» y entregan PNG que, sin embargo, en Photoshop o Figma muestran un borde blanco o gris. Eso ocurre cuando el rasterizador rellena el canvas con un color antes de renderizar (p. ej. para compatibilidad con JPG) o cuando los valores alfa se redondean al codificar.

Esta herramienta arranca el canvas en su estado por defecto: cada píxel tiene desde el principio alfa 0 (completamente transparente). Cuando pone el fondo en «Transparente», la superficie no se prerellena — la ruta de código termina antes de llamar a fillRect(). Solo entonces el SVG dibuja sus paths. Los píxeles que ningún elemento SVG toca conservan su valor alfa 0; los píxeles con bordes con antialiasing conservan exactamente sus valores alfa intermedios.

El resultado se puede verificar:

• En Photoshop/Affinity Photo, el patrón de ajedrez muestra los píxeles transparentes.
• En Figma, la superficie del frame bajo la imagen es visible.
• En el navegador, se reconoce colocando el PNG sobre un <div> con color.

Con «Blanco» o «Color propio», la superficie se rellena de forma deliberada — útil para impresión, adjuntos de correo electrónico o maquetas sobre fondos coloreados.

¿Cuándo transparente, cuándo blanco, cuándo color propio?

Elegir transparente cuando:

• el PNG va sobre un fondo coloreado (web, app, juegos de cartas, imágenes OG)
• el icono debe seguir siendo visible en un diseño en modo oscuro
• después retocará la imagen en Photoshop y necesita un borde suave

Elegir blanco cuando:

• el PNG va a papel impreso
• se envía como adjunto de correo electrónico, donde Outlook 2010+ a veces renderiza la transparencia como fondo negro
• va a una diapositiva en una presentación de Office

Elegir color propio cuando:

• un fondo de marca es obligatorio (logo sobre color corporativo)
• el PNG se mostrará sobre un color de fondo conocido de la página objetivo y los bordes con antialiasing deben coincidir limpiamente
• desea simular negativos fotográficos o fondos de escritorio

La vista previa en vivo muestra el asset sobre fondo claro y oscuro — así verá antes de la descarga si los bordes con antialiasing del SVG encajan con su contexto objetivo.

¿Qué distingue esta herramienta de convertidores en línea?

La mayoría de los convertidores SVG-a-PNG de acceso libre siguen un esquema similar: subida de archivo → procesamiento en servidor → descarga. Ese modelo tiene tres desventajas:

1. Privacidad: el SVG abandona su ordenador. En el caso de logos, assets de marca, diseños internos o material de clientes, es un problema real.
2. Límites de archivos: el plan gratuito suele terminar en 25–100 archivos. Quien quiera convertir 80 iconos para una carpeta Android-Drawable tiene que comprar premium o trabajar por tandas.
3. DPI única: apenas hay un convertidor que haga 1×+2×+3× en un solo paso — todos obligan a varias pasadas.

Esta herramienta resuelve los tres puntos de otra forma:

• 100 % en el cliente — el archivo permanece en la pestaña, verificable en el panel de red.
• Sin límite de archivos — el único límite es la memoria de su navegador.
• Multi-DPI en un clic — el esquema de App Store se genera automáticamente con sufijos correctos.

¿Qué lagunas asumidas tiene esta herramienta?

Construimos un convertidor SVG-a-PNG, no una herramienta vectorial todo-en-uno. Lo que deliberadamente queda fuera:

• Optimización del SVG antes de la exportación (simplificación de paths, limpieza, eliminación de metadatos) — corresponde a nuestra herramienta optimizadora de SVG separada, que funciona de forma complementaria.
• Salida múltiple JPG/WebP/AVIF — la página mantiene el alcance limitado a PNG. Para otros formatos existe bild-format-konverter.
• Conversión de animaciones a APNG/WebP animado — la Canvas API solo renderiza el fotograma inicial; los SVG animados (SMIL, CSS) quedan fuera del alcance.
• Funciones de edición — sin cambio de color, sin edición de paths, sin reorganización del layout. Eso es terreno del software de edición de imágenes.
• API de servidor o conversor masivo por URL — rompería la promesa de 100 % en el cliente.
• Inicio de sesión o guardado en la nube — la herramienta no guarda nada. Si cierra la pestaña, el resultado se pierde.

La herramienta hace una cosa bien y dice claramente dónde está el límite.

¿Qué herramientas de imagen están relacionadas?

Otras herramientas del ecosistema kittokit que encajan con flujos SVG:

• Optimizar SVG — limpia los paths del SVG y elimina metadatos antes de la exportación a PNG.
• Comprimir PNG — reduce después el PNG generado, sin pérdida o con pérdida.
• Convertir formato de imagen — PNG a WebP o AVIF para entrega web; ambos, a calidad comparable, son más pequeños que PNG.