Aunque el formato no es particularmente nuevo, las imágenes SVG son cada vez más populares en el diseño de sitios web. Todos los principales navegadores web admiten el formato y SVG está cambiando la forma en que pensamos y representamos las imágenes para la web.
¿Por qué a ellos tan populares? ¿Y qué es exactamente diferente acerca de un archivo SVG? Hoy tenemos las respuestas y todo lo que necesita saber para comenzar con este tipo de archivo. (Como una pequeña bonificación, todas las imágenes de esta publicación están disponibles en SVG de Creative Market).
¿Qué es SVG?
Los gráficos vectoriales escalables, o SVG, son un formato de imagen basado en vectores desarrollado para la web. (Puede obtener más información sobre los formatos vectoriales y ráster en un artículo anterior de Design Shack).
El formato ha aumentado en popularidad gracias a las pantallas de alta definición, donde los usuarios pueden ver cada píxel (si existe). Debido a que SVG es un formato vectorial, la imagen se procesa de la misma manera, y con un detalle perfecto, independientemente del tamaño.
El lenguaje de marcas fue desarrollado por primera vez por el World Wide Web Consortium, que se conoce más comúnmente como W3C, en 1999. W3C define SVG como? Un lenguaje de marcas para describir aplicaciones e imágenes de gráficos bidimensionales, y un conjunto de interfaces de guiones gráficos relacionados .? Es compatible con todos los navegadores modernos, por lo que no tiene que preocuparse por si los archivos SVG se procesarán correctamente o no, y funciona independientemente del tipo de dispositivo.
Aplicaciones prácticas
Entonces, ¿qué hace que SVG sea tan popular y por qué lo usan más diseñadores? Simplemente, porque funciona.
Los archivos SVG son pequeños y escalables. Si bien el formato es el más adecuado para las formas, tiene una variedad de aplicaciones prácticas. Los logotipos de marca, los iconos, los elementos de la interfaz de usuario y muchos otros bits de diseño pueden funcionar en el formato SVG. La mayor ventaja es que son vectores. Por lo tanto, una imagen SVG se puede utilizar en casi cualquier tamaño. (Algunos de los archivos más pequeños solo pueden ser tan grandes).
Los archivos SVG son fáciles de manipular y controlar también. Un SVG no solo se puede guardar como una imagen estática, sino que también puede agregar interactividad y filtros para hacer que la imagen sea aún más divertida. (Los archivos SVG pueden ser animados y coloreados.)
Aquí hay algunas aplicaciones prácticas para el uso de SVG:
- Logos o imagenes
- Como imagen de fondo
- Como un objeto, como un botón.
- Cartografía
- Cartas o dibujos
Como regla general, SVG es más adecuado para imágenes que pueden evolucionar o cambiar con el tiempo o por tipo de dispositivo o incluir animación u otros efectos dinámicos. Utilice el formato para imágenes, como logotipos, bocetos, formas, gráficos y tablas, u otras imágenes simples.
Ventajas de usar SVG
Entonces, ¿por qué te apartarías del JPG o GIF de confianza a SVG? Existen muchas razones por las que este formato podría ser el mejor uso en sus proyectos. (Y también existe la posibilidad de usar SVG para imprimir).
- SVG es un formato vectorial. Esto solo es importante cuando se piensa en un diseño sensible, donde los tamaños de las imágenes cambian según el dispositivo. Un SVG es lo suficientemente pequeño como para que un archivo pueda hacer todo el trabajo y no se pierda calidad en pantallas más grandes.
- Las imágenes y comportamientos de SVG se definen con XML, lo que significa que las imágenes se pueden buscar indexadas, guionizadas y comprimidas.
- Puede hacer casi cualquier cosa con una imagen SVG que puede hacer con cualquier otra imagen, como incluir una variedad de técnicas de diseño. Es fácil agregar filtros, modos de mezcla, efectos de fresa, color, recorte y enmascaramiento, sombras y casi cualquier otra técnica que te guste.
- Los archivos SVG son accesibles.
- SVG trabaja con estándares web abiertos.
- Puede crear SVG utilizando un código basado en texto o con una imagen que dibuje. Esto permite cierta libertad, dependiendo de su necesidad y nivel de experiencia en diferentes áreas.
- Los tamaños de los archivos son pequeños y se pueden minimizar. Esto significa que los gráficos que podrían haber sido grandes de otra manera no lo son, aumentando los tiempos de carga. (Siempre una bonificación.)
Contras de usar SVG
Probablemente te vendan en SVG después de leer todos los beneficios, ¿verdad? Pero hay algunos aspectos negativos a considerar también.
- Los navegadores más antiguos, como Internet Explorer 8 o inferior, no son compatibles con SVG. Probablemente pueda encontrar una solución alternativa (o no le importe), pero debe saber que podría haber algunos usuarios que no vean sus imágenes.
- SVG no funciona para imágenes complejas como fotos. Es un formato diseñado solo para formas y líneas.
¿Qué sigue para SVG?
El futuro de SVG apenas comienza. Como un formato de imagen móvil adoptado (y estándar), el uso y desarrollo de SVG solo continuará creciendo.
De acuerdo con W3C,? SVG 2 está actualmente en desarrollo, y agregará nuevas características de facilidad de uso a SVG, así como una integración más cercana con HTML, CSS y DOM, y características obsoletas que no son compatibles con todos los navegadores?
También se están lanzando otras adiciones. Las compañías de hardware de impresión están buscando formas de utilizar mejor SVG para los procesos de impresión y cuentan con el apoyo de líderes de la industria como Adobe y Canon. El uso en mapeo y GIS también se está expandiendo, lo que permite mejores capacidades de mapeo y zoom.
Cuando realmente empiezas a pensar en ello, hay una oportunidad casi infinita de cómo usar e implementar SVG en proyectos a través de la web y en diseño impreso. (Esa es una de las bellezas del formato vectorial).
Recursos SVG
Ahora que está un poco más entusiasmado con SVG y puede ver por qué y cómo puede ser útil para sus proyectos, tenemos una lista de recursos para ayudarlo a comenzar.
- Exportando SVG para la Web con Adobe Illustrator
- Insertar SVG directamente en páginas HTML
- En marcha con la serie de videos SVG
- Perfiles SVG
- Trucos CSS: Utilizando SVG
Conclusión
¿Ya estás usando SVG para tus proyectos? Si no, ¿estás listo para hacer el cambio?
SVG está creciendo en popularidad casi a diario y debido a que es una herramienta de código abierto, estos cambios y avances se leen de inmediato.No está vinculado a ningún proveedor o producto y puede crear imágenes que sean completamente compatibles en la web moderna.
Fotos de archivo Cortesía del mercado creativo.