El SVG es un formato que nos da una enorme flexibilidad a la hora de trabajar con elementos gráficos en nuestra web, como iconos, fondos, ilustraciones, figuras geométricas...
En esta guía vemos cómo funciona el formato, las diferentes formas de usar SVG en nuestra web y cómo manipularlo a través de código para exprimir al máximo todas las ventajas de este formato.
¡Vamos allá!
¡Hey! 🖐 Parece que no tienes acceso a este contenido ☹ Puedes suscribirte al contenido completo o crear una cuenta gratuita para probar gratis una clase de cada guía 😊
SuscribirseVeamos primero un poco de teoría sobre este formato, su soporte en los navegadores y las principales ventajas.
Sorry! No tienes acceso a este contenido 😢. Puedes iniciar la sesión o suscribirte al contenido completo.
Para aprender a trabajar con los iconos en SVG, imaginemos que queremos crear una serie de botones de redes sociales para nuestra web.
Con este ejemplo en mente, veamos cómo haríamos todo el proceso:
Sorry! No tienes acceso a este contenido 😢. Puedes iniciar la sesión o suscribirte al contenido completo.
Trabajar con SVG como fondo nos permite por un lado crear elementos gráficos muy visuales con una calidad impresionante y ahorrarnos mucho peso en la web (si lo comparamos con un PNG). Veamos en práctica cómo podríamos hacerlo.
Este contenido es premium pero puedes ver esta sección creando una cuenta gratuita aquí 😊
En esta sección vemos con más detalle cómo manipular nuestros elementos SVG con CSS, cosa que no permite dar mucho dinamismo a nuestra web y nos ofrece una mayor flexibilidad a la hora de trabajar con esos elementos gráficos.
Sorry! No tienes acceso a este contenido 😢. Puedes iniciar la sesión o suscribirte al contenido completo.
En este apartado vamos a ver cómo podemos aplicar sencillas animaciones de CSS a nuestros iconos o ilustraciones de SVG.
Empezamos por lo pequeño y en un futuro aplicaremos esto a composiciones más grandes e incluso le añadiremos algo de JS para hacer efectos mucho más resultones.
Sorry! No tienes acceso a este contenido 😢. Puedes iniciar la sesión o suscribirte al contenido completo.
Veremos cómo «recortar» diferentes formas con SVG sobre imágenes o texto y conseguir formas y animaciones muy avanzadas sin pasar por Photoshop:
Sorry! No tienes acceso a este contenido 😢. Puedes iniciar la sesión o suscribirte al contenido completo.
Veremos cómo crear divisores de SVG con formas personalizadas para conseguir efectos como este:
Sorry! No tienes acceso a este contenido 😢. Puedes iniciar la sesión o suscribirte al contenido completo.