Actualmente, en la World Wide Web, hay más formatos de archivos y extensiones de las que el usuario promedio puede comprender. En este artículo, aprenderás dos de los más populares para imágenes: SVG y PNG. Estos dos formatos a menudo se confunden y no se utilizan en todo su potencial. Nos centraremos en las diferencias entre ellos y algunas de las mejores prácticas para aplicarlos a tu próximo proyecto de página web.
Contenido
SVG
SVG, significa gráficos vectoriales escalables, es un formato web utilizado para mostrar imágenes basadas en vectores. Este formato toma datos de ruta vectorial y los convierte a XML para mostrarlos en un navegador web. Aunque los SVG se pueden crear con cualquier editor de texto, la forma más fácil de crearlos es mediante el uso de software de dibujo como Adobe Illustrator o Sketch. Los SVG están compuestos completamente de código, se pueden escalar a cualquier tamaño y mantener una nitidez perfecta, lo que los convierte en la solución ideal para muchos elementos web que se visualizarán en múltiples resoluciones.
Te puede interesar: Creación de un sitio web exitoso manual valido para 2020
Ventajas de SVG
- Soporte de escala ilimitado
- Cada elemento puede ser ajustado o animado
- Tamaño de archivo pequeño
- La W3C lo recomienda
Desventajas de SVG
- Puede requerir conocimiento de programación
- No es compatible con color CMYK
Te dejo un ejemplo:
Yo en Ca Design Studio Nicaragua y Ca Design Studio Miami use el mismo tema pero cree los SVG
Fragmento de código 👇🏼
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 169.49 171.87"><defs><style>.a8d864d0-7a66-4023-84e6-589b794893a4{fill:#f15b0a;}.b46f0b85-ff84-4f4b-bc4c-f33bea07f70c{fill:#111a23;}.f8fabd19-2864-48db-aa7d-292c52ae1d0c{fill:#d56274;}.a237d4c3-48ea-4444-a098-cf3fee6efffb{fill:#ccc;}.b80f9725-a5f0-496a-87dd-c14d07aa433d{fill:#acacac;}.e61cc0be-936c-4e41-9eff-7a732eca4768{fill:#5b717f;}.b7d72e56-9722-4ee7-84d1-60232dd0685c{fill:#3a5266;}.b37da019-b008-489d-b2f8-2bb1f4bc58a7{fill:#ff7031;}.b3a7e0b1-bc47-4b77-bd88-62c9be1f443d{fill:#e5ac37;}</style></defs><title>Inbound Marketing2</title><g id="a0c556cc-95d7-4709-a625-902a15df13bb" data-name="Layer 12"><rect class="a8d864d0-7a66-4023-84e6-589b794893a4" x="61.07" y="1.06" width="47.36" height="72.26"/></g></svg>
PNG
PNG, abreviatura de gráficos de red portátiles, es el formato de imagen más común en la web detrás del todopoderoso JPEG. Este formato de imagen fue desarrollado para ser una versión mejorada del GIF. Inventado en 1994, PNG es un formato de imagen sin pérdidas basado en ráster que admite color de 32 bits (16 millones de colores en total) y 256 niveles de transparencia. A modo de comparación, una imagen GIF admite un máximo de 256 colores y solo dos niveles de transparencia: 0 o 100. Esto significa que los PNG pueden utilizarse con transparencia parcial, sobreponiéndose a otros elementos, lo que los convierte en un recurso popular para los diseñadores web.
Ventajas de PNG
- Admite un espectro RGB-A completo (32 bits)
- Transparencia parcial
- Compresión sin perdidas
Desventajas de PNG
- Escalar la imagen da como resultado la pérdida de calidad
- No es compatible con el color CMYK
- Resolución más grande = tamaño de archivo más grande
La diferencia
Para ponerlo en términos simples, una imagen SVG podría convertirse en un PNG, pero un PNG no puede convertirse en un SVG. Como SVG se basa en vectores, no se puede convertir tu foto familiar en este formato. Por otro lado, si alguien tiene una imagen SVG, como un ícono o un logotipo, podría convertirse en PNG, y las diferencias se notarán sólo cuando la imagen se amplía o disminuye. Esto se debe a que un PNG es un conjunto definido de píxeles y cualquier escala obliga a los píxeles a combinarse, lo que provoca una pérdida de calidad.
Cuándo usar SVG
- Logo
- Iconos
- Archivos vectoriales
Cuándo usar PNG
- Imágenes donde se desea transparencia
- Imágenes de colores complejos (ten en cuenta el tamaño del archivo)
[mpp_inline id=»1255″]
SVG y PNG tienen características, ventajas y desventajas distintas. Hay un tiempo apropiado para usar cada una, dependiendo del proyecto. En Ca Design Studio, nuestro equipo web te ayudará a decidir qué formatos de imágenes y ubicaciones son las mejores para tu sitio web. ¡Consulta nuestro portafolio de sitios web y contáctenos para comenzar tu próximo proyecto!