Gráficos vectoriales SVG: ilustrar y animar con código

Aprende a trabajar con ilustraciones vectoriales en tus páginas web, de la línea a la animación interactiva

• Introducción
• SVG Básico
• Herramientas y optimización
• Incorporando SVG a la web
• Efectos en SVG
• Animación en SVG
• Interacción y animación avanzada
• Proyecto final

Javier Usobiaga –Diseñador Web y cofundador junto a Marta Armada del estudio Swwweet– te enseñará a sacarle el máximo partido al formato SVG (Scalable Vector Graphics) un tipo de archivo vectorial para uso en navegadores que surge como alternativa a los archivos JPG, PNG y GIF y que se caracteriza por ser escalable, interactivo y responsive. Descubrirás sus efectos, filtros y animaciones y lograrás crear ilustraciones y piezas animadas con código HTML, CSS y JavasScript.

Javier también imparte en Domestika el curso "Introducción al Desarrollo Web Responsive con HTML y CSS", en el que podrás aprender los fundamentos del Desarrollo Web Frontend, conocimientos que te vendrán muy bien como base para aprovechar al máximo este curso de gráficos vectoriales SVG.

• Presentación
• Influencias
• Etiquetas y atributos básicos
• Estilos en SVG
• Etiquetas de línea, polilínea y polígono
• Etiqueta de trazo (path)
• El atributo viewbox
• Etiquetas de texto
• Editores vectoriales y exportación
• Organización de SVG
• Optimización de SVG
• Formas de cargar un SVG en la web
• Sistemas de iconos
• SVG responsive
• Accesibilidad en SVG
• Soporte en navegadores
• Transformaciones
• Degradados
• Patrones
• Máscaras y clipping paths
• Filtros
• Tipos de animación en SVG
• Animación con CSS
• Animación de secuencia
• Animación de dibujado
• Animación interactiva
• Animación con JavaScript
• Librerías de JavaScript para animación
• Checkbox animado
• Mutación (morphing) en SVG
• Animación a lo largo de un trazo
• Inspiración
• Gráficos vectoriales SVG: ilustrar y animar con código