Le langage SVG (= Scalable Vector Graphics) permet de décrire des objets graphiques vectoriels, c’est à dire qu’ils peuvent être affichés à n’importe quelle taille sans perte de qualité. C’est un des formats de sortie d’applications comme Illustrator, Inkscape, draw.io.

SVG ne fait pas partie au sens strict de la spécification HTML, mais il peut être inclus directement dans des documents HTML5. La hiérarchie des éléments du dessin SVG est intégrée au DOM de la page et les différents noeuds sont accessibles avec des sélecteurs comme les autres noeuds du DOM.

• c’est un élement ‘inline’
• il peut être stylé avec du CSS, avec les mêmes règles d’héritage, de sélecteurs, de cascades
• il peut être animé
• il peut être clippé
• on peut attacher des écouteurs d’événements à <svg> ou à ses sous-éléments

En un mot, tout se passe comme si les balises <svg>, <path>, etc. faisaient partie des éléments HTML.

SVG est basé sur XML, ce qui implique que :

• toutes les balises doivent être fermées, même celles sans contenu
• les noms d’attributs sont case-sensitive (attention à ‘viewBox’)

Exemple

• la plupart des attributs SVG (stroke, stroke-width, fill, etc.) peuvent également être utilisés comme attributs CSS

Dimensions

• taille par défaut 300px x 150px pour les SVG inclus dans des documents HTML (idem pour <img>, <object> et <iframe>)
• attributs width et height : dimensions externes pour le navigateur, en unités CSS. N’en préciser qu’un seul préserve l’aspect-ratio
• viewBox="x y w h" : système de coordonnées interne du dessin, sans unité

Pour modifier la taille externe d’un SVG, utiliser les attributs width et height, sans modifier l’attribut viewBox.

Groupes et transformations

Utilisation des bibliothèques de symboles

Les icones de bibliothèque sont généralement sous forme de SVG. Par exemple avec material design icons :

Un élément SVG est de type inline

Le SVG peut être animé

https://codepen.io/jjperezaguinaga/pen/DZxRmb

Attacher des écouteurs d’événements à un SVG