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, 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
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, 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.
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.
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!
