Conversor de SVG a PNG

Cómo Convertir SVG a PNG

Pegue su código SVG en el área de entrada, opcionalmente ajuste el factor de escala y haga clic en "Convertir a PNG". La herramienta analiza el SVG, lo renderiza en un elemento Canvas de HTML5 y exporta el canvas como una imagen PNG. La vista previa muestra la imagen convertida y puede descargarla con un solo clic. Todo el proceso ocurre en su navegador. Su código SVG nunca se transmite a ningún servidor, lo que hace que esta herramienta sea segura para logos, iconos y activos de diseño propietarios.

El factor de escala controla la resolución de salida. Una escala de 1x produce un PNG en las dimensiones nativas del SVG según su viewBox o atributos de ancho/alto. Una escala de 2x duplica las dimensiones, lo cual es ideal para pantallas Retina y pantallas de alta densidad de píxeles. Escalas más altas producen imágenes más grandes y detalladas adecuadas para materiales impresos. El panel de estadísticas muestra las dimensiones de salida, el número de elementos SVG y el tamaño original del archivo SVG para que pueda evaluar la complejidad y tamaño de su gráfico.

SVG vs PNG: Cuándo Usar Cada Formato

SVG y PNG sirven para diferentes propósitos y entender cuándo usar cada uno es importante para el rendimiento web y la calidad visual. SVG es un formato vectorial que describe formas matemáticamente usando XML. Escala a cualquier tamaño sin perder calidad, lo que lo hace perfecto para logos, iconos, ilustraciones, gráficos y cualquier elemento gráfico que necesite verse nítido en múltiples tamaños. Los archivos SVG son frecuentemente más pequeños que las imágenes rasterizadas equivalentes para gráficos simples y pueden ser estilizados con CSS, animados con JavaScript y hechos accesibles con markup adecuado.

PNG es un formato rasterizado que almacena imágenes como una cuadrícula de píxeles. Soporta compresión sin pérdida y transparencia, lo que lo convierte en el formato estándar para capturas de pantalla, imágenes complejas con texto y gráficos que necesitan mostrarse en entornos que no soportan SVG. Las imágenes PNG tienen una resolución fija, por lo que pueden aparecer borrosas cuando se escalan más allá de sus dimensiones originales. Para fotografías, JPEG o WebP típicamente ofrecen mejor compresión, pero PNG sigue siendo la mejor opción cuando se requiere transparencia o renderizado de texto con precisión de píxel.

Cómo Funciona la Conversión con la API Canvas

El proceso de conversión usa el renderizador SVG integrado del navegador y la API Canvas de HTML5. Primero, el markup SVG se convierte a una URL de datos. Se crea un elemento Image con esta URL de datos como su fuente. Una vez que la imagen se carga, se dibuja en un elemento Canvas a la escala especificada. El método toDataURL('image/png') del Canvas exporta los píxeles renderizados como un PNG codificado en base64. Este enfoque aprovecha el motor de renderizado SVG nativo del navegador, que maneja características SVG complejas incluyendo degradados, filtros, texto, rutas de recorte y fuentes incrustadas.

Limitaciones y Consideraciones

Algunas características SVG pueden no convertirse perfectamente dependiendo del navegador. Los recursos externos referenciados en el SVG, como hojas de estilo enlazadas, fuentes cargadas vía @font-face o imágenes referenciadas por URL, pueden no estar disponibles durante el renderizado del canvas debido a restricciones de origen cruzado. Para mejores resultados, incruste todos los recursos directamente en el SVG usando estilos en línea, fuentes incrustadas y URIs de datos para imágenes. Los SVGs que dependen de animaciones CSS o interacciones JavaScript serán capturados como una instantánea estática en su estado inicial.

Preguntas Frecuentes

¿Por qué convertir SVG a PNG?

No todas las plataformas soportan SVG. Los clientes de correo electrónico, algunas plataformas de redes sociales y software antiguo requieren formatos rasterizados como PNG. PNG preserva la transparencia, lo que lo hace ideal para logos en fondos variados.

¿Esta herramienta es privada?

Sí. Todo se ejecuta en su navegador usando la API Canvas. Ningún dato se envía a ningún servidor. Su código SVG e imágenes convertidas permanecen completamente en su dispositivo.

¿Qué escala debería usar?

1x para pantallas estándar, 2x para pantallas Retina y de alta densidad, 3x para impresión. Escalas más altas producen archivos más grandes. Elija según dónde se usará el PNG.

¿Puedo convertir SVGs animados?

La herramienta captura una instantánea estática del estado inicial del SVG. Las animaciones SMIL y CSS no se preservan en la salida PNG. Para contenido animado, considere formatos GIF o de video.

¿Qué navegadores soportan esta herramienta?

Todos los navegadores modernos con soporte de la API Canvas: Chrome, Firefox, Safari, Edge y Opera tanto en escritorio como en móvil. Use la última versión para mejores resultados.