Convertir SVG a PNG
SVG y PNG sirven propositos fundamentalmente diferentes. SVG es un formato vectorial: define formas con coordenadas matemáticas que se renderizan perfectamente en cualquier nivel de zoom. PNG es un formato raster: una cuadricula de píxeles fija con un ancho y alto específicos. Convertir SVG a PNG significa elegir una resolución y congelar el arte vectorial en píxeles a ese tamaño.
Esta herramienta realiza la rasterización en tu navegador usando la API Canvas. Los archivos no salen de tu maquina.
Como funciona
- Suelta o selecciona un archivo SVG
- La herramienta carga el SVG en un elemento
<img> - Se crea un elemento Canvas en tus dimensiones objetivo
- El SVG se dibuja en el Canvas con
drawImage() - El Canvas exporta PNG con
toDataURL('image/png')
El motor de renderizado SVG del navegador hace todo el trabajo pesado: anti-aliasing, disposición de texto, interpolación de degradados y efectos de filtro.
Por qué los Desarrolladores Necesitan Versiones PNG de SVGs
SVG es el formato ideal para iconos, logos e ilustraciones en la web. Pero muchos contextos fuera del navegador rechazan SVG por completo:
Imagenes para redes sociales y Open Graph
Twitter, Facebook, LinkedIn y las tarjetas de vista previa de Slack requieren imagenes raster. Si configuras la metaetiqueta og:image a una URL SVG, la mayoría de las plataformas la ignoraran o mostraran una imagen rota.
Clientes de correo electronico
La mayoría de los clientes de correo eliminan las etiquetas SVG y bloquean las imagenes SVG por razones de seguridad. PNG es la opción segura para cabeceras de correo, firmas y graficos en línea.
Activos de aplicaciones nativas
iOS y Android requieren iconos raster en dimensiones específicas. Si tu logo fuente es SVG, necesitas exportaciones PNG en cada resolución objetivo.
Elección de Resolución
El SVG define un sistema de coordenadas viewBox pero no define el tamaño de salida. Al rasterizar, tu eliges las dimensiones en píxeles:
| Uso | Tamaño recomendado |
|---|---|
| Imagen de redes sociales | 1200 x 630 |
| Icono de aplicación… |