Tutoriel SVG

Résumé du tutoriel SVG

• Il s’agit d’un tutoriel SVG créé par Hunor Márton Borbély, qui permet d’apprendre pas à pas à coder des images SVG, des formes de base jusqu’aux animations complexes.
• Il couvre divers sujets, comme le dessin de formes de base, un sapin de Noël, un bonhomme en pain d’épice ou une maison, et présente différentes fonctionnalités de SVG comme les clip paths, les dégradés, les courbes de Bézier et le texte suivant un tracé.
• Il inclut aussi des méthodes pour combiner SVG avec d’autres technologies, comme dessiner une horloge en JavaScript, ajouter de l’interaction à des éléments SVG, ou générer des diagrammes SVG en JavaScript.

L’avis de GN⁺

• Ce tutoriel constitue une excellente ressource pour les ingénieurs logiciel débutants qui souhaitent apprendre de manière structurée à coder des images SVG, des bases jusqu’aux techniques avancées.
• En particulier, il contient des exemples pratiques, comme la création d’une horloge affichant l’heure réelle ou l’ajout d’interactions à des éléments SVG, ce qui devrait offrir aux apprenants une expérience très utile et stimulante.
• Pour celles et ceux qui veulent apprendre SVG, ce tutoriel peut devenir une ressource pédagogique attrayante pour approfondir la compréhension du design graphique web et améliorer la capacité à ajouter des éléments visuels originaux à une page web.

[GN⁺]

Avis Hacker News

• La combinaison de SVG et React est sous-estimée. On peut exploiter toutes les fonctionnalités et abstractions de React, tout en rendant des graphiques arbitraires au lieu du DOM. Après l’avoir utilisé pour le rendu de graphes et de graphiques, cela surpasse Canvas dans certains cas. Par exemple, c’est utile quand on a besoin d’interactions simples, mais pas de graphismes complexes comme la manipulation au pixel près.
• SVG est un format flexible, qui mérite qu’on prenne le temps de l’apprendre via des tutoriels dédiés. En combinant SVG avec des composants React, on peut créer de superbes interfaces difficiles à réaliser avec le seul HTML.
• J’ai utilisé un composant interactif « Circle of Fifths » implémenté avec React pour un side project de théorie musicale. Le composant est utilisable, et l’article de blog sur la manière de construire un Circle of Fifths avec SVG est utile.
• Dans l’exemple d’utilisation de <clip-path> en SVG, définir deux fois un grand cercle est inefficace. Lorsqu’on change sa taille, il faut modifier les deux endroits ; puisqu’on utilise déjà defs, il vaut mieux définir le cercle une seule fois et le réutiliser.
• Coder du SVG inline avec SVG et React est amusant, et la balise <foreignObject> permet d’utiliser SVG dans du HTML, ce qui est pratique pour les tâches où HTML est plus à l’aise (liens, images, styles flexbox de base, etc.).
• Il y a quelques années, en utilisant SVG pour un travail d’interface, j’ai surpris un designer en me contentant de rechercher et remplacer les codes couleur dans le fichier SVG pour gérer deux palettes de couleurs.
• Remerciements pour les retours positifs sur le tutoriel, et correction des erreurs signalées. C’est encore en cours d’ajustement, et je me demande par exemple si quelqu’un sait pourquoi l’aperçu miniature sur Twitter ne fonctionne pas.
• Petite plainte au sujet du terme « balise » pour SVG. Quand j’ai commencé avec HTML, j’appelais tout des « balises », puis avec l’arrivée de XHTML, j’ai commencé à dire « élément ». Je continue à penser « balise », mais maintenant je dis « élément ».
• J’aime particulièrement les exemples sur les courbes et le clipping. Je préfère path, car on peut presque tout faire avec et c’est moins verbeux que les autres méthodes. Comme je suis mauvais en dessin et que je n’aime pas les images, j’ai construit tout un side project en SVG pour des raisons de performance et de praticité. Ce tutoriel me fait réaliser qu’il y a beaucoup de choses à refactoriser.
• J’aimerais voir un exemple combinant texte et images. Je me débats avec ce problème en ce moment, et l’alignement est délicat. J’ai déjà essayé Inkscape, mais je tends plutôt à écrire du XML pour générer ce dont j’ai besoin.
• Je me demande si coder directement en SVG est une pratique courante, ou si le plus courant est plutôt de dessiner dans Figma, par exemple, puis de générer un fichier SVG.