Hola, soy Maneshwar y actualmente trabajo en FreeDevTools, un hub gratuito y open source donde reunimos herramientas para desarrolladores, iconos SVG, atajos y TLDRs para evitar búsquedas innecesarias por la web.
Cuando creas una biblioteca de iconos SVG una funcionalidad clave es poder exportar esos iconos como PNG. El formato PNG sigue siendo el preferido por muchos desarrolladores y diseñadores por su compatibilidad universal y facilidad de uso en aplicaciones, documentos o herramientas de diseño. En lugar de depender de conversiones en servidor o editores gráficos externos, podemos realizar toda la conversión en el navegador gracias a Konva.js, un framework 2D sobre canvas que simplifica el renderizado, la transformación y la exportación de gráficos.
En nuestro proyecto implementamos dos funciones prácticas para la librería de iconos: copiar como PNG que coloca la versión PNG de un SVG directamente en el portapapeles y descargar como PNG que permite elegir una resolución entre 32px y 512px y descargar al instante.
Por qué Konva.js es una buena opción: además de poder usar la API de canvas nativa, Konva ofrece una abstracción orientada a desarrolladores con conceptos como Stage y Layer para estructurar dibujos, Image.fromURL para cargar imágenes y SVGs fácilmente y Stage.toDataURL para exportar a PNG o JPEG en una sola llamada. También maneja transformaciones integradas como escala, posición y rotación sin que tengas que escribir la matemática básica, lo que lo hace ideal para renderizar iconos con precisión y calidad.
Flujo básico que usamos: montamos un Stage oculto en pantalla, añadimos una Layer y cargamos el SVG como data URL. Konva trabaja con nodos de imagen, por eso convertimos el string SVG a data URL y usamos Image.fromURL para obtener el nodo imagen. Luego calculamos la relación de aspecto y ajustamos ancho y alto para que el icono ocupe aproximadamente el 80% del Stage, centrando la imagen y preservando la relación de aspecto para evitar distorsiones en iconos anchos o altos.
La exportación a PNG se logra con Stage.toDataURL pasando mimeType image/png, quality 1 y pixelRatio alto para soportar exportaciones HiDPI. Con la cadena base64 resultante podemos seguir dos rutas: para copiar al portapapeles convertimos a Blob, envolvemos en ClipboardItem y usamos navigator.clipboard.write, y para descargar creamos un enlace temporal con href apuntando al data URL y ejecutamos click sobre él.
Ventajas de este enfoque: 100% en cliente sin servidores ni latencia adicional, soporte para flujos de portapapeles y descarga, conservación de nitidez y transparencia y facilidad para extender (añadir fondos, formas o transformaciones). Konva es lo bastante flexible para aplicaciones de dibujo completas y lo bastante ligero para utilidades de exportación como la nuestra.
En Q2BSTUDIO somos una empresa de desarrollo de software especializada en aplicaciones a medida y software a medida, con experiencia en inteligencia artificial, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio y soluciones para ia para empresas incluyendo agentes IA y uso de power bi. Si necesitas crear o integrar funcionalidades similares de exportación de recursos gráficos en una aplicación empresarial puedes conocer nuestros servicios de desarrollo en servicios de desarrollo de aplicaciones y software a medida y si te interesan soluciones de IA para automatizar y mejorar procesos visita nuestras propuestas de inteligencia artificial para empresas.
Si quieres ver el ejemplo completo o contribuir, FreeDevTools está abierto y listo para que la comunidad lo mejore. Cualquier comentario o contribución es bienvenida para seguir simplificando flujos de trabajo y reducir la fricción al trabajar con iconos SVG y exportaciones PNG.