La guía práctica para principiantes de SVG
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 procesamos imágenes para la web.
¿Por qué en tan popular? ¿Y qué es exactamente diferente de un archivo SVG? Hoy, tenemos las respuestas y todo lo que necesita saber para comenzar con este tipo de archivo. (Como un pequeño bono, todas las imágenes en esta publicación están disponibles en SVG de Creative Market).
Explore los elementos de Envato
¿Qué es el 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 de vector contra 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 existen). Debido a que SVG es un formato vectorial, la imagen se procesa de la misma manera, y con todo detalle, independientemente del tamaño.
El lenguaje de marcado fue desarrollado por primera vez por el Consorcio World Wide Web, que se conoce más comúnmente como W3C, en 1999. W3C define SVG como "un lenguaje de marcado para describir aplicaciones e imágenes de gráficos bidimensionales, y un conjunto de interfaces de script de 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 elementos de diseño pueden funcionar en formato SVG. La mayor ventaja es que son vectores. Por lo tanto, una imagen SVG se puede usar en casi cualquier tamaño. (Algunos de los archivos más pequeños solo pueden ser tan grandes).
Los archivos SVG también son fáciles de manipular y controlar. No solo se puede guardar un SVG como una imagen estática, sino que también puede agregar interactividad y filtros para 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:
- Logotipos o imágenes
- Como imagen de fondo
- Como un objeto, como un botón
- Cartografía
- Gráficos o dibujos
Como regla general, SVG es el 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. Use 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 alejarías del confiable JPG o GIF a SVG? Hay muchas razones por las cuales este formato podría ser el mejor uso en sus proyectos. (E incluso existe la posibilidad de utilizar SVG para imprimir también).
- SVG es un formato vectorial. Esto solo es importante cuando se piensa en un diseño receptivo, donde los tamaños de imagen a menudo cambian según el dispositivo. Un SVG es lo suficientemente pequeño como para que un archivo pueda hacer todo el trabajo y no haya pérdida de calidad en pantallas más grandes.
- Las imágenes y los comportamientos de SVG se definen con XML, lo que significa que las imágenes se pueden buscar indexadas, escritas 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 fusión, efectos de fresado, color, recorte y enmascaramiento, sombras paralelas y casi cualquier otra técnica que desee.
- Los archivos SVG son accesibles.
- SVG funciona con estándares web abiertos.
- Puede crear SVG utilizando código basado en texto o con la 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 otro modo no lo son, aumentando los tiempos de carga. (Siempre una bonificación)
Contras de usar SVG
Probablemente se venda en SVG después de leer todos los beneficios, ¿verdad? Pero también hay algunos aspectos negativos a tener en cuenta.
- Los navegadores más antiguos, como Internet Explorer 8 o versiones anteriores, no son compatibles con SVG. Probablemente pueda encontrar una solución alternativa (o tal vez 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 acaba de comenzar. Como un formato de imagen móvil adoptado (y estándar), el uso y desarrollo de SVG solo continuará creciendo.
Según W3C, "SVG 2 se encuentra actualmente en desarrollo y agregará nuevas funciones de facilidad de uso a SVG, además de integrarse más estrechamente con HTML, CSS y DOM, y reducir las características 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 SIG también se está expandiendo, permitiendo mejores capacidades de mapeo y zoom.
Cuando realmente empiezas a pensarlo, hay una oportunidad casi infinita de cómo usar e implementar SVG en proyectos en la web y en diseño impreso. (Esa es una de las bellezas del formato basado en vectores).
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.
- Exportar SVG para la Web con Adobe Illustrator
- Incruste SVG directamente en páginas HTML
- En funcionamiento con SVG Video Series
- Perfiles SVG
- Trucos CSS: uso de 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 de Creative Market .
