¡Por el poder del SVG!
Aprovechemos los SVG para darle vida a nuestro sitio.
Vamos a hablar un poco sobre los SVG y su importancia en el diseño web.
Pero primero… ¿Qué es un SVG?
Según Wikipedia: “Los gráficos vectoriales escalables o gráficos vectoriales redimensionables (del inglés: Scalable Vector Graphics (SVG) es un formato de gráficos vectoriales bidimensionales, tanto estáticos como animados, en formato de lenguaje de marcado extensible XML (Extensible Markup Language), es decir que se compone por código y cuya especificación es un estándar abierto desarrollado por el W3C desde 1999.”
Voy a ir directo al grano, es un tipo de imagen escalable y muy manipulable escrita en código (XML) y soportado por los navegadores.
¿Escalable?
Cuando decimos escalable nos estamos refiriendo a que se puede agrandar cuanto queramos y no pierde resolución… ¿Por qué? Porque a diferencia de las imágenes conocidas (PNG, JPEG, etc) no se componen de bitmaps, sino que se componen por vectores, estos vectores son “cálculos matemáticos” y se pueden escalar de manera infinita sin perder resolución ó calidad.
¿Qué quiere decir “Muy manipulable”?
Al estar escrita en XML podemos diseñarla en un programa de edición (Adobe Photoshop ó Illustrator) y luego exportarla para poder ser interpretada por nuestro HTML y manipular cada elemento como si fuese una etiqueta común y corriente, es decir podemos agregarles animaciones, colores, rellenos, etc. Es más, ni siquiera necesitamos hacer la imagen en un programa externo, tranquilamente podríamos hacerlo directo en nuestro código. Acá tienen un poco de documentación
Vamos con un ejemplo:
En mi sitio web tenemos el siguiente SVG (es toda la ciudad)
Si lo inspeccionamos, podemos notar que cada elementos que vemos es una etiqueta por separado:
Con esto, podríamos cambiar el color, el contorno, moverlo e incluso animarlo (entre otras cosas).
¿Qué propiedades CSS funcionan con los SVGs?
Algo que hay que tener en cuenta es que no todas las propiedades CSS funcionan con los SVGs, por ejemplo width ó margin no funcionarían en las etiquetas SVGs, en su lugar, podríamos usar transform.
Acá hay una lista completa de las propiedades que se comparten y las que son exclusivas de SVG
Algo interesante que mencione más arriba es que no es necesario diseñar el svg en un software aparte, con ingenio y paciencia, podriamos hacerlo directo en html. Podemos ver que dentro de svg tenemos varias etiquetas (Circle, Rectangle, Polygon, etc) que si las combinamos nos daria la posibilidad de crear lo que quisiésemos, obviamente, es más fácil con software.
Acá tienen un ejemplo de las etiquetas SVG
Conclusiones
Con SVG tenemos infinidad de posibilidades combinándolo con CSS y JavaScript, un ejemplo es mi sitio web, hice que las nubes se moviesen, pase un avión e incluso que reaccione durante ciertos momentos del día (no se ve igual de día que de noche).
Recomendación de la semana.
Hoy les traigo la recomendación de la semana, en este caso es un anime disponible en Netflix.
Kotaro vive solo.
Este anime nos cuenta la historia de Kotaro, un chico que por ciertas circunstancias se va a vivir solo, en el transcurso del anime nos enteraremos de las circunstancias y veremos cómo la relación entre él y sus vecinos va creciendo. Es un anime bastante emotivo que cada capitulo nos enseña muchísimo (Cada capitulo te destroza de una manera distinta).