Convertidor de SVG a PNG, JPG y WebP

El formato SVG (Scalable Vector Graphics) es un estándar abierto del W3C basado en lenguaje XML que describe primitivas geométricas, contornos y curvas de Bézier continuas mediante formulaciones algebraicas exactas. A diferencia de las imágenes rasterizadas convencionales, un archivo SVG carece intrínsecamente de una cuadrícula fija de píxeles, lo que le permite escalarse hasta cualquier dimensión geométrica o resolución de pantalla sin pérdida alguna de nitidez ni pixelado. Sin embargo, multitud de plataformas digitales, gestores de contenido antiguos, redes sociales (como Instagram o LinkedIn para etiquetas de previsualización Open Graph) y suites ofimáticas restringen o rechazan directamente los archivos SVG por razones de seguridad (prevención de inyección de código malicioso mediante etiquetas script XML) o por falta de soporte nativo en sus motores gráficos. La conversión de SVG a formatos rasterizados exige transformar las ecuaciones vectoriales en una matriz finita de puntos o píxeles (proceso denominado rasterización). Al exportar a PNG (Portable Network Graphics), se obtiene una matriz de píxeles con soporte para canal alfa de 8 bits (256 niveles de transparencia gradual) y compresión sin pérdidas Deflate (zlib), ideal para logotipos, iconos e interfaces que requieren fondo transparente sobre cualquier superficie.

Para exportar un gráfico vectorial a formato rasterizado sin que aparezcan bordes borrosos o dentados en pantallas de alta densidad (pantallas Retina o paneles móviles de alta resolución), es fundamental dimensionar el lienzo de renderizado (canvas HTML5) en función del ratio de píxeles del dispositivo (devicePixelRatio) o de la densidad de impresión objetivo en puntos por pulgada (DPI):

Píxeles horizontales (W_px) = Ancho físico (pulgadas) × DPI = W_CSS × DevicePixelRatio
Píxeles verticales (H_px) = Alto físico (pulgadas) × DPI = H_CSS × DevicePixelRatio
Memoria de búfer descompromida (Bytes) = W_px × H_px × 4 (canales R, G, B y A de 8 bits)

Al publicar un sitio web corporativo o un proyecto digital, los gráficos vectoriales diseñados en Figma, Illustrator o Inkscape deben convertirse a imágenes rasterizadas para los metadatos de redes sociales y para avatares de aplicaciones.

Paso 1: Se establece el lienzo de destino en 800 × 800 píxeles manteniendo la proporción 1:1.
Paso 2: Se inicializa el contexto 2D del canvas limpiando el búfer para garantizar un fondo 100 % transparente en el canal alfa.
Paso 3: El motor del navegador interpreta el código XML del SVG y calcula las coordenadas de cada curva Bézier a escala doble.
Paso 4: Exportación a PNG: el algoritmo Deflate codifica las áreas transparentes contiguas con una compresión óptima, generando un archivo final ligero de 42 KB a partir de un lienzo de 2,56 MB en memoria.