Guillaume Duverger - Développement & Graphisme

Les éléments et attributs SVG

Les éléments descriptifs

L'élément title

L'élément title sert à indiquer le titre du document SVG. Il ne s'affichera pas sur la page mais dans la barre d'état du navigateur ou encore au survol de la souris (comme pour un lien hypertexte en HTML).

title> peut également être utilisé pour les éléments de formes

De manière générale, cet élément améliore l'accessibilité des documents SVG.

L'élément title> est souvent le premier enfant de son parent. Notons que les implémentations qui rendent l'élément title en infobulle ne le font que s'il est à cette place.

<svg>
<title>Mon titre<title>
</svg>

L'élément desc

L'élément desc sert à la description du dessin. Elle est aussi bien importante tant au niveau de l'accessibilité que du référencement.

<svg>
<title>Mon titre<title>
<desc>Ma description</desc>
</svg>

Les éléments structurels

L'élément g :

Cet élément permet de regrouper les éléments de formes (rectangle, cercle, chemins...) dans le but d'appliquer des styles aux éléments en son sein mais également afin de pouvoir les réutiliser ensemble par la suite avec l'élément use.

<svg>
<g>
<path/>
<rect/>
<circle/>
</g>
</svg>

Ci-dessous, un exemple simple avec l'élément g qui regroupe donc plusieurs formes. Vous pouvez remarquer que l'ensemble des formes prennent le style défini dans l'élément g. Pratique si l'on veut appliquer les mêmes styles à tous les éléments du groupe.

<svg height="60" width="310" viewBox="0 0 310 50">
<g style="stroke:#000;stroke-width:3;fill:#7A5FFF">
<rect x="10" y="0" width="100" height="50" />
<rect x="120" y="0" width="50" height="50" />
<circle cx="210" cy="25" r="25" />
<circle cx="270" cy="25" r="25"/>
</g>   
</svg>

L'élément defs :

Comme on peut le deviner, l'élément defs va servir à définir ce que l'on souhaite dessiner dans le document SVG. Le contenu se trouvant à l'intérieur de l'élément ne sera pas affiché. Il doit être appelé avec une ancre rattachée à un identifiant.

Exemple d'utilisation de l'élément defs (nous allons dessiner un cercle avec un dégradé linéaire) :

💡 Remarquez dans le code que l'on a défini un identifiant à l'élément linearGradient et que l'on reporte au cercle (circle) via l'attribut fill.

<svg width="112" height="112" viewBox="0 0 112 112">
<defs>
<linearGradient id="votreid">
<stop offset="20%" stop-color="#7A5FFF" />
<stop offset="90%" stop-color="#01FF89" />
</linearGradient>
</defs>
<circle cx="56" cy="56" r="56" fill="url(#votreid)"  />
</svg>

L'élément use :

L'élement use permet de dupliquer des éléments à l'intérieur de la balise <defs>. Ceux-ci ne seront pas affichés s'ils ne sont pas reliés avec une ancre correspondant à l'identifiant qui se trouve dans l'élément que l'on souhaite reproduire.

Dans l'exemple ci-dessous, nous allons utiliser les éléments g, use et defs :

Nous n'avons dessiné qu'un seul cercle avec l'élément circle qui se répète deux fois. Nous observons donc trois cercles qui s'affichent et que nous avons positionnés avec les coordonnées (on peut également utiliser l'attribut transform).

Vous l'aurez compris, l'utilité de l'élément use est d'éviter la répétition du code.

<svg width="200" height="80" viewBox="0 0 200 80"> 
<defs>
<g id="monId">
<circle r="20"/>
</g>
</defs>
<use x="50" y="40" href="#monId" />
<use x="100" y="40" href="#monId" fill="var(--theme-couleur)"/>
<use x="150" y="40" href="#monId" fill="var(--theme-couleur1)"/>
</svg>

L'élément symbol :

On utilisera l'élément symbol au sein de l'élément defs en corrélation avec l'élément use puisque le principe de l'élément symbol est de pouvoir afficher un graphique SVG autant de fois que l'on veut dans un document (c'est le principe du sprite qui existe aussi en CSS). A noter qu'il n'est pas affiché directement, c'est pourquoi on utilise l'élément use.

Il comprend plusieurs attributs :

• height et width : pour la hauteur et la largeur.
• preserveAspectRatio : valeur par défaut xMidYMid meet.
• refX et refY : coordonnées x et y du point de référence du symbole.
• viewBox : définit la limite de la fenêtre de visualisation du symbole.
• x et y : coordonnées du symbole

Un exemple ci-dessous :

<svg height="0" width="0">
<defs>
<symbol id=acc1 viewBox="0 0 155.139 155.139">
<path d="M125.967 51.533v-31.22h-16.862V38.06L77.57 12.814 0 74.87h21.36v67.454h112.417v-67.45h21.36l-29.17-23.34zm-.042 82.94h-28.38V82.37H57.58v52.103H29.202V71.146l48.356-38.69 48.355 38.69v63.326h.012z"/>
</symbol>
</defs>
</svg>	
	
<svg height="80" width="80" role="img" aria-hidden="true"><use fill=red href="#acc1"></use></svg>
<svg height="120" width="120" role="img" aria-hidden="true"><use fill=green href="#acc1"></use></svg>
<svg height="80" width="80" role="img" aria-hidden="true"><use fill=blue href="#acc1"></use></svg>	
	

Les éléments conteneurs

L'élément a :

Tout comme en HTML, l'élément SVG a définit un hyperlien. On peut ainsi créer un lien pointant une source interne ou externe de la même manière.

Exemple de lien pointant une source externe :

<svg width="200" height="30">
<defs>
<linearGradient id="lien-deg">
<stop offset="0%" stop-color="#7A5FFF"/>
<stop offset="100%" stop-color="#01FF89"/>
</linearGradient>
</defs>
<a href="https://fr.wikipedia.org/wiki/Wikip%C3%A9dia:Accueil_principal">
<rect fill="url(#lien-deg)" height="30" width="180" y="0" x="0" rx="15"/>
<text fill="white" text-anchor="middle" y="21" x="90">Un hyperlien en SVG</text>
</a>
</svg>

Exemple en utilisant les ancres et la pseudo-classe :target :

<svg height=100 width=160>
<style>

text{
font-size: 1.25rem;
fill: currentcolor; 
text-anchor: middle
}

.contenu-cache {

visibility: hidden
}

.contenu-cache:target {

visibility: visible
}

</style>
<a href="#href-target">
<text y="50" x="50%">Cliquez sur ce lien</text>
</a>
<text class=contenu-cache id="href-target" y="80" x="50%">Contenu caché</text>
</svg>

Elément switch :

L'élément switch est utilisé pour dessiner du texte dans un document SVG. Il a pour particularité, entre autres, de pouvoir proposer différents textes ou formes en fonction de la langue de l'utilisateur.

Cet élément possède plusieurs attributs :

• requiredFeatures : teste la prise en charge des fonctionnalités SVG (supprimé en SVG2).
• requiredExtensions : teste la prise en charge des fonctionnalités définies en dehors des spécifications SVG.
• systemLanguage : indique le contenu qui doit être affiché selon la langue de l'utilisateur.

💡 L'élément switch évalue en premier lieu l'attribut requiredFeatures, puis requiredExtensions et enfin systemLanguage. Il va traiter le premier élément enfant direct dont la valeur pour l'un des attributs est true. Tous les autres éléments seront ignorés et ne seront donc pas rendus à l'écran.

Un exemple avec l'attribut systemLanguage :

<svg width=600 height=200 viewBox="0 0 600 200">
<switch>
<style>
switch text{

text-anchor: middle;
font-size: 2rem

} 
</style>
<text x=50% y=50% systemLanguage="en">Hello !</text>
<text x=50% y=50% systemLanguage="es">Hola !</text>
<text x=50% y=50% systemLanguage="fr">Bonjour !</text>
<text x=50% y=50% systemLanguage="it">Buon giorno !</text>
</switch>
</svg>

L'élément marker :

Attaché à un ou plusieurs sommets d'un élément path, line, polyline ou encore polygon (voir les formes de base), l'élément marker permet de dessiner des pointes de flèches et des points (polymarkers).

On utilise l'élément marker au sein de l'élément defs. Il possède plusieurs attributs qui vont permettre son utilisation :

• markerUnits : définit le système de coordonnées pour les attributs markerWidth et markerHeight ainsi que du contenu de l'élément marker. Cet attribut comprend les valeurs suivantes :
  • strokeWidth : par défaut
  • userSpaceOnUse
• markerWidth : définit la largeur de la fenêtre d'affichage du marqueur.
• markerHeight : définit la hauteur de la fenêtre d'affichage du marqueur.
• refX : définit la coordonnée x pour le point de référence du marqueur.
• refY : définit la coordonnée y pour le point de référence du marqueur.
• orient : définit l'orientation du marqueur suivant la direction de la forme à laquelle il est attaché. Cet attribut comprend les valeurs suivantes :
  • auto
  • auto-start-reverse (SVG 2)
• preserveAspectRatio : correspond au redimensionnement de l'élément contenu dans le SVG.
• viewBox : définit la limite de la fenêtre d'affichage SVG.

Un exemple simple ci-dessous :

<svg width="340" height="100" viewBox="0 0 340 100">
<defs>
<marker id="ex-marker" markerWidth="10" markerHeight="10" refX="0" refY="3" orient="auto" markerUnits="strokeWidth">
<path d="M0,0 L0,6 L9,3 z" fill="currentcolor" />
</marker>
</defs>
<line x1="0" y1="50" x2="280" y2="50" stroke="currentcolor" stroke-width="5" marker-end="url(#ex-marker)" />
</svg>

💡 NB : Il est possible de définir plusieurs marqueurs dans l'éléments defs.

Par ailleurs, il existe trois propriétés qui vont permettre de situer l'endroit où le marqueur va s'intégrer à la forme :

• marker-start : au début
• marker-mid : au milieu
• marker-end : à la fin

Plus d'informations sur l'élément marker dans cet article ^(EN)

Elément pattern :

L'élément pattern permet de réaliser un motif en SVG. Celui-ci se place à l'intérieur de l'élément defs auquel on donne un identifiant que l'on reportera via l'attribut fill dans la forme que l'on souhaite dessiner.

Les éléments clipPath et mask :

Tandis que le découpage (clipPath) consiste à cacher tout ou partie d'un élément graphique SVG, le masquage (mask) est, quant à lui, constitué d'une forme, d'un chemin, d'une image, d'un dégradé, ou encore d'un motif, dont le rôle va être de couvrir tout ou partie d'un élément en contrôlant le degré de transparence de ce dernier.

Elément filter :

Indispensable pour créer un filtre SVG, l'élément filter permet d'insérer en son sein de multiples primitives de filtres.

Les éléments linearGradient et radialGradient :

Tout comme en CSS, vous allez pouvoir remplir vos formes ou les contours des formes SVG avec des dégradés linéaires ou radiaux. La mise en place est légèrement différente mais les résultats sont identiques.

Les attributs de base SVG

Vous les avez certainement remarqué dans les chapitres précédents sans savoir à quoi ils correspondaient. Nous allons donc voir leur utilité.

Attribut stroke :

L'attribut stroke est un attribut (et aussi une propriété CSS) de remplissage, c'est-à-dire qu'il va remplir le contour (ou bordure) d'une forme ou d'un texte avec une couleur. Il comprend les valeurs suivantes :

• none : par défaut
• paint
• context-fill
• context-stroke

On peut spécifier la couleur en utilisant le nom des couleurs, une valeur hexadécimale, une valeur décimale ou encore les coordonnées cylindriques HSL.

Un simple exemple ci-dessous :

<svg width="500" height="120">
<circle cx="250" cy="60" r="50" style="stroke: #7A5FFF; fill:none;"/>
</svg>

L'attribut stroke est associé à d'autres attributs (ou propriétés CSS) :

• stroke-width : définit la taille du contour.
• stroke-dasharray : définit le contour en pointillé ainsi que l'espace entre chaque tiret. Voir un exemple animé avec cette propriété.
• stroke-dashoffset : définit l'emplacement où le tiret débute.
• stroke-opacity : définit l'opacité du contour.
• stroke-linecap : définit les points de début et de fin du contour. Cet attribut possède trois valeurs :
  • butt : par défaut
  • round : l’extrémité est arrondie
  • square : l’extrémité est un carré
• stroke-linejoin : définit la manière dont la jointure entre deux lignes d'une forme est rendue.
  • miter : par défaut
  • miter-clip : indique qu'un coin pointu doit être utilisé pour joindre des segments de chemin.
  • round : indique qu'un coin rond doit être utilisé pour joindre des segments de chemin.
  • bevel : indique qu'un coin biseauté doit être utilisé pour joindre des segments de chemin.
  • arcs (SVG2) : indique qu'un coin d'arc doit être utilisé pour joindre des segments de chemin.

Dans l'exemple ci-dessous, nous allons utiliser conjointement les attributs stroke-width, stroke-dasharray, stroke-dashoffset, stroke-linecap et stroke-opacity :

<svg width=500 height=200>
<line stroke-width=10 stroke="#7A5FFF" stroke-dashoffset=0 stroke-dasharray=25 stroke-linecap="butt" x1="20" x2="450" y1="20" y2="20"/>
<line stroke-width=10 stroke-opacity=.5 stroke="#7A5FFF" stroke-dashoffset=50% stroke-dasharray=25 stroke-linecap="round" x1="20" x2="450" y1="60" y2="60"/>
<line stroke-width=10 stroke="#7A5FFF" stroke-dashoffset=100% stroke-dasharray=25 stroke-linecap="square" x1="20" x2="450" y1="100" y2="100"/>
</svg>

Attribut fill :

En SVG, l'attribut fill occupe deux fonctions, l'une permettant de peindre un élément graphique, l'autre concernant l'animation SMIL.

Nous parlerons de la première fonction et aborderons l'autre dans le chapitre sur les animations en SVG.

L'attribut de présentation fill, qui est aussi une propriété CSS, permet donc de remplir l'intérieur d'une forme ou d'un texte avec une couleur (unie, dégradé ou motif). Il se présente ainsi :

<svg height=200 width=200>	
<circle cx="100" cy="100" r="50" fill=#7A5FFF />
</svg>

L'attribut fill est associé à d'autres attributs :

• fill-opacity : définit l'opacité sur un élément. Peut se définir avec un chiffre ou un pourcentage.
• fill-rule : Accepte les valeurs suivantes :
  • nonzero
  • evenodd
  • inherit

Un exemple avec l'attribut fill-opacity :

<svg viewBox="0 0 400 200" height=200 width=400>
<g fill="#7A5FFF">
<circle cx="100" cy="100" r="80" />
<circle cx="300" cy="100" r="80" fill-opacity="0.5" />
</g>
</svg>

Un exemple avec l'attribut fill-rule :

<svg width="600" height="300" viewBox="0 0 600 300">

<polygon fill="#7A5FFF" fill-rule="nonzero" stroke="#01FF89" stroke-width="3" stroke-linejoin="round" points="47.773,241.534 123.868,8.466 200.427,241.534 7.784,98.208 242.216,98.208 " />

<polygon transform="translate(300)" fill="#7A5FFF" fill-rule="evenodd" stroke="#01FF89" stroke-width="3" stroke-linejoin="round" points="47.773,241.534 123.868,8.466 200.427,241.534 7.784,98.208 242.216,98.208 " />

</svg>

Plus d'informations sur l'attribut fill ^(EN).

Attribut viewBox :

L'attribut viewBox est un système de coordonnées qui détermine le ratio d'aspect de la zone de visualisation ainsi que la taille relative des éléments qui sont en son sein. En revanche, elle n'agit pas sur la taille réelle des éléments qui eux sont déterminés par les attributs height et width (que l'on nomme viewport ou fenêtre d'affichage).

L'attribut viewBox doit renseigner quatre valeurs pour déterminer la zone de visualisation. Il se présente ainsi :

<svg viewBox="0 0 100 100">

Les deux premières valeurs correspondent dans l'ordre à l'axe X et Y. Dans le cas de ce code, tout en haut à gauche du dessin (x=0 et y=0).

En savoir plus sur cet attribut ^(FR).

Attribut preserveAspectRatio :

L'attribut preserveAspectRatio va être particulièrement utile dans le cas où le viewport et la viewBox n’ont pas le même ratio largeur et hauteur. En effet, on utilisera cet attribut dans le but de forcer un redimensionnement uniforme du graphique SVG.

💡 A noter que si l'attribut viewBox n'est pas renseigné, l'attribut preserveAspectRatio n'a aucun effet.

Il existe deux références pour cet attibut :

• meet (par défaut) : préserve les proportions et redimensionne la viewBox afin qu'elle s'adapte à la fenêtre d'affichage.
• slice : préserve également les proportions, mais permet à la viewBox de s’adapter au-delà des limites de la fenêtre d'affichage (viewport). Cela aura pour effet de couper toute partie ne correspondant pas à la zone d'affichage.

💡 Si nous ne souhaitons pas conserver le ratio, alors nous ferons appel à la valeur none.

Par ailleurs, nous allons utiliser conjointement l'une ou l'autre référence à des valeurs d'alignement :

• xMin : aligne le bord gauche de la zone de visualisation avec le bord gauche de la fenêtre d'affichage.
• xMid : aligne le milieu de la zone de visualisation avec le milieu de la fenêtre d'affichage le long de l'axe x.
• xMax : aligne le bord droit de la zone de visualisation avec le bord droit de la fenêtre d'affichage.
• YMin : aligne le bord supérieur de la zone de visualisation avec le bord supérieur de la fenêtre d'affichage.
• YMid : aligne le milieu de la zone de visualisation avec le milieu de la fenêtre d'affichage le long de l'axe y.
• YMax : aligne le bord inférieur de la zone de visualisation avec le bord inférieur de la fenêtre d'affichage.

On utilisant la valeur slice, on constate que l'alignement sur l'axe x est ignoré mais agit sur l'axe y :

Aller plus loin avec cet article ^(EN).

Attribut transform :

Il y a six types de transformations en SVG que l'on peut utiliser via l'attribut transform que ce soit sur du texte ou des formes SVG :

• La translation via la fonction translate().
• La rotation via la fonction rotate().
• Le changement d’échelle via la fonction scale().
• La transformation par inclinaison de l’axe des abscisses via la fonction skewX().
• La transformation par inclinaison de l’axe des ordonnées via la fonction skewY().
• La matrice de transformation via la fonction matrix(). Permet de créer n'importe quel type de transformations parmi celles citées ci-dessus.

Le code ci-dessous pour chaque transformation :

<svg height=200 width=300>
<rect x="20" y="20" width="100" height="100" style="fill: #7A5FFF"/>
<rect x="20" y="20" width="100" height="100" style="fill: #01FF89" transform="translate(160,25)" />
<text x=50% y=90% text-anchor=middle class=code>transform=translate(160,25)</text>
</svg>

<svg height=200 width=300>
<rect x="20" y="20" width="100" height="100" style="fill: #7A5FFF"/>
<rect x="160" y="-150" width="100" height="100" style="fill: #01FF89" transform="rotate(45)"/>
<text x=50% y=90% text-anchor=middle class=code>transform=rotate(45)</text>
</svg>
	

<svg height=300 width=300>
<rect x="20" y="20" width="100" height="100" style="fill: #7A5FFF" />
<rect x="80" y="40" width="100" height="100" style="fill: #01FF89" transform="scale(1.6)" />
<text x=50% y=90% text-anchor=middle class=code>transform=scale(1.6)</text>
</svg>

<svg height=300 width=300>
<rect x="20" y="20" width="100" height="100" style="fill: #7A5FFF" />
<rect x="160" y="20" width="100" height="100" style="fill: #01FF89" transform="skewX(10)" />
<text x=50% y=90% text-anchor=middle class=code>transform=skewX(10)</text>
</svg>


<svg height=300 width=300>
<rect x="20" y="20" width="100" height="100" style="fill: #7A5FFF"/>
<rect x="160" y="20" width="100" height="100" style="fill: #01FF89" transform="skewY(10)" />
<text x=50% y=90% text-anchor=middle class=code>transform=skewy(10)</text>
</svg>

<svg height=300 width=300>
<rect x="20" y="20" width="100" height="100" style="fill: #7A5FFF"/>
<rect x="20" y="20" width="100" height="100" style="fill: #01FF89" transform="matrix(1,0,0,1,160,25)" />
<text x=50% y=70% text-anchor=middle class=code>transform=matrix(1,0,0,1,160,25)</text>
<text x=50% y=80% text-anchor=middle class=code>correspond à :</text>
<text x=50% y=90% text-anchor=middle class=code>transform=translate(160,25)</text>
</svg>

💡 Si vous connaissez les transformations CSS, alors vous ne serez pas étonné de constater les similitudes entre les deux langages.