Cómo convertir SVG a PNG con el tamaño que necesites
·
El SVG es ideal para logotipos, pero muchos sitios solo aceptan PNG o JPG. Convertir es fácil cuando eliges bien el tamaño, y hay algunas trampas que conviene evitar. Esta guía explica la diferencia, cómo elegir el tamaño de salida y qué puede salir mal.
Por qué convertir un SVG a PNG
Las redes sociales, los clientes de correo, los editores de documentos, las herramientas de presentaciones, las tiendas de aplicaciones y muchos formularios de subida no aceptan SVG o lo muestran de forma inconsistente. Un PNG se ve igual en todas partes, y por eso los diseñadores entregan las dos versiones.
Comparativa entre SVG y PNG
| Característica | SVG | PNG |
|---|---|---|
| Tipo | Vectorial (formas y trazados) | Mapa de bits (píxeles) |
| Tamaño fijo | No, se escala sin desenfoque | Sí |
| Ideal para | Logotipos, iconos, ilustraciones | Capturas de pantalla, gráficos, resultado exacto |
| Peso | Muy bajo en gráficos sencillos | Crece con el tamaño en píxeles |
| Compatibilidad | Navegadores y herramientas de diseño | Casi en todas partes |
Ventajas del SVG
- Nítido a cualquier tamaño y normalmente muy ligero.
- Se puede modificar con CSS.
Ventajas del PNG
- Aceptado casi en todas partes y se ve igual en cualquier dispositivo.
- Fácil de colocar en documentos, correos y aplicaciones.
Conserva el SVG como archivo maestro y exporta PNG cuando los necesites. La guía de SVG o PNG entra en más detalle.
Cómo elegir el tamaño de salida
Un SVG no tiene una resolución fija, así que el tamaño en píxeles del PNG lo decides tú. Si es demasiado pequeño se verá borroso al ampliarlo, y si es demasiado grande el archivo pesará de más.
| Uso | Tamaño recomendado |
|---|---|
| Logotipo en una web | Unas 2 veces el ancho mostrado, p. ej. 400 px para un logotipo de 200 px |
| Diapositiva o documento | 1000–2000 px de ancho |
| Impresión | Unos 300 píxeles por pulgada al tamaño impreso |
Una opción de escala multiplica el tamaño original del SVG: 2x duplica los píxeles y 4x los cuadruplica.
Paso a paso: convertir de SVG a PNG
- 1Decide el tamaño con ayuda de la tabla anterior.
- 2Abre SVG a PNG y añade tus archivos SVG.
- 3Elige la escala, por ejemplo 2x para pantallas nítidas.
- 4Convierte y descarga. Las zonas transparentes se mantienen transparentes en el PNG.
- 5Revisa el resultado por si faltan fuentes o imágenes, y comprímelo con Comprimir imagen si pesa mucho.
- 6¿Necesitas un archivo de icono? Usa PNG a ICO o el Generador de favicons.
Fuentes, imágenes externas y otras sorpresas
Si un SVG usa una fuente que no está incrustada, o enlaza una imagen externa, el resultado puede verse distinto tras la conversión, porque los navegadores bloquean los recursos externos cuando un SVG se muestra como imagen independiente. Para ir sobre seguro, convierte el texto a contornos en tu programa de diseño antes de exportar, o incrusta las fuentes y las imágenes dentro del SVG.
Para conservar el fondo transparente, elige PNG. Si conviertes a JPG, la zona transparente se rellena con un color sólido, porque el JPG no puede ser transparente.
Errores frecuentes
- Exportar demasiado pequeño y luego ampliar el PNG, con el consiguiente desenfoque.
- Olvidar las fuentes, de modo que el texto sale con una tipografía de reemplazo.
- Elegir JPG para un logotipo, lo que pierde la transparencia y difumina los bordes.
- Borrar el SVG después de convertir. Consérvalo como archivo maestro.
Preguntas frecuentes
¿Se pierde calidad al convertir de SVG a PNG?
El PNG es una imagen de tamaño fijo, así que puede verse nítida a su propio tamaño, pero se desenfocará si la amplías. Elige un tamaño suficiente al convertir y conserva el SVG como archivo maestro.
¿Cómo conservo el fondo transparente?
Convierte a PNG, que admite transparencia. Un JPG rellenaría las zonas transparentes con un color sólido.
¿Con qué tamaño debo exportar un logotipo en PNG?
Aproximadamente el doble del ancho con el que se mostrará, para pantallas nítidas; por ejemplo, 400 píxeles para un logotipo que se muestra a 200 píxeles. Para documentos, lo habitual son entre 1000 y 2000 píxeles.
¿Por qué el texto se ve distinto en el PNG?
Puede que la fuente no esté incrustada en el SVG. Convierte el texto a contornos o incrusta la fuente antes de convertir.
¿Qué pasa si mi SVG no tiene ancho ni alto?
Si el archivo no declara tamaño ni viewBox, se usa un tamaño por defecto antes de aplicar la escala. Añade las dimensiones en tu programa de diseño para obtener resultados predecibles.