SVG o PNG: qué usar para logotipos, iconos e ilustraciones

Los diseñadores envían los logotipos en SVG, los sitios web piden PNG y algunos programas solo aceptan uno de los dos. Ambos son formatos de imagen, pero describen las imágenes de maneras completamente distintas, y eso decide cuál conviene para cada trabajo. Medimos cinco SVG de complejidad muy distinta frente a copias PNG creadas con nuestro propio conversor.

Formas frente a píxeles

Un archivo SVG es texto: una lista de formas como «un círculo aquí, de 3 unidades de diámetro, relleno de verde». El navegador o el programa dibuja esas formas desde cero al tamaño necesario, así que los bordes siempre son tan nítidos como permite la pantalla. Un PNG es una cuadrícula de píxeles guardada sin pérdida. Se ve perfecto a su propio tamaño y hay que estirarlo, y difuminarlo, para mostrarlo más grande.

Eso hace de SVG el formato natural para todo lo que está hecho de formas: logotipos, iconos, diagramas, gráficos, mapas. Las fotos están hechas de millones de píxeles ligeramente distintos, sin formas que describir, así que pertenecen a un formato de píxeles como JPEG, WebP o AVIF, como probamos en JPG, PNG, WebP o AVIF.

Los archivos de prueba

• Icono: una cámara del conjunto de código abierto Lucide, dos formas.
• Logotipo: el logotipo de Tooloat, tres formas.
• Bandera: la bandera de Brasil, 17 formas con las letras incluidas.
• Sello: el Gran Sello de los Estados Unidos, una ilustración detallada con 776 formas.
• Mapa del mundo: un mapa mudo del mundo con cada país como forma propia, 2316 en total.

La bandera, el sello y el mapa son archivos de dominio público de Wikimedia Commons. Cada SVG pasó por nuestro minificador de SVG con sus ajustes por defecto y se convirtió a PNG en cuatro tamaños con el conversor de SVG a PNG.

Pesos de los archivos

Comprimidos, el icono, el logotipo y la bandera pesaron menos incluso que un PNG de 64 píxeles, y de 50 a 250 veces menos que uno de 1024 píxeles, sirviendo a la vez a todos los tamaños de pantalla. Por eso los conjuntos de iconos y los logotipos se distribuyen en SVG.

El sello y el mapa muestran el límite. Un SVG crece con el número de formas, no con el tamaño al que se muestra. El sello sigue pesando menos como SVG comprimido que como PNG de 1024 píxeles, pero el mapa, con sus miles de costas detalladas, necesita 342 KB incluso comprimido, seis veces más que un PNG optimizado de 1024 píxeles. Si un dibujo complejo se muestra siempre a un solo tamaño, un PNG o un WebP sin pérdida puede ser la opción más ligera.

Nitidez

La diferencia de peso importa menos que lo que pasa cuando una imagen se muestra más grande de lo previsto: en la pantalla de alta densidad de un teléfono, cuando alguien hace zoom o cuando un logotipo hecho para un sitio web acaba en un póster.

PNG creado a 256 pxSVG

Un SVG nunca tiene este problema. Con un PNG, la solución es crearlo al tamaño más grande al que se vaya a mostrar, al menos el doble de su tamaño normal para pantallas nítidas, y aceptar un archivo más pesado.

Convertir un PNG en SVG

Si solo tienes un PNG de tu logotipo, un vectorizador puede reconstruirlo como formas. Vectorizamos tres PNG con nuestro conversor de PNG a SVG, usando sus ajustes predefinidos:

• El logotipo, 512 píxeles: 6 formas en un SVG de 1,5 KB que se ve como el original. Los colores planos y los bordes limpios son lo que mejor hace la vectorización.
• El sello, 1024 píxeles: 943 formas y 401 KB, más que el SVG original y con menos detalle en las líneas finas. Vectorizar una ilustración funciona, pero un original vectorial real siempre es mejor.
• La foto de un búho, 1000 píxeles: 7039 formas y 1,8 MB, catorce veces el peso de un JPEG de 129 KB de la misma foto.

Dónde no funciona SVG

• El correo. Muchas apps de correo, incluidas algunas de las más populares, no muestran imágenes SVG. Usa PNG en los correos.
• Las subidas. Las redes sociales, los marketplaces y muchos formularios solo aceptan JPEG, PNG o WebP.
• Los archivos no fiables. Un SVG puede contener scripts, así que muchos sitios rechazan las subidas de SVG por seguridad. Nuestro minificador elimina los scripts y los manejadores de eventos por defecto.
• El texto sin su fuente. El texto de un SVG se dibuja con las fuentes del dispositivo de quien lo ve, salvo que se haya convertido en formas, así que un logotipo puede verse distinto en otro lugar. Convierte las letras en contornos antes de compartir el archivo de un logotipo.

La respuesta habitual es conservar el SVG como archivo maestro y exportar PNG a partir de él donde se exija un formato de píxeles.

Cuál usar

Todas las herramientas usadas aquí funcionan en tu navegador: el conversor de SVG a PNG exporta cualquier tamaño, el minificador de SVG recorta los archivos y el conversor de PNG a SVG vectoriza logotipos y dibujos.