Graphiques vectoriels SVG : illustration et animation en code
A course by Javier Usobiaga FerrerConcepteur Web
A course by Javier Usobiaga Ferrer, Concepteur Web
Apprenez à travailler avec des illustrations vectorielles sur vos sites web, de la ligne à l’animation interactive
Javier Usobiaga - concepteur Web et co-fondateur avec Marta Armada du studio Swwweet - vous apprendra comment tirer le meilleur parti du format SVG (Scalable Vector Graphics), un type de fichier vectoriel à utiliser dans les navigateurs qui se présente comme une alternative en JPG, PNG et GIF et se caractérise par son évolutivité, son interactivité et sa réactivité. Vous découvrirez ses effets, filtres et animations et vous pourrez créer des illustrations et des pièces animées avec du code HTML, CSS et JavasScript.
Javier enseigne également dans Domestika le cours Introduction au développement web responsive avec HTML et CSS, dans lequel vous pouvez apprendre les bases du développement Web Frontend, connaissances qui seront utiles comme base pour tirer le meilleur parti de ce cours de graphisme vectoriel SVG.
Qu'allez-vous apprendre dans ce cours en ligne ?
32 leçons & 28 vidéos téléchargées
Balises et attributs de base
5 minutes, 16 secondes
Styles en SVG
4 minutes, 57 secondes
Étiquettes de ligne, polyligne et polygone
5 minutes, 21 secondes
Étiquette de contour (chemin)
4 minutes, 45 secondes
L'attribut viewbox
4 minutes, 6 secondes
Étiquettes de texte
6 minutes, 55 secondes
Que comprend ce cours ?
Vous commencerez par connaître le travail et les influences dans le monde du SVG par Javier Usobiaga.
Ci-dessous, vous comprendrez comment le format SVG fonctionne dans sa forme la plus basique afin de le modifier et de l'optimiser. Pour ce faire, vous commencerez à écrire un graphique de base sans éditeurs visuels uniquement avec l'éditeur de code, vous découvrirez comment appliquer des styles via des attributs et CSS, vous saurez comment fonctionnent les étiquettes de ligne, polyligne et polygone et les étiquettes de trait qui permettent vous permet de créer un nombre infini de courbes, de lignes et de points. Vous verrez également les attributs de la zone de visualisation qui vous permettent de créer des fenêtres virtuelles (délimiter la partie visible d'un graphique et zoomer) et les étiquettes de texte.
Une fois que vous connaissez les outils de base, il sera temps d'apprendre à utiliser d'autres outils d'optimisation tels que les éditeurs vectoriels et les outils de code avec lesquels vous pourrez regrouper, définir et réutiliser des éléments SVG afin de sauvegarder de nombreuses lignes de code.
La prochaine phase sera d'intégrer SVG au web, pour cela, Javier expliquera comment charger un SVG (image de contenu, image de fond, avec JavaScript ...), son application concernant les systèmes d'icônes, son rôle dans le web responsive, astuces pour améliorer l'expérience du lecteur d'écran et comment optimiser SVG dans tous les navigateurs.
Ensuite, vous découvrirez les effets en SVG (transformations, dégradés, motifs, masques et filtres) et les types d'animation (avec CSS, séquence, dessin et interactif) y compris quelques animations avancées telles que celles réalisées avec JavasScript, celles appliquées aux cases à cocher animées , mutations ou morphings et animations le long d'un trait.
Recommended software & tools for this course
What is this course's project?
Vous ferez une illustration avec des éléments vectoriels animés. Le thème est gratuit et vous pouvez faire un projet aussi simple ou complexe que vous le souhaitez en mettant en pratique les outils que vous avez vus pendant le cours.
Projets d'élèves du cours
Who is this online course for?
Aux programmeurs, designers, illustrateurs et à toute personne intéressée par le design et curieuse de développer de nouveaux projets avec HTML et CSS.
Requirements and materials
Une connaissance de base préalable de HTML et CSS est requise.
En ce qui concerne le matériel et les outils dont vous aurez besoin pour compléter le cours, vous devez disposer d'un ordinateur, d'un éditeur de code et d'un éditeur de graphiques vectoriels (comme Illustrator, Sketch, Inkscape ou similaire).
Avis
- il y a 10 mois
Muy puntual, da la clase muy bien y es entendible, con ejercicios faciles y buenos.
- il y a 1 an
EXCELENTE CURSO
- il y a 1 an
Gostei muito
- il y a 2 ans
excellent course for beginners.
- il y a 2 ans
excelente curso lo recomiento explica muy bien y se entiende todo
Il apprécie également son rôle de professeur de Web Design dans des ateliers et écoles renommés tels qu'Elisava, IDEP.
Usobiaga comprend le Web dans son intégralité, non seulement à quel point il peut être beau sur l'écran de l'ordinateur, mais aussi son utilisation dans différents appareils et circonstances.
Selon ses mots, "je pense que la vitesse à laquelle il se charge ou la réponse à laquelle il répond est aussi important que l'esthétique, et il me semble que dans notre industrie, nous l'oublions souvent".
Contenu
- U1
introduction
- Présentation
- Les influences
- U2
SVG de base
- Balises et attributs de base
- Styles en SVG
- Étiquettes de ligne, polyligne et polygone
- Étiquette de contour (chemin)
- L'attribut viewbox
- Étiquettes de texte
- U3
Outils et optimisation
- Editeurs vectoriels et export
- Organisation SVG
- Optimisation SVG
- U4
Incorporer SVG sur le Web
- Méthodes de téléchargement d'un SVG sur le Web
- Jeux d'icônes
- SVG réactif
- Accessibilité en SVG
- Prise en charge du navigateur
- U5
Effets en SVG
- Transformations
- Dégradé
- Motifs
- Masques et chemins de détourage
- Filtres
- U6
Animation en SVG
- Types d'animation en SVG
- Animation avec CSS
- Animation de séquence
- Animation dessinée
- Animation interactive
- U7
Animation et interaction avancées
- Animation avec JavaScript
- Bibliothèques JavaScript pour l'animation
- Case à cocher animée
- Mutation (morphing) en SVG
- Animation le long d'un chemin
- Inspiration
- PF
Projet final
- Graphiques vectoriels SVG: illustrer et animer avec du code
Ce qu’il faut attendre d’un cours Domestika
Apprenez à votre rythme
Apprenez chez vous, sans horaires fixes et à votre rythme. C’est vous qui décidez de votre programme d’apprentissage.
Apprenez auprès de grands noms du secteur créatif
Apprenez les techniques et les méthodes les plus utiles auprès des meilleurs professionnels du secteur créatif.
Rencontrez des spécialistes reconnus
Dans chaque leçon, votre professeur vous transmettra ses connaissances avec enthousiasme, vous donnera des explications claires et vous fera bénéficier de son expertise.
Certificates
PLUSIf you're a Plus member, get a certificat personnalisé signed by your teacher for every course. Share it on your portfolio, social media, or wherever you like.
Soyez aux premières loges
Profitez de vidéos de haute qualité pour ne manquer aucun détail. Grâce à un accès illimité, vous pourrez les regarder autant de fois que nécessaire pour perfectionner vos compétences.
Partagez vos connaissances et vos idées
Posez des questions, demandez des avis ou suggérez des solutions. Partagez votre expérience d’apprentissage avec les autres élèves de la communauté qui ont, comme vous, une passion pour la créativité.
Rejoignez une communauté créative internationale
Cette communauté réunit plus de huit millions de personnes des quatre coins du monde, curieuses et passionnées, avec cette même envie de développer et d’exprimer leur créativité.
Assistez à des cours de haute qualité
Domestika sélectionne les professeurs avec soin et produit chaque cours en interne afin de garantir une expérience d’apprentissage en ligne de qualité optimale.
Foire aux questions
Le SVG (Scalable Vector Graphics) est un format basé sur XML qui permet de créer des graphiques vectoriels évolutifs sans perte de qualité. Il est très utilisé en développement web pour les icônes, illustrations, animations et graphiques interactifs.
Ce cours s'adresse à des personnes ayant des connaissances intermédiaires en développement web. Il est recommandé d'avoir des bases en HTML, CSS et JavaScript pour tirer pleinement parti du contenu.
Vous devez maîtriser les bases du HTML, CSS et JavaScript, ainsi qu'être à l'aise avec un éditeur de code. Il n'est pas nécessaire d'être expert, mais une bonne base en technologies web facilitera votre progression.
Vous apprendrez à créer des graphiques SVG personnalisés, animer des éléments avec CSS et JavaScript, intégrer des icônes, appliquer des styles avancés, travailler avec des chemins, dégradés et motifs, et optimiser les fichiers SVG pour le web.
Le cours vous montre comment animer un SVG via JavaScript en manipulant le DOM et les attributs, ainsi qu'avec CSS en utilisant les keyframes pour créer des effets visuels, transitions et séquences animées.
Le cours explique que les attributs SVG comme fill et stroke permettent un style direct, tandis que le CSS offre plus de contrôle, de réutilisation et facilite la maintenance, surtout dans les projets importants et les composants réutilisables.
Vous apprendrez à utiliser l'attribut viewBox, ajuster preserveAspectRatio et appliquer des techniques de design responsive pour que les SVG s'adaptent parfaitement à tous les appareils et résolutions.