SVG, PNG, JPG o WebP: elige el archivo adecuado para entregar
Elige el formato para iconos web, ilustraciones transparentes y publicaciones en redes, y comprueba dimensiones, fondos y calidad antes de entregar.
Empieza por el lugar donde se usará la imagen
Un icono web, una ilustración de producto transparente y una publicación en redes pueden partir del mismo SVG y necesitar archivos de entrega distintos. Decide según la aplicación de destino, el tamaño de visualización y el fondo. Conserva un original editable antes de preparar las exportaciones: reducir el peso solo sirve si la imagen sigue viéndose bien.
En un sitio que administras, SVG suele funcionar bien para iconos sencillos. Un marketplace puede exigir PNG para una ilustración transparente. Una red social quizá acepte JPG pero rechace SVG. Revisa los requisitos de subida antes de exportar.
Elige el formato de entrega
| Formato | Útil para | Qué comprobar antes de entregar |
|---|---|---|
| SVG | Logotipos editables, iconos de interfaz e ilustraciones vectoriales | El destino acepta SVG y puede utilizar las imágenes y fuentes incluidas |
| PNG | Gráficos de mapa de bits nítidos con fondo transparente | Las dimensiones corresponden al tamaño de visualización y el peso respeta el límite de subida |
| JPG | Imágenes opacas y composiciones fotográficas | No hace falta transparencia y la compresión conserva los bordes importantes |
| WebP | Imágenes para la web cuando el sistema receptor admite WebP | La transparencia, la calidad y la compatibilidad se mantienen durante todo el proceso |
PNG utiliza compresión sin pérdida. JPG utiliza compresión con pérdida y no tiene canal alfa. WebP admite transparencia y codificación tanto con pérdida como sin ella, pero el nombre del formato no revela cómo lo codificó un exportador concreto. Compara las descargas reales al tamaño en que se mostrarán.
El tamaño vectorial y el tamaño en píxeles no son lo mismo
Un dibujo SVG formado por trazados puede escalarse sin ampliar una cuadrícula fija de píxeles. Un PNG contiene un número determinado de píxeles. Para una ilustración que se muestra a 240 × 160 píxeles CSS, una versión 1× mide 240 × 160 píxeles; una versión 2× mide 480 × 320, aunque se presenta al mismo tamaño CSS. Duplicar ancho y alto multiplica por cuatro la cantidad de píxeles y normalmente aumenta el peso.
Prepara esas dimensiones en el SVG antes de convertirlo, en vez de suponer que la descarga será automáticamente 2×. Estos conversores usan las dimensiones del SVG y limitan el lado más largo a 4096 píxeles. Mantén la coherencia con el viewBox para conservar las proporciones de la composición.
La extensión .svg no garantiza que todo su contenido sea vectorial. Un SVG puede incluir una imagen de mapa de bits mediante un elemento image. Ampliar ese contenedor no recupera los detalles que faltan en la imagen incluida.
Los vectores describen geometría; las exportaciones de mapa de bits necesitan suficientes píxeles para su tamaño final de visualización.
Exporta sin perder la transparencia
Abre el archivo descargado sobre fondos claros y oscuros. Una vista previa blanca no demuestra que la imagen sea opaca, y un patrón de cuadros puede estar dibujado dentro del propio archivo. Comprueba que el fondo se vea a través de las zonas vacías y que los bordes finos queden limpios.
Usa SVG a PNG cuando la prioridad sean la transparencia y los contornos nítidos. Prueba SVG a WebP si el destino lo acepta y verifica allí el resultado. JPG no conserva la transparencia: el conversor SVG a JPG de este sitio coloca las zonas transparentes sobre blanco.
Revisa las zonas vacías y los píxeles del contorno sobre fondos contrastados antes de entregar una imagen transparente.
Tres entregas habituales
Icono para una web: empieza con SVG si tu sitio lo admite. Revisa el icono a su tamaño real de 24 píxeles: un archivo escalable también puede contener detalles demasiado juntos o trazos que se ven desiguales en pequeño. Prepara una alternativa PNG si el sistema receptor la necesita.
Ilustración de producto transparente: exporta PNG con las dimensiones exigidas. Colócalo sobre el fondo real de la página de producto, incluido el modo oscuro si existe. Comprueba las sombras, los reflejos claros y los bordes semitransparentes, no solo el centro de la ilustración.
Publicación en redes: sigue los requisitos actuales de tamaño y formato de la plataforma. Define el fondo antes de subir una imagen opaca. Revisa también la vista previa publicada: el servicio puede recortar o volver a comprimir un archivo que se veía bien localmente.
Otros formatos tienen funciones concretas
Usa SVG a GIF cuando un sistema exija expresamente GIF. Esta herramienta genera una imagen estática, no una animación. Su paleta limitada puede alterar degradados y bordes suaves.
El exportador BMP crea una imagen de 24 bits y compone la transparencia sobre blanco. El exportador TIFF escribe píxeles RGBA; no realiza una conversión a CMYK ni garantiza un archivo listo para imprenta. ICO está pensado para iconos, pero este conversor guarda un solo tamaño seleccionado por archivo, no un conjunto de resoluciones. Sigue las especificaciones de la aplicación receptora.
Preguntas frecuentes sobre la exportación
¿Por qué se ve borroso el resultado?
Compara las dimensiones en píxeles con el tamaño de visualización y la densidad de la pantalla. Revisa también las imágenes de mapa de bits incluidas en el SVG. Vuelve a exportar el original a un tamaño adecuado: ampliar un PNG pequeño no añade detalle al archivo de origen.
¿Por qué aparece un halo claro?
Prueba el borde sobre un fondo oscuro. Puede haber píxeles blancos dentro del dibujo, o una exportación anterior puede haber combinado los bordes semitransparentes con blanco. Convertir ese JPG en PNG no recupera la transparencia perdida.
¿Por qué se mueve o se recorta el texto?
Confirma que la fuente necesaria esté disponible durante el renderizado. Para una pieza final fija, puedes convertir el texto en trazados con un editor vectorial adecuado, conservando un original con texto editable. Revisa el viewBox alrededor de letras, trazos y sombras: aumentar las dimensiones en píxeles no corrige una composición recortada.
Conserva el original y prepara la entrega
Guarda el SVG original separado de cada archivo de entrega. Si conviene, usa el compresor SVG y compara el resultado antes de sustituir nada. Pon nombres a las exportaciones que indiquen su tamaño y uso. La guía de trabajo con SVG explica cómo revisar un diseño y preparar su entrega final.