Gráficos vectoriales SVG: ilustrar y animar con código
Un curso de Javier Usobiaga Ferrer, Diseñador web
Aprende a trabajar con ilustraciones vectoriales en tus páginas web, de la línea a la animación interactiva
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.
¿Qué aprenderás en este curso online?
32 lecciones & 28 recursos adicionales
¿Qué incluye este curso?
Comenzarás conociendo el trabajo y las influencias en el mundo del SVG de Javier Usobiaga.
A continuación entenderás cómo funciona el formato SVG en su forma más básica para poder alterarlo y optimizarlo. Para ello, empezarás escribiendo un gráfico básico sin editores visuales solo con el editor de código, descubrirás cómo aplicar estilos a través de atributos y CSS, sabrás cómo funcionan las etiquetas de línea, polilínea y polígono y las etiquetas de trazo que permiten crear infinidad de curvas, rectas y puntos. También verás los atributos viewbox que permiten realizar ventanas virtuales (delimitar la parte visible de un gráfico y hacer zoom) y las etiquetas de texto.
Una vez que conozcas las herramientas básicas será el momento de aprender a usar otras herramientas de optimización como los editores vectoriales y herramientas de código con las que lograrás agrupar, definir y reutilizar elementos SVG con el fin de ahorrarte muchas líneas de código.
La siguiente fase será incorporar SVG a la web, para ello, Javier te explicará formas de cargar un SVG (imagen de contenido, imagen de fondo, con JavaScript…), su aplicación respecto a los sistemas de iconos, su papel en la web responsive, consejos para mejorar la experiencia en lectores de pantalla y cómo optimizar el formato SVG en todos los navegadores.
Seguidamente descubrirás los efectos en SVG (transformaciones, degradados, patrones, máscaras y filtros) y los tipos de animación (con CSS, de secuencia, de dibujado e interactiva) incluyendo algunas animaciones avanzadas como las realizadas con JavasScript, las aplicadas a checkbox animados, las mutaciones o morphings y las animaciones a lo largo de un trazo.
- 98% valoraciones positivas (273)
- 9.417 estudiantes
- 32 lecciones (2h 2m)
- 28 recursos adicionales (6 archivos)
- Online y a tu ritmo
- Disponible en la app
- Audio: Español, Inglés, Francés, Italiano, Portugués, Türkçe
- Español · Inglés · Portugués · Italiano · Francés · Türkçe
- Nivel: Iniciación
- Acceso ilimitado para siempre
Software y herramientas recomendados para este curso
Adobe Illustrator
Sketch¿Cuál es el proyecto del curso?
Realizarás una ilustración con elementos vectoriales animados. El tema es libre y puedes hacer un proyecto tan simple o complejo como quieras poniendo en prácticas las herramientas que has visto durante el curso.
Proyectos de estudiantes del curso
¿A quién está dirigido este curso online?
A programadores, diseñadores, ilustradores y cualquier persona que tenga interés por el diseño y curiosidad a la hora de desarrollar nuevos proyectos con HTML y CSS.
Requisitos y materiales
Se requieren conocimientos básicos previos de HTML y CSS.
Respecto a los materiales y herramientas que necesitarás para realizar el curso, deberás contar con un ordenador, un editor de código y un editor de gráficos vectoriales (como Illustrator, Sketch, Inkscape o similares).
Opiniones
Javier Usobiaga Ferrer
Un curso de Javier Usobiaga Ferrer
Javier Usobiaga es diseñador web y desarrollador FrontEnd, desde hace más de 10 años y cofundador junto a Marta Armada del estudio Swwweet, especializado en diseñar webs responsive desde la concepción inicial hasta el desarrollo front-end.
También disfruta mucho en su faceta como profesor de Diseño Web en workshops y escuelas de renombre como Elisava, IDEP.
Usobiaga entiende la web en su globalidad, no solo lo bonita que puede quedar en la pantalla del ordenador, sino su usabilidad en diferentes dispositivos y circunstancias.
En sus palabras “creo que tan importante como lo estética es lo rápido que cargue o lo bien que responda, y me parece que en nuestra industria nos olvidamos a menudo de eso”.
Contenidos
-
U1
Introducción
-
Presentación
-
Influencias
-
-
U2
SVG Básico
-
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
-
-
U3
Herramientas y optimización
-
Editores vectoriales y exportación
-
Organización de SVG
-
Optimización de SVG
-
-
U4
Incorporando SVG a la web
-
Formas de cargar un SVG en la web
-
Sistemas de iconos
-
SVG responsive
-
Accesibilidad en SVG
-
Soporte en navegadores
-
-
U5
Efectos en SVG
-
Transformaciones
-
Degradados
-
Patrones
-
Máscaras y clipping paths
-
Filtros
-
-
U6
Animación en SVG
-
Tipos de animación en SVG
-
Animación con CSS
-
Animación de secuencia
-
Animación de dibujado
-
Animación interactiva
-
-
U7
Interacción y animación avanzada
-
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
-
-
PF
Proyecto final
-
Gráficos vectoriales SVG: ilustrar y animar con código
-
Qué esperar de un curso de Domestika
-
Aprende a tu ritmo
Disfruta aprendiendo desde casa, sin horarios y a tu ritmo. Tú decides cuándo seguir con cada unidad.
-
Aprende de los mejores profesionales
Aprende los métodos y técnicas más útiles con los mejores profesionales del sector creativo.
-
Conoce a profesores expertos
Cada profesor te transmitirá sus conocimientos con pasión, ofreciéndote explicaciones claras y una perspectiva profesional en cada lección.
-
Certificados
PlusSi eres Plus, obtén un certificado personalizado y firmado por tu profesor. Compártelo en tu porfolio, en las redes sociales o donde quieras.
-
Ponte en primera fila
La alta calidad de los vídeos permitirá que no te pierdas ni un solo detalle. Gracias al acceso ilimitado, podrás ver las lecciones todas las veces que necesites para perfeccionar tus habilidades.
-
Comparte conocimientos e ideas
Pregunta, pide opinión y ofrece soluciones. Comparte tu experiencia de aprendizaje con otros estudiantes de la comunidad tan apasionados por la creatividad como tú.
-
Conecta con una comunidad creativa global
Esta comunidad cuenta con millones de usuarios de todo el mundo, personas curiosas y con ganas de explorar y expresar su creatividad.
-
Realiza cursos profesionalmente producidos
Domestika selecciona cuidadosamente los profesores y produce cada curso internamente para garantizar una experiencia de aprendizaje online excelente.
Preguntas frecuentes
SVG (Scalable Vector Graphics) es un formato basado en XML para crear gráficos vectoriales que se escalan sin perder calidad. Es muy utilizado en el desarrollo web para iconos, ilustraciones, animaciones y gráficos interactivos.
El curso está orientado a personas con conocimientos intermedios en desarrollo web. Se recomienda tener experiencia básica en HTML, CSS y JavaScript para aprovechar al máximo los contenidos.
Debes tener conocimientos básicos de HTML, CSS y JavaScript, además de familiaridad con algún editor de código. No es necesario ser experto, pero una base en tecnologías web te ayudará a seguir el ritmo del curso.
Aprenderás a crear gráficos SVG personalizados, animar elementos con CSS y JavaScript, integrar iconos, aplicar estilos avanzados, trabajar con rutas, degradados y patrones, y optimizar archivos SVG para la web.
El curso te enseña a animar SVG mediante JavaScript accediendo al DOM y modificando atributos, y con CSS usando keyframes para crear efectos visuales, transiciones y secuencias animadas.
El curso explica que los atributos SVG como fill y stroke permiten estilos directos, mientras que CSS ofrece más control, reutilización y mantenimiento, especialmente útil en proyectos grandes y componentes reutilizables.
Aprenderás a usar el atributo viewBox, ajustar preserveAspectRatio y emplear técnicas de diseño responsive para que los SVGs se adapten de forma fluida a cualquier dispositivo o resolución.
Adobe Illustrator
Sketch
Muy puntual, da la clase muy bien y es entendible, con ejercicios faciles y buenos.
EXCELENTE CURSO
Gostei muito
excellent course for beginners.
excelente curso lo recomiento explica muy bien y se entiende todo