2018 será el año de SVG. El formato del archivo de imagen ha ido creciendo en popularidad y uso 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 mientras que 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; sólo tiene que añadir nuevas imágenes como SVG. Aquí tiene todo lo que necesita saber cuando se trata de SVG.
SVG está hecho para la web
Mozilla lo describe así:
SVG es un lenguaje basado en XML para describir imágenes vectoriales. Es básicamente 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, tiene 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 la imagen).
Las ventajas clave de SVG para los diseñadores web incluyen la capacidad de crear representaciones SVG simples en un editor de código o de 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 reproduce bien en cualquier tamaño. Los formatos SVG son compatibles con los navegadores modernos, están preparados para el futuro y son altamente compresibles.
Algunas de las desventajas son que diseñar SVG puede complicarse y es 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 utilizando SVG
Uno de los beneficios de SVG es que puedes hacer muchas cosas diferentes con él. SVG se puede utilizar para:
- Logotipos
- Fondos, estampados y texturas.
- Animación
- Imágenes responsivas
- Iconos
Los diseñadores pueden usar SVG para cualquier elemento en un diseño donde un formato vectorial sea una solución aplicable. Pueden reemplazar JPG, PNG y GIF, entre otros formatos.
Regla de formatos vectoriales
Hay una buena posibilidad de que estés usando más formatos vectoriales. SVG es resolución independiente. Y eso es una gran ventaja porque sabes que tus imágenes se verán muy bien 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, distinto de la exportación final, es idéntico. El único problema es que probablemente querrá convertir cualquier elemento de texto en esquemas en Illustrator, pero mucha gente ya lo hace.
Al preparar archivos SVG, hay una cosa clave que recordar. Para mantenerlos lo más pequeños posible, asegúrate de eliminar cualquier basura que no necesites. (¡Limpie la mesa de trabajo!) SVG en la Web tiene algunos consejos excelentes para dibujar elementos y guardar archivos SVG de la mejor manera posible.
Formato basado en texto es bueno para SEO
El uso de SVG también incluye un poco de bonificación 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.
Si puedes agregar alt Información con otras imágenes, pero solo hay mucho espacio para las palabras clave. Con SVG puedes crear más imágenes de búsqueda y simplemente subirlas. Google indexa todo el contenido SVG, incluidos los archivos independientes y cuando los SVG están incrustados directamente en HTML.
SVG es ligero
A diferencia de algunos otros tipos de archivos basados en vectores que pueden ser muy rápidos, los SVG son códigos. El código es rápido. Es así de simple. ¿Bien? casi.
Cuando se trata de esos dibujos vectoriales de lujo que ha guardado como SVG, verifique el tamaño de los archivos antes de avanzar demasiado. Si bien los formatos PNG pueden crecer casi exponencialmente cuando se agrega transparencia, los SVG tienden a crecer en función del número de rutas y rellenos en la imagen.
Si el SVG es enorme, considere exportarlo y un 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 en el pasado).
La edición es fácil
Si está acostumbrado a dibujar íconos o logotipos o lo que sea en el software de dibujo vectorial, no hay cambios en el proceso de edición.
Pero si escribes SVG, te espera una sorpresa. Simplemente cambie la palabra o las coordenadas o el color en el editor de texto y auge, se hace el cambio. Es difícil hacer la edición más fácil que eso.
Crea 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 permite cualquiera de los dos. 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 la mente de los diseñadores. No tienes 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 comienza a asumir el control: es práctico.
Con todo el mundo utilizando pantallas de alta resolución, los formatos vectoriales realmente son el camino a seguir. Todo escala perfectamente y no tiene que preocuparse por la pixelación. Los SVG hacen grandes logotipos (estáticos o sensibles), gráficos y fondos, íconos e imágenes pequeñas y animaciones. Los archivos son pequeños y se cargan rápido, y no hay una gran curva de aprendizaje cuando se trata de implementar SVG en el diseño de su sitio web.
Puedes comenzar a usar imágenes SVG en este momento.