¿Cuál es la diferencia entre SVG y PNG?

En la vida, estamos constantemente comparando unas cosas con otras. Se podría decir que tenemos un ojo crítico, pero también que tenemos un ojo para la calidad. Por ejemplo, las manzanas y las naranjas son comparables. Pueden entrar en la misma categoría de frutas, pero atraerán a personas diferentes en función de sus necesidades individuales.

Si busca un aporte de vitamina C, probablemente querrá una naranja en su plato. Sin embargo, si desea más fibra en su dieta, probablemente morderá una jugosa manzana. Esto no significa necesariamente que una sea mejor que la otra: todo se reduce a las preferencias.

Y lo mismo puede decirse de los formatos SVG frente a PNG.

En este artículo compararemos los dos formatos en lo que respecta al diseño web y digital.

Diferencias importantes entre SVG y PNG

¿Qué es un SVG?

SVG es un formato de archivo de imagen creado específicamente para diseñar gráficos bidimensionales vectoriales y vectoriales-raster para sitios web. SVG admite animación, transparencia, degradados y es fácilmente escalable sin perder calidad. SVG es también el formato de archivo vectorial más utilizado en la web.

Es importante señalar que en Vectornator, puede exportar su documento a un formato vectorial (SVG).

Vamos a desglosarlo:

• Escalable: Los SVG pueden redimensionarse sin dañar la calidad de la imagen, que será perfectamente nítida y clara, independientemente de su tamaño.
• Vectoriales: la mayoría de los archivos de imagen contienen píxeles. Los vectores son básicamente piezas de código que representan una imagen en tiempo real, convirtiéndola en los píxeles que se ven en la pantalla. Aunque muestran la misma imagen, lo que ocurre en segundo plano es muy diferente.
• Gráficos: aunque no sea tan conocido, SVG es un tipo de archivo de imagen como PNG, JPEG o GIF, sólo que es un poco diferente.

Los vectores son fragmentos de código escritos en XML que representan formas, líneas y colores para explicar con más detalle su funcionamiento. Aunque crear una imagen con nada más que código es totalmente posible, la mayoría de la gente utiliza un editor de gráficos vectoriales. También se pueden convertir PNG u otras imágenes de formato rasterizado a SVG, pero los resultados no siempre son buenos.

SVG también admite animaciones y transparencias, lo que lo convierte en un formato de archivo versátil. El único problema es que no se utiliza tanto como otros formatos más estándar, como PNG, por lo que es menos compatible con navegadores y dispositivos más antiguos. Además, no siempre es fácil cargarlo en su sitio web y conseguir que se muestre correctamente.

Ventajas e inconvenientes de SVG

He aquí por qué la gente disfruta con los SVG:

• Los SVG siempre tienen un aspecto de alta calidad porque nunca sufren pérdidas de definición. Un formato de imagen rasterizada puede empezar a tener un aspecto borroso aunque se redimensione ligeramente.
• Como los SVG no son más que código CSS, su tamaño de archivo es mínimo y está bien optimizado. También existen optimizadores de SVG para hacerlos aún más manejables. También es probable que su sitio se cargue un poco más rápido si los utiliza.
• Utilizar PNG tradicionales significa que las imágenes tienen que referenciarse como recursos externos. Todos esos PNG suponen un aumento de las peticiones 'http' y, por tanto, un sitio más lento. Los SVG no sólo tienen un tamaño de archivo menor, sino que el XML puede incrustarse en línea en su HTML, eliminando las peticiones 'http'.
• Los SVG se pueden animar y estilizar con código CSS, lo que incluye cambiar los colores. Las animaciones, por ejemplo, como las transformaciones y transiciones, que se utilizan en elementos HTML también se pueden utilizar en un elemento SVG. Sin embargo, hay casos en los que no se puede utilizar CSS para animar SVG, pero estos casos normalmente se pueden cubrir con JavaScript.
• Hay muchas formas de utilizar SVG en la web, como por ejemplo para mostrar logotipos. Los logotipos suelen estar basados en vectores, y con razón. Lo bueno es que podría definir un documento SVG como su logotipo y luego utilizarlo donde quiera sin preocuparse por el tamaño, la resolución o los tiempos de carga.
• Google indexa los SVG, lo cual es una buena noticia. El contenido SVG, ya sea en un archivo independiente o incrustado directamente en HTML, se indexa.

SVG tiene bastante que envidiar a PNG, desde ser escalable hasta tener un tamaño más reducido, pero no es mejor en todas las situaciones. Echemos un vistazo a las desventajas de los tipos de archivo vectoriales:

• Como ya se ha mencionado, aunque los SVG son compatibles con los principales navegadores modernos, pueden surgir problemas de compatibilidad al renderizarlos en navegadores y dispositivos más antiguos. Si una parte significativa de sus visitantes los utiliza, cambiar a SVG puede ser una mala idea.
• Los SVG son más difíciles de trabajar, ya que requieren programas especiales para crearlos y editarlos. Aunque se pueden diseñar sólo con XML, esto no siempre es factible.
• Los SVG no son tan fáciles de incrustar como los PNG. Si utilizas WordPress, no son compatibles con la biblioteca multimedia por defecto, por lo que necesitarías un plugin para cargarlos. Esto puede resultar más costoso a largo plazo.Los SVG deben ser renderizados por el navegador cuando se carga la página, por lo que utilizar un exceso o un archivo grande con muchos vectores puede sobrecargar el dispositivo.

Cuándo utilizar SVG en lugar de PNG

SVG no está pensado para las redes sociales. En cambio, SVG funciona mejor para el diseño web cuando se exportan iconos e ilustraciones para sitios web con diseño adaptable y objetos que deben mostrarse perfectamente en las pantallas. Utilice SVG cuando quiera imágenes transparentes que puedan ampliarse o comprimirse fácilmente, necesite animaciones ligeras o tenga previsto modificar una imagen pronto o con frecuencia.

Aunque definitivamente no debería convertir todos sus PNG a SVG, los gráficos vectoriales pueden ser un excelente sustituto de algunas imágenes. Las imágenes SVG también funcionan excepcionalmente para gráficos decorativos de sitios web, logotipos, iconos, gráficos y diagramas, y otras imágenes sencillas.

Aunque es posible convertir cualquier imagen a SVG, los navegadores no siempre manejan bien los vectores complejos con cientos de colores, ya que deben renderizarse cuando se carga la página.

Además, las ilustraciones SVG pueden ser hermosas, pero diseñar imágenes complejas requiere mucho tiempo, esfuerzo y dominio de herramientas de edición avanzadas. Si quieres crear tus imágenes vectoriales, hazlo de forma sencilla. Si tienes imágenes detalladas, quédate definitivamente con PNG.

Sin embargo, los SVG son mejores para el diseño web responsive y retina-ready debido a su escalabilidad y falta de degradación de la calidad. Además, admiten animación mientras que PNG no, y tipos de archivo raster que admiten animación como GIF y APNG.

En pocas palabras, para gráficos sencillos que puedan requerir animación y que tengan la garantía de escalar bien en cualquier tamaño de pantalla, utilice SVG.

¿Qué es un PNG?

PNG son las siglas de Portable Network Graphics (gráficos de red portátiles), y este nombre se refleja en lo extendido que está este tipo de archivo. Cualquiera que haya utilizado alguna vez un ordenador probablemente haya trabajado con PNG, ya que es el tipo de archivo más común en Internet junto con JPEG.

PNG es un tipo de archivo de imagen rasterizada, similar a los formatos de imagen más comunes. Esto significa que está formado por píxeles, los mismos pequeños puntos que aparecen en el monitor o la pantalla. Aunque esto facilita su visualización, también significa que la calidad de la imagen depende de la resolución, es decir, de cuántos píxeles tenga la imagen.

Por lo tanto, si amplía una imagen rasterizada, la calidad se verá afectada. A veces, el daño es insignificante, sobre todo cuando se aumenta la escala, y otras veces puede hacer que una imagen quede borrosa y completamente inutilizable. Esto se debe a que, al ampliarla, se pierde la calidad visual. Por este motivo, no debe aumentar la escala de un PNG más allá de su resolución prevista.

Aun así, la prevalencia de PNG lo convierte en un buen candidato para uso general. Este tipo de archivo admite transparencias, pero no animaciones.

Ventajas e inconvenientes de PNG

¿Por qué PNG es el formato de archivo de imagen más utilizado en Internet?

• Tanto si codificas desde cero como si utilizas el gestor multimedia de WordPress, mostrar imágenes PNG en tu sitio es una tarea sencilla.
• PNG utiliza una compresión sin pérdidas que le confiere un aspecto más nítido que los JPEG de compresión con pérdidas. Sin embargo, esto tiene un coste de tamaño de archivo mayor y no se puede comparar con las imágenes vectoriales. PNG utiliza una tecnología de compresión de imágenes mejor que GIF, lo que permite obtener archivos más pequeños que se descargan más rápidamente.
• Con mayores profundidades de bits (más colores), PNG permite imágenes de 1, 2, 4, 8, 16, 24 y 32 bits, rompiendo la barrera de los 8 bits.
• Las múltiples capas de imágenes PNG transparentes permiten una transparencia total del canal alfa, lo que facilita el traslado de imágenes de un fondo a otro.
• La corrección gamma integrada permite a los usuarios ver una imagen de la forma en que fue concebida seleccionando el nivel gamma adecuado para su monitor.

Por otro lado, el formato PNG se creó hace décadas y tiene varios defectos notables que no se han actualizado para la era moderna:

• Hay que planificar el diseño de gráficos rasterizados y asegurarse de que tienen el tamaño adecuado, o se puede perder el tiempo creando imágenes inservibles.
• Los PNG son muy grandes debido a su compresión sin pérdidas, por lo que pueden ralentizar su sitio web. Para solucionarlo es necesario comprimirlos aún más, lo que puede perjudicar la calidad.
• Hacer que las imágenes estén "listas para retina" es más tedioso con los PNG y es más probable que se vean borrosas.
• PNG no admite animaciones. Otros tipos de archivos rasterizados animados, como los GIF, pueden presentar graves problemas. Por ejemplo, los GIF son de muy baja calidad y sólo admiten 256 colores.

Cuándo utilizar PNG en lugar de SVG

Si utiliza imágenes de alta calidad, iconos detallados o necesita conservar la transparencia, SVG es la mejor opción. Utilícelo para pequeñas imágenes estáticas, logotipos, elementos de navegación, impresiones y otras imágenes con fondos transparentes y bordes robustos.

Si no está seguro de que una plataforma acepte el nuevo tipo de archivo SVG, menos compatible, lo mejor es utilizar PNG. Por ejemplo, no se pueden subir SVG a la mayoría de las redes sociales, ya que no son compatibles con este tipo de archivos, y como algunas plantillas de correo electrónico pueden tener problemas con los vectores, se recomienda utilizar PNG.

En general, los PNG funcionan bien con imágenes complejas y no animadas, especialmente las que requieren transparencia. Se pueden utilizar prácticamente en cualquier sitio, sólo que a veces un SVG encajaría mejor.

Recuerde que siempre puede utilizar PNG fallbacks si su SVG no se carga, por lo que normalmente es seguro optar por vectores, incluso si una parte significativa de su base de usuarios se ha quedado con dispositivos o navegadores más antiguos.

Cómo crear un archivo SVG

Para crear un archivo SVG, es necesario disponer de una versión vectorial del logotipo o la ilustración. El arte vectorial se define en términos de puntos 2D conectados por líneas y curvas para formar polígonos y otras formas con distintas propiedades.

Un gráfico vectorial se genera creando nodos y uniéndolos con líneas (conocidas como trazados) para construir formas. Además, el arte vectorial se utiliza para múltiples tipos de proyectos de diseño: diseño gráfico, ilustración y artes digitales.

El software vectorial puede utilizarse para la mayoría de las formas de diseño gráfico. Depende de usted, como diseñador, decidir qué tipo de software es el más adecuado para su proyecto de diseño concreto.

Conocemos un software vectorial estupendo. ¿Quizás hayas oído hablar de él? Vectornator es un software de diseño de uso gratuito y perfecto para crear gráficos vectoriales.

Estas son algunas de las principales áreas que utilizan el arte y los gráficos vectoriales para crear imágenes de alta calidad, imaginativas y escalables:

• La ilustración se ha convertido en una profesión muy demandada, y las marcas se vuelven locas por contenidos visuales auténticos que plasmen su personalidad y sus productos con belleza.
• El arte vectorial se utiliza para muchos elementos que intervienen en el diseño de un sitio web, como iconos, logotipos, ilustraciones y maquetación.
• Necesitará imágenes vectorizadas para imprimir carteles con éxito. El diseño de carteles puede utilizarse para arte y decoración, cine y marketing. ¿Necesita inspiración para el diseño de carteles? Eche un vistazo a estos carteles de películas de miedo que seguro que le quitarán el sueño.
• La mayoría de los diseñadores gráficos utilizan software vectorial para crear logotipos. ¿Por qué? Porque los gráficos vectoriales son fácilmente escalables, sencillos de editar y tienen montones de opciones de exportación.
• Al igual que los carteles y logotipos, los diseños vectoriales son perfectos para las vallas publicitarias, ya que éstas se imprimen a una escala enorme. Sus archivos vectoriales serán necesarios para mantener la calidad de la imagen.
• Los diseñadores de videojuegos utilizan todo tipo de software. Se trata de una forma de diseño muy compleja. El componente crítico de la obra de arte se genera utilizando arte vectorial. Este tipo de arte vectorial es especialmente popular últimamente con la creciente popularidad de los videojuegos y la realidad virtual.

También puedes ver este vídeo tutorial que hemos preparado sobre cómo crear fácilmente tus propios vectores utilizando nuestro software de primera categoría.

Cómo crear un archivo PNG de fondo transparente

Un fondo transparente para su PNG puede parecer un elemento de diseño tan básico. Pero, la mayoría de las veces, estas sencillas técnicas de diseño resultan ser algunas de las formas más valiosas y creativas de hacer que su imagen destaque.

Estos son algunos consejos de diseño para aprovechar al máximo el fondo transparente de su PNG:

• Utilizar un fondo transparente puede no ser la forma más habitual de centrar la atención en un área específica que quieras destacar. Sin embargo, si lo utilizas correctamente, un fondo PNG transparente te ayudará a poner en primer plano cualquier parte de tu imagen. También puedes utilizar esta técnica para guiar al espectador y dar más perspectiva a todo el diseño.
• La legibilidad es una de las partes esenciales de tu diseño, sobre todo si trabajas en marketing o relaciones públicas. Si necesitas incluir el nombre de la marca y un texto de una sola línea, puede que el diseño que quieras utilizar no sea el mejor para añadir texto encima, ya que puede resultar difícil leer las letras.
• ¿Quieres crear una imagen multidimensional? Entonces, añadir capas sobre capas te ayudará con ello. Utilizar un fondo transparente, en este caso, también te va a ayudar a añadir más profundidad. Esta técnica no se utiliza muy a menudo, por lo que te recomendamos que la utilices sólo cuando sea necesario y cuando tenga sentido teniendo en cuenta la intención de tu diseño.
• Puede exportar el logotipo de su empresa en PNG con un fondo transparente para diversas aplicaciones sin un fondo blanco o negro que lo obstruya, dándole un aspecto más limpio.

Si quieres que te expliquemos paso a paso cómo conseguir los consejos anteriores, puedes consultar nuestra sencilla guía aquí.

Resumen

SVG y PNG son dos formatos de archivo muy diferentes, por lo que elegir entre ellos es una elección importante.

Es mucho más probable que utilices PNG, ya que es un formato de archivo más sencillo, de más fácil acceso y más versátil. Las imágenes complejas, como las capturas de pantalla y las ilustraciones detalladas, deberían utilizar PNG.

Siempre que sea apropiado utilizar imágenes vectoriales, como gráficos decorativos y logotipos, utilice SVG, ya que responden mejor y tienen archivos más pequeños. Recuerde que los SVG sólo pueden utilizarse o almacenarse como vectores.

Entonces, ¿eres del equipo SVG o PNG? ¡Nos encantaría que nos lo dijeras!

Descargar Vectornator para empezar

Dale un lavado de cara a tus imágenes.

¿Eres del equipo SVG o PNG? ¡Nos encantaría que nos lo dijeras!