Cómo (y por qué) SVG se hará cargo en 2018

/2019-11-08 21:00:22/
Irving
/Gráficos/

2018 será el año de SVG. El formato de archivo de imagen ha crecido en popularidad y uso de manera constante en los últimos años, pero 2018 es cuando realmente se abrirá paso.

Tiene la combinación de usuarios con pantallas de alta resolución y la necesidad de un tiempo de carga increíblemente rápido para agradecer. Y aunque el cambio a SVG puede sonar como un gran problema; no es.

SVG es fácil de usar e implementar, y realmente no tiene que cambiar los archivos existentes; simplemente agregue nuevas imágenes como SVG. Aquí está todo lo que necesita saber cuando se trata de SVG.

Explore los recursos de diseño

SVG está hecho para la web

Mozilla lo describe así:

SVG es un lenguaje basado en XML para describir imágenes vectoriales. Básicamente es un marcado, como HTML, excepto que tiene muchos elementos diferentes para definir las formas que desea que aparezcan en su imagen y los efectos que desea aplicar a esas formas. SVG es para marcar gráficos, no contenido. En el extremo más simple del espectro, tienes elementos para crear formas simples, como y. Las funciones SVG más avanzadas incluyen (transformar colores usando una matriz de transformación), (animar partes de su gráfico vectorial) y (aplicar una máscara sobre la parte superior de su imagen).

Las ventajas clave de SVG para diseñadores web incluyen la capacidad de crear representaciones SVG simples en un editor de código o texto, mientras que los gráficos complejos se pueden dibujar en un programa como Adobe Illustrator; El texto SVG es accesible; Los SVG son fáciles de diseñar y escribir; y está creando con un formato vectorial que se presenta bien en cualquier tamaño. Los formatos SVG son compatibles con los navegadores modernos, están preparados para el futuro y son altamente comprimibles.

Algunas de las desventajas son que el diseño de SVG puede complicarse y ser un poco más difícil de crear inicialmente. El otro problema es que algunos navegadores degradados simplemente no entienden lo que son.

¿Necesita una mejor comprensión de SVG? Tenemos una guía para principiantes de SVG.

Cómo los diseñadores están usando SVG

Uno de los beneficios de SVG es que puedes hacer muchas cosas diferentes con él. SVG se puede usar para:

Logos
Fondos, patrones y texturas.
Animación
Imágenes receptivas
Íconos

Los diseñadores pueden usar SVG para cualquier elemento en un diseño donde un formato vectorial es una solución aplicable. El puede reemplazar JPG, PNG y GIF, entre otros formatos.

Regla de formatos vectoriales

Hay muchas posibilidades de que uses más formatos vectoriales. SVG es independiente de la resolución. Y eso es una gran ventaja porque sabes que tus imágenes se verán geniales en cualquier lugar.

Lo que es especialmente bueno de trabajar con imágenes SVG es que realmente no tiene que cambiar su flujo de trabajo para implementarlas. Si está diseñando en software como Illustrator o Sketch, el proceso, que no sea la exportación final, es idéntico. El único inconveniente es que probablemente quieras convertir cualquier elemento de texto en contornos en Illustrator, pero mucha gente ya lo hace.

Al preparar archivos SVG, hay una cosa clave para recordar. Para mantenerlos lo más pequeños posible, asegúrese de eliminar cualquier basura que no necesite. (¡Despeje ese cartón!) SVG en la Web tiene algunos consejos excelentes para dibujar elementos y guardar archivos SVG de la mejor manera posible.

El formato basado en texto es bueno para el SEO

El uso de SVG también viene con una ventaja adicional para los diseñadores expertos en motores de búsqueda. Debido a que SVG usa texto real en el formato, los motores de búsqueda pueden leer mejor las imágenes.

Sí, puede agregar información alternativa con otras imágenes, pero solo hay mucho espacio para palabras clave. Con SVG puede crear imágenes más fáciles de buscar y simplemente cargarlas. Google indexa todo el contenido SVG, incluidos los archivos independientes y cuando los SVG se incrustan directamente en HTML.

SVG es ligero

A diferencia de otros tipos de archivos basados en vectores que pueden volverse pesados rápidamente, los SVG son códigos. El código es rápido Es así de simple. Bueno, casi.

Cuando se trata de esos elegantes dibujos vectoriales que ha guardado como SVG, verifique los tamaños de archivo antes de avanzar demasiado. Si bien los formatos PNG pueden crecer casi exponencialmente cuando se agrega transparencia, los SVG tienden a crecer según la cantidad de trazados y rellenos de la imagen.

Si el SVG es enorme, considere exportarlo a JPG o PNG. (Incluso si parece contradictorio. La realidad es que la mayoría de los diseñadores continuarán usando una combinación de tipos de archivos con imágenes; solo espere usar más SVG que usted en el pasado).

Editar es fácil

Si está acostumbrado a dibujar iconos o logotipos o lo que sea en el software de dibujo vectorial, nada sobre el proceso de edición cambia para usted.

Pero si escribes SVG, te espera un regalo. Simplemente cambie la palabra o las coordenadas o el color en el editor de texto y auge, se realiza el cambio. Es difícil hacer que la edición sea más fácil que eso.

Crear imágenes fijas o animadas con SVG

A diferencia de la mayoría de los otros formatos de imagen, que le permiten tener una imagen fija o en movimiento, SVG lo permite. Puede crear una imagen fija o animación. Y todo funciona de la misma manera. (¡Este ingenioso ejemplo es un tutorial sobre cómo animar un elemento a lo largo de una ruta SVG!)

Estos pequeños beneficios están ayudando a empujar a SVG a la vanguardia de las mentes de los diseñadores. No tiene que aprender una nueva herramienta o técnica; ya tienes todo lo que necesitas a tu disposición con SVG.

Conclusión

Esta es la gran razón por la que 2018 será el año en que SVG comience a hacerse cargo: es práctico.

Con todos los que usan pantallas de alta resolución, los formatos vectoriales realmente son el camino a seguir. Todo escala a la perfección y no tiene que preocuparse por la pixelación. Los SVG crean logotipos geniales (estáticos o receptivos), gráficos y fondos, iconos e imágenes pequeñas y animaciones. Los archivos son pequeños y se cargan rápidamente, y no hay una gran curva de aprendizaje cuando se trata de implementar SVG en el diseño de su sitio web.

Literalmente, puede comenzar a usar imágenes SVG en este momento.