Conoce la diferencia entre PNG y SVG y cuándo usar cada uno

Como diseñadores, usamos varios tipos diferentes de imágenes y formatos en nuestros proyectos. Cada uno con un propósito y uso diferente. Pero en algunos casos, puede ser un poco confuso saber cuál es el mejor para cual propósito.

Hoy conoceremos los formatos de archivo PNG y SVG específicamente. Ambos son tipos de formato de imagen de uso frecuente en diseño UI/UX para sitios web y aplicaciones. 

Pero, ¿cuándo debes usar PNG y cuándo debes usar SVG?

Aquí en Freepik Company, las plataformas de Flaticon y Stories te permiten descargar los iconos e ilustraciones como PNG o SVG. Si eres usuario de esas plataformas y a menudo te preguntas cuál formato elegir, esta guía te va a ayudar .

Echemos un vistazo a ambos tipos de archivos de imagen y las ventajas y desventajas de cada uno.

¿Qué es PNG?

PNG son las siglas del término Portable Network Graphics. Es un tipo de archivo de imagen ráster. Esto significa que todas las imágenes y gráficos PNG están formados por píxeles. Por lo tanto, no se pueden escalar a cualquier tamaño, así como se puede con los gráficos vectoriales.

PNG es un formato de archivo comúnmente utilizado para imágenes publicadas en la web. Tiende a tener una mejor resolución que JPEG y es mejor para el diseño digital. Es el tipo de archivo elegido para logotipos e ilustraciones con fondo transparente.

Evaluemos los pros y los contras del uso de PNG tanto en diseño digital como impreso.

Pros:

• Es compatible con fondos transparentes.
• Funciona para agregar logotipos recortados a cualquier tipo de diseño: impresión, digital y web.
• Mejor calidad que JPEG para soporte digital.

Contras:

• Cuando te acercas al gráfico, este se pixela.
• En el diseño responsive, el tamaño se mantiene igual, tanto en el escritorio como en el dispositivo móvil.
• No lleva capas.
• No es fácil de editar.
• No es el tipo de archivo adecuado para imágenes en diseño de impresión.

¿Qué es el SVG?

SVG son las siglas del término Scalable Vector Graphic. Es un tipo de archivo de imagen vectorial. Todas las imágenes SVG son escalables a cualquier tamaño sin perder resolución.

La principal diferencia entre SVG y PNG es que SVG se puede animar y escalar a todo tamaño. Otra es que, como diseñador, puede cambiar los colores de una imagen SVG mucho más fácilmente porque tiene capas.

Estos son los pros y los contras del uso de SVG para el diseño digital y de impresión.

Pros:

• Se puede animar.
• Tiene capas editables.
• Es responsive para la web, lo que significa que el tamaño del gráfico cambia según el tamaño de la pantalla.
• Se puede personalizar con CSS.

Contras:

• No es el formato adecuado para fotografías.
• Los navegadores y aplicaciones de correo electrónico más antiguos a veces no pueden leer SVG.
• No es apto para imprimir.

¿Cuándo usar PNG o SVG?

Ahora que hemos conocido los pros y los contras de cada formato, veamos cuándo debes usar cada uno. Usaremos algunos ejemplos de la vida real.

Supongamos que estás descargando un icono de Flaticon. ¿En qué formato lo descargas, SVG o PNG?

• Descárgalo como PNG si estás trabajando con un diseño digital que no es responsive o un diseño de impresión. Usa el tamaño más alto posible para mantenerlo a buena calidad.
• Descárgala como SVG si estás usando el icono para un diseño UI / UX para una aplicación o sitio web receptivo.

Ahora supongamos que quieres descargar una ilustración de Stories. Puedes descargar el diseño como una ilustración estática o como una animación.

Cómo descargar una ilustración estática:

• Descárgala como PNG si deseas que la ilustración no se pueda editar en términos de color y layers. Por ejemplo, para un diseño o impresión digital que no sea responsive.
• Descárgala como SVG si deseas poder cambiar los colores más tarde o los layers del diseño.

Como una animación:

• Una vez que hayas animado una ilustración en Stories, ya no tendras la opción de descargar como PNG.
• Descárgala cómo SVG (en una de las opciones ofrecidas) para usar en aplicaciones y diseños web.

Y ahora, imagina que estás diseñando un logotipo para un cliente. ¿Qué tipo de archivo le envías?

• La mejor opción es enviarles un PNG. Pueden usar esto en el encabezado de su sitio web, cualquier diseño digital o impreso. Envíales tres versiones; baja calidad, calidad media y alta calidad.

¿Qué sucede si está diseñando iconos personalizados para una aplicación o sitio web?

• Envíale al cliente archivos PNG y SVG. Es mejor darles todas las opciones para su marca.

¿Eres un colaborador de Flaticon?

• Sube todos tus diseños de iconos como SVG.

¿Estás diseñando un sitio web y no sabes qué elementos usar como PNG o SVG?

• Las fotos deben ser PNG.
• Los logotipos en los encabezados pueden ser PNG o SVG dependiendo de cómo esté configurado el encabezado. La mayoría de themes de sitios web tendrán un movimiento de contracción integrado para los encabezados. Si no, usa SVG.
• Las ilustraciones animadas deben ser SVG si necesitas que sean escalables. Usa GIF si quieres que permanezcan del mismo tamaño.
• Los iconos deben ser SVG si deseas que se escalen con los tamaños de pantalla y PNG si deseas que permanezcan del mismo tamaño.

Para terminar

Saber cuándo usar qué tipo de archivo es clave para crecer como diseñador en cualquier campo. No solo para ti, sino también para educar a tus clientes. Es por eso que aquí en Flaticon y Stories, te damos todas las opciones. Sabemos que estás trabajando en todo tipo de proyectos y queremos apoyarte de la mejor manera posible.

Ahora que conoces la diferencia entre PNG y SVG, ¿Te sientes más seguro al elegir?