Por qué SVG es un cambio de juego

¿No sería genial poder animar todas las capas de un archivo de Photoshop en su página web?

Lo sentimos, no puedes, pero puedes hacer algo parecido con archivos SVG.

SVG es un formato vectorial, por lo que probablemente comenzarás con una imagen que otra persona ha creado. Google 'imágenes vectoriales libres' Eso es lo que hice para mi página de inicio. Si eres un músico estás obsesionado con los instrumentos, así que mi elección de un amplificador de guitarra hará que un muso se sienta como en casa!

Entonces, ¿cómo funciona SVG?

La pista está en el nombre, Scalable Vector Graphics, una descripción matemática de un gráfico, por lo que la carga útil puede ser pequeña en comparación con los mapas de bits, y la carga de la página es, por lo tanto, más rápida. www.w3.org para obtener especificaciones completas Puedes animar SVG con CSS nativo, pero yo aconsejaría a un framework como GSAP que los manipules. Tiene una sobrecarga de carga útil menor, pero vale la pena.

No necesitas un framework, si eres un CSS wiz lo administrarás fácilmente, pero será más detallado y tomará más tiempo. Hay muchas propiedades comunes a SVG y CSS una excepción notable es el color de fondo en CSS se rellena en SVG Puede sumergirse tan profundamente como desee en propiedades compartidas. Una lista exhaustiva está aquí... css-tricks.com

Simplemente abra un gráfico vectorial en Adobe Illustrator y asigne un nombre a las capas que desea manipular con nombres significativos y memorables. Cuando guardas en SVG (así lo exportas a SVG) esos nombres se convierten en ID de DOM que puedes direccionar. Adjunte controladores de eventos y los usuarios podrán interactuar.

Ventaja adicional: los SVG también son escalables hacia abajo, ¡así que haz grandes iconos también! Mejor que los glificones de arranque o los iconos de font-awesome.

Conclusión: El tamaño del archivo, la escalabilidad y la diversión directa hacen que SVG sea una necesidad para cualquier diseñador de frontend serio.