Convertidor de SVG a PNG (también convierte a JPG)
Convierte gratis un archivo SVG o un código SVG pegado directamente en una imagen PNG o JPG. Elige exactamente el tamaño de salida que necesitas: todo el proceso se realiza en tu propio navegador.
¿PNG o JPG? Cómo elegir el formato adecuado
| Formato | Características | Recomendado para |
|---|---|---|
| PNG | Compresión sin pérdida, de modo que la calidad no se degrada, y conserva intacto el fondo transparente. | Logotipos, iconos e ilustraciones que necesitan transparencia o bordes muy nítidos |
| JPG | Compresión con pérdida que mantiene el tamaño del archivo pequeño, aunque las áreas transparentes se rellenan con el color de fondo que elijas. | Imágenes con un fondo fotográfico, o cuando lo más importante es reducir el peso del archivo |
¿Qué es el convertidor de SVG a PNG?
El convertidor de SVG a PNG te permite transformar un archivo SVG (una imagen vectorial) o un código SVG que hayas pegado directamente en una imagen PNG o JPG, con el tamaño en píxeles que tú decidas. El formato SVG se usa muchísimo para iconos, logotipos e ilustraciones gracias a su nitidez a cualquier escala, pero existen muchas situaciones —al subir una imagen a un formulario web, o al mostrarla en una aplicación o en un entorno más antiguo que no admite SVG— en las que en cambio necesitas sí o sí un formato de imagen convencional. Esta herramienta resuelve esa diferencia en cuestión de segundos, sin necesidad de instalar ningún programa.
Toda la conversión se ejecuta completamente en el lado del cliente, es decir, dentro de tu propio navegador, usando la API Canvas incorporada en el propio navegador, por lo que tu archivo o código SVG nunca llega a enviarse a un servidor externo. Como el SVG es un formato vectorial por naturaleza, alguien tiene que decidir en algún momento el tamaño en píxeles que se usará al exportar; esta herramienta detecta automáticamente un valor inicial razonable a partir del propio SVG y, además, te permite ajustarlo con total libertad según lo que necesites.
Cómo usar la herramienta
- Carga tu SVG Elige un archivo (también puedes arrastrarlo y soltarlo) o pega directamente el código SVG en el cuadro correspondiente.
- Elige el formato de salida Selecciona PNG (conserva la transparencia) o JPG (rellena la transparencia con un color de fondo).
- Ajusta el tamaño de salida Escribe directamente el ancho y el alto, o utiliza los botones de escala (1x/2x/4x) para cambiar ambos valores a la vez.
- Convierte y descarga Haz clic en "Convertir" para ver una vista previa y descárgala de inmediato en tu dispositivo.
Consejos para aprovecharla mejor
- Si tu SVG no tiene atributos width/height ni un viewBox, el tamaño inicial de salida será de 512×512px por defecto. Puedes cambiarlo libremente al tamaño que necesites.
- Los botones de escala (1x/2x/4x) multiplican de una sola vez el tamaño detectado en tu SVG, lo que resulta muy práctico para exportar conjuntos de iconos en 2x/4x pensados para pantallas Retina (de alta densidad de píxeles).
- Elige PNG si necesitas conservar un fondo transparente. El formato JPG no tiene canal alfa, así que cualquier zona transparente se rellenará con el color de fondo que hayas elegido (blanco de forma predeterminada).
- Los degradados complejos y los efectos de filtro presentes en tu SVG se renderizan tal y como los interpreta tu navegador en ese momento. Si el SVG hace referencia a fuentes o imágenes externas, solo se mostrarán correctamente cuando el navegador pueda cargarlas sin problemas.
- Mantén activada la opción "Bloquear proporción" si quieres cambiar el ancho o el alto conservando las proporciones originales del diseño. Desactívala si prefieres definir el ancho y el alto de forma completamente independiente.
Casos de uso
Rasterizar iconos y logotipos
Convierte a PNG un icono SVG exportado desde una herramienta de diseño antes de incrustarlo en un sistema o aplicación que no admita SVG.
Subir archivos a formularios web
Muchos formularios y servicios en línea no aceptan archivos SVG: conviértelos antes a PNG o JPG para evitar ese problema.
Exportar varios tamaños para pantallas Retina
Usa los botones de escala para generar rápidamente versiones en 1x/2x/4x pensadas para un conjunto de iconos de alta densidad de píxeles.
Pegar en redes sociales o presentaciones
Convierte tu diseño a un formato de imagen convencional para las plataformas y presentaciones de diapositivas que no aceptan un SVG directamente.
Glosario
- SVG (Scalable Vector Graphics)
- Un formato de imagen vectorial que describe las formas mediante coordenadas y trazados escritos en texto XML. Nunca se ve dentado ni pixelado al ampliarlo o reducirlo de tamaño.
- Rasterizar
- El proceso de convertir una imagen vectorial en una cuadrícula de píxeles (una imagen de mapa de bits) con un tamaño concreto.
- viewBox
- Un atributo del SVG que define el rango de coordenadas que ocupa internamente su contenido. Se usa como valor de respaldo para las dimensiones cuando faltan los atributos width/height.
- Canal alfa
- La información de transparencia que se guarda para cada píxel de una imagen. El PNG la conserva, mientras que el JPG no tiene canal alfa, así que las áreas transparentes se rellenan con un color de fondo al convertir.
- Canvas API
- La interfaz estándar de JavaScript del navegador para dibujar y manipular imágenes. Esta herramienta rasteriza el SVG utilizando únicamente la Canvas API, sin necesidad de ninguna biblioteca adicional.
Preguntas frecuentes
A propósito — un SVG no es más que un archivo de texto escrito en XML
A diferencia del PNG o del JPG, que almacenan una imagen como una cuadrícula de píxeles, el SVG (Scalable Vector Graphics, o gráficos vectoriales escalables) describe las formas mediante coordenadas y trazados matemáticos escritos en texto XML. Por eso puede ampliarse o reducirse de tamaño sin que aparezca nunca ese aspecto dentado tan característico de las imágenes de mapa de bits, y por eso también es posible abrir el archivo con un simple editor de texto y leer directamente su contenido. Esta forma de construir la imagen es precisamente la razón por la que el SVG se ha convertido en el formato preferido para logotipos e iconos que necesitan verse nítidos en muchísimos tamaños diferentes, desde un favicon diminuto hasta un cartel enorme.
El SVG no tiene ningún concepto inherente de "resolución": se guarda de forma puramente vectorial, como una receta matemática para dibujar formas. Por eso, cada vez que lo conviertes a un formato convencional basado en píxeles, como PNG o JPG, alguien tiene que decidir con qué dimensiones en píxeles se va a renderizar el resultado final. Esa es exactamente la razón por la que esta herramienta te permite especificar el ancho y el alto: es una consecuencia directa e inevitable de lo que el SVG es por naturaleza, y no una limitación arbitraria de esta página.
En la práctica, son muchísimos los archivos SVG reales que omiten por completo los atributos width y height, o que los expresan en unidades relativas como porcentajes, pensados para adaptarse al contenedor donde se inserten. Para esos casos, la convención habitual entre las herramientas de conversión es recurrir al atributo viewBox, que define el rango de coordenadas que ocupa internamente el contenido del SVG. Esta herramienta sigue exactamente esa misma convención: cuando faltan los atributos width y height, utiliza el viewBox como sustituto razonable para calcular las dimensiones en píxeles del resultado.