Tutoriel SVG

 (svg-tutorial.com)
6 points par GN⁺ 2023-12-08 | 1 commentaires | Partager sur WhatsApp
  • Ressource d’apprentissage SVG pour dessiner directement des images en code dans le HTML, avec une progression pas à pas des formes de base jusqu’à l’interactivité
  • Le parcours d’apprentissage s’étend des éléments de base comme viewBox, polygon et polyline à path, aux courbes de Bézier et aux arcs
  • La partie transformations couvre la rotation, le déplacement, la réutilisation, la mise à l’échelle et les transformations générales, tandis que la partie CSS enchaîne avec les animations, le hover, l’animation le long d’un chemin et le SVG inline en CSS
  • Les sujets avancés abordent le texte, clip-path et les dégradés, puis proposent des exercices pratiques en JavaScript avec une horloge affichant l’heure réelle, de l’interactivité, des diagrammes pilotés par les données et la décomposition en plusieurs composants
  • Des liens vers des éditeurs pour line, circle, rect, polyline, polygon, text ainsi que pour les courbes de Bézier quadratiques/cubiques et les arcs sont aussi fournis afin d’expérimenter immédiatement chaque élément

Structure du tutoriel

Éléments SVG et segments de path pour la pratique

À lire aussi

1 commentaires

 
GN⁺ 2023-12-08
Avis sur Hacker News

  • La combinaison SVG + React est sous-estimée. On peut utiliser telle quelle l’abstraction et la puissance de React tout en rendant des graphismes arbitraires au lieu du DOM, et pour certains usages comme le rendu de graphes ou de graphiques, je trouve que c’est bien meilleur que Canvas.
    C’est particulièrement bien si l’on n’a pas besoin de choses graphiquement complexes, comme des manipulations au pixel près, mais seulement d’un peu d’interaction. Dans Canvas, pour créer un effet de survol, il faut calculer soi-même sur quel élément se trouve la souris, ce qui est pénible ; avec SVG, il suffit d’utiliser des fonctionnalités intégrées comme onmouseover.

    • Exact. Pouvoir attacher un listener de clic à un SVG et le styler en CSS comme du HTML ordinaire paraît parfois magique, et React / JSX rendent cela facile à utiliser.
    • Y a-t-il de bonnes ressources d’introduction sur ce sujet ? Je suis aussi quasiment débutant avec React, mais j’ai l’impression que ce serait assez amusant à explorer.
      J’aimerais bien des exemples fonctionnels qui donnent une direction ou de l’inspiration.
    • J’ai déjà créé, côté client, un composant de découpage d’image + tagging avec Preact.js et SVG, et le résultat était plutôt réussi. Je le recommande pour ce genre d’application.
    • Exact. HTML Canvas est souvent beaucoup plus performant, mais si vous ne construisez pas le prochain Figma, travailler avec SVG est bien plus pratique.
    • Je code en React & SVG des motifs à découper avec GlowForge, et ça fonctionne très bien.

  • Dans l’ensemble, c’est une excellente ressource et les exemples sont vraiment clairs. Cela dit, dans la partie clip-path, le code proposé décrit deux fois le grand cercle ; si l’on veut changer sa taille, il faut donc modifier deux endroits.
    Puisqu’on utilise déjà defs, je pense qu’il vaut mieux réutiliser la même définition.

    • Le deuxième élément n’est même pas nécessaire : il suffit de rendre le cercle normalement, puis de le référencer dans clipPath.
      Personnellement, j’aimerais aussi retirer l’enrobage avec <g>. Je n’ai jamais compris pourquoi cette structure était recommandée et, sauf dans le cas très rare où l’on veut placer dans <defs> un élément qui serait rendu s’il n’y était pas, je ne vois pas ce qu’on y gagne. Dans une situation comme defs/circle dans l’exemple, il faut généralement utiliser <symbol>.
    • C’est juste, et c’est une bonne idée. Je pourrais ajouter une note à ce sujet.

  • Vraiment chouette. SVG est un format propre et flexible ; comme c’est directement lié à un side project en cours, je compte prendre le temps de suivre le tutoriel.
    Comme d’autres, j’ai trouvé assez amusant de créer des composants React basés sur SVG. React et JSX facilitent l’ajout d’interactions, et SVG permet des UI qui ne sont pas faciles à créer avec du HTML seul.
    J’ai publié un composant React qui rend un Circle of Fifths interactif pour un side project de théorie musicale. Il reste encore beaucoup à faire, mais il est utilisable : https://github.com/epiccoleman/react-circle-of-fifths
    J’ai aussi écrit un article sur la création d’un Circle of Fifths en SVG, et j’aime particulièrement les passages intermédiaires qui expliquent comment dessiner des éléments complexes : https://epiccoleman.com/posts/2023-04-05-svg-circle-of-fifth...
    Je crée maintenant un générateur de diagrammes de manche de guitare de façon similaire, et c’est utile de pouvoir revenir à mon ancien article comme référence. L’un des avantages d’écrire sur son travail, c’est de pouvoir « rejouer » la manière dont on a résolu un problème.

  • J’aime bien cette ressource. J’ai créé quelques SVG inline dans React en y ajoutant des interactions, et c’est vraiment amusant à manipuler.
    La balise <foreignObject> est particulièrement utile. Elle permet de mettre du HTML ordinaire dans un SVG, donc de gérer dans un projet d’art SVG des choses que HTML fait mieux, comme les liens, les images ou le styling flexbox de base.
    Pour l’auteur, au passage : certains liens du site ne fonctionnent pas. Le lien bio.link en bas de page et le lien vers la démo interactive des courbes de Bézier dans le jour 11, “How to Draw Quadratic Bézier Curves with SVG”, sont hors service.

    • J’ai corrigé le lien vers la démo interactive. Comme ce site est probablement fait avec Vue, les liens profonds ne semblent pas toujours bien fonctionner.
      Je ne vois pas de problème du côté de bio.link ; je serais curieux de savoir quelle erreur vous voyez.
    • Le lien “next example” en bas de la page https://svg-tutorial.com/svg/transform pointe aussi vers /svg/path, ce qui donne une 404 ; le bon lien semble être /svg/use.
    • Il y a toujours quelque chose de cassé. Je vais vérifier.
      Je ne connaissais pas foreignObject, mais c’est vraiment excellent.

  • Il y a quelques années, en travaillant sur une interface, j’utilisais SVG pour une partie des graphismes. Il y avait deux palettes de couleurs, mais l’un des graphismes n’existait que dans une palette ; je suis donc allé de l’autre côté du couloir pour récupérer les codes hex de l’autre couleur.
    J’ai été très surpris de voir le designer ouvrir le fichier SVG et simplement rechercher-remplacer toutes les couleurs pour créer la deuxième version.

    • Je n’y avais jamais pensé. C’est une super astuce qui pourra faire gagner beaucoup de temps un jour.
    • C’est intéressant ; pourrais-tu expliquer un peu plus la partie « je suis allé de l’autre côté du couloir pour récupérer les codes hex de l’autre couleur » ?

  • Excellent. J’aime particulièrement les exemples de courbes et de clipping, qui me posent encore problème.
    Personnellement, je préfère path, qui permet presque tout et est moins verbeux que les autres approches.
    J’apprends depuis longtemps, mais je sens qu’il me reste encore beaucoup à apprendre. Comme je dessine vraiment mal et que je n’aime pas beaucoup les images, j’ai fait tout un side project en SVG pour des raisons de commodité et de performance.
    Après avoir vu la ressource d’aujourd’hui, je pense que je vais devoir pas mal refactorer : https://eddiots.com/1

    • Ravi que ça ait aidé. La BD est chouette.

  • Merci pour les bons retours ; j’ai corrigé quelques erreurs signalées. S’il y a encore des choses qui ne fonctionnent pas, dites-le-moi. Je suis encore en train de faire quelques ajustements finaux
    Par exemple, quelqu’un sait-il pourquoi l’aperçu de vignette ne fonctionne pas sur Twitter ? Sur les sous-pages, ça marche bien

  • Très bon. Le problème avec lequel je me bats en ce moment, c’est texte + image, donc un ou deux exemples sur ce sujet seraient bienvenus
    L’alignement est vraiment pénible. J’ai aussi essayé Inkscape, mais pour produire ce dont j’ai besoin, on est clairement plus proche de « rédiger le XML à la main »

    • Je n’ai pas beaucoup expérimenté avec le texte, à part l’exemple où il suit une ligne
      Je connais text-anchor : https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/t...
      Et quelqu’un a suggéré qu’ici, la balise foreignObject pourrait être utile : https://developer.mozilla.org/en-US/docs/Web/SVG/Element/for...
    • Le texte est clairement fastidieux. J’ai bricolé à la va-vite du code Python qui génère des tableaux avec svgwrite, et placer le texte à l’endroit voulu a été infernal
      Au final, j’ai ajusté plusieurs valeurs au jugé et conclu par « c’est suffisamment bon ». Je suis d’accord avec la demande d’exemples de placement de texte non triviaux
      [0] Le lien GitHub est dans mon profil
    • La fonction d’alignement d’Inkscape me convient bien. Quand il faut être plus précis, j’appuie sur ctrl+shift+x et je saisis directement les coordonnées
      L’éditeur XML d’Inkscape plante assez souvent chez moi, mais si on pense à enregistrer à chaque modification, il reste utilisable

  • Comment fait-on en général ? Les gens codent-ils le SVG directement, ou le dessinent-ils dans un outil comme Figma avant de générer le fichier SVG ?

    • Ayant été formé comme graphiste, je le dessinais généralement directement dans Inkscape ou l’importais depuis un autre programme
      Il a fallu pas mal de travail pour ramener la taille des fichiers de http://shapeoko.github.io/Docs/ à un niveau raisonnable
      Plus tard, j’ai aussi mis en place un mécanisme qui ouvre l’image dans une nouvelle fenêtre quand on clique dessus : http://shapeoko.github.io/Docs/content/tPictures/PS20028-100...
      Et j’ai pu faire en sorte qu’en cliquant sur le nom d’une pièce dans la liste des composants, la pièce correspondante soit mise en évidence dans le diagramme
    • Les designers utiliseront sans doute leur éditeur préféré, comme Illustrator, Sketch ou Inkscape. Les codeurs peuvent aussi faire de petites modifications avec ce genre de logiciels, mais s’il y a de l’interaction, on édite généralement le SVG directement
      Pour les formes ou courbes complexes, je les colle parfois dans un éditeur en ligne pour les visualiser, et cet outil est bien : https://yqnn.github.io/svg-path-editor/
    • Pour des graphismes plus complexes, il vaut probablement toujours mieux utiliser des outils de designer. Mais pour des graphismes simples, on peut les coder directement
      Si j’ai besoin d’une flèche ou d’une icône de menu hamburger, je peux passer directement au code. Parfois, je commence avec du papier et un stylo, puis j’ajuste les coordonnées jusqu’à obtenir quelque chose d’assez correct
    • Avec l’arrivée de nouveaux modèles vectoriels basés sur les transformers, comme ceux d’Adobe, générer du SVG deviendra plus facile que jamais : https://www.adobe.com/products/illustrator/text-to-vector-gr...
    • Dans les projets sur lesquels j’ai travaillé, je créais ou modifiais les fichiers avec Inkscape, puis je les liais comme des images ordinaires
      Il m’est parfois arrivé d’intégrer un graphique directement dans une page parce qu’une page statique précise avait besoin d’un visuel propre, mais dans ces cas-là, le graphique n’était pas très complexe

  • Une chose que j’ai comprise récemment, c’est qu’on peut mettre des balises SVG en inline comme des balises JSX dans une application React
    Je ne sais pas si c’est exactement un support de première classe ou si Webpack s’en charge, mais dans certains cas, créer des composants SVG avec de la logique donne une sensation très agréable. On peut maintenant modifier la forme du SVG, ses couleurs, l’omission de certaines sections, etc., via une logique basée sur React

    • C’est bien si le SVG est simple ou s’il a besoin de beaucoup de variantes
      Mais si on met le code SVG en inline, le navigateur ne peut pas mettre l’image en cache. Si le SVG est volumineux ou s’il n’y a que quelques variantes, il peut être préférable d’avoir un endpoint séparé pour chaque variante d’image
      https://chat.openai.com/share/49e91be6-bdef-4f4d-a263-80a884...
    • Exact. Depuis HTML5, on peut mettre du SVG en inline, et il n’y a pas besoin de Webpack ou autre. Ça fonctionne tout simplement
      L’un des exemples de ce tutoriel est d’ailleurs un diagramme piloté par les données généré avec React. En combinant les deux, on peut faire des choses assez chouettes