Comme l'html, un fichier svg s'écrit avec la paire de balises:
<svg></svg>.
On appelle communément ces balises des tag (étiquettes).

La première balise <svg> est la balise d'ouverture.
La seconde balise </svg> est la balise de fermeture.

La balise d'ouverture peut contenir des attributs et leurs réglages.

Tout ce qui est inscrit entre ces 2 balises constitue l'illustration.

• ✎→Télécharger Sublime Text

  Sublime text est un éditeur de code.
  il va nous servir à écrire nos fichiers svg

---

1. Avec votre éditeur de code, créer un nouveau fichier.
2. Coller dans ce nouveau fichier le code de l'exemple de base (ci-dessous).
3. Enregistrer le fichier en lui donnant le nom que vous souhaitez avec comme nom d'extension .svg
4. Vous pouvez visualiser le résultat avec votre navigateur, simplement par glisser/déposer de votre fichier svg dans une fenêtre vierge.

↑
Un fichier svg de 128x128 pixels,
et son code correspondant.

La colorisation du code permet de mettre en évidence les différents types d'informations.

• éléments / balises / tags / étiquettes
  Le nom de l'élément, de la forme, de l'outil.
• attributs / propriétés
  Le nom de la propriété à régler.
• réglages
  Les valeurs choisies, textuelles ou numériques, pour chaque propriété.

Dans la balise d'ouverture <svg>, des attributs et leurs réglages sont indispensables:

• xmlns="http://www.w3.org/2000/svg"
  Pour un fichier svg autonome.
• xmlns:xlink="http://www.w3.org/1999/xlink"
  Permet de disposer d'éléments et de propriétés avancés pour d'anciens systèmes.
• viewBox="0 0 128 128"
  On indique ici les dimensions de notre fichier svg.

viewBox → 0 0 128 128

La zone de visualisation viewBox définit la surface de dessin, l'espace dans lequel les formes seront visibles.

Le réglage de cette propriété comporte quatre valeurs numériques représentant respectivement:
0 0 128 128 Le point d'origine x
0 0 128 128 Le point d'origine y
0 0 128 128 La largeur
0 0 128 128 La hauteur

Dans le cas présent, nous avons une surface carrée de 128 pixels de large sur 128 pixels de haut.

NB L'ensemble des exemples présentés dans ce cours sont écrit dans un svg carré de 128x128 pixels.

---

Affichage

Les dimensions d'origine précisées par viewBox ne définissent pas nécessairement la taille d'affichage de votre svg.

Le même fichier svg affiché 3 fois dans 3 tailles différentes:
64x64 pixels	28x128 pixels	192x192 pixels

---

2048

À propos des dimensions utilisées dans les exemples de ce cours.

1 | 2 | 4 | 8 | 16 | 32 | 64 | 128 | 256 | 512 | 1024 | 2048 | 4096…
Observez cette suite, elle vous est peut-être familière.

Par défaut, les formes dessinées s'affichent en noir et les contours sont invisibles.

Les propriétés fill et stroke permettent de régler respectivement la couleur de remplissage et la couleur de contour.

L'illustration est ainsi composée d'un empilement de formes géométriques savemment placées et organisées.
→ 2 lignes divisant ma surface en 4 parties.
→ 4 formes fermées : cercle, rectangle, ellipse, polygone.

L'ordre de déclaration des éléments détermine l'empilement, c'est à dire ce qui est au dessus et au dessous, ou devant/derrière.
Ce qui est écrit avant se place au dessous / derrière.
Ce qui est écrit après se place au dessus / devant.

<circle>

Comme avec un compas, on précise les coordonnées cx et cy du centre du cercle, puis on définit le rayon r de notre cercle.

---

<ellipse>

Même principe que le cercle, avec la possibilité de définir un rayon horizontal rx et un rayon vertical ry.

Code^C

Détails^D

<rect>

On positionne un rectangle en indiquant les coordonnées x et y de l'angle supérieur gauche, la largeur width et la hauteur height.

Il est possible d'arrondir les angles, en précisant un rayon rx pour les 4 angles.

Pour des formes rectangles avec des angles moins conventionnels, il est possible de préciser un rayon vertical ry, en plus du rayon horizontal rx.

Code^C

Détails^D

<polygon>

Le polygone permet de dessiner des formes ayant au minimum 3 côtés / 3 points.
On renseigne la propriété points avec une liste de paires de coordonnées x,y.

Le polygone permet de dessiner des formes géométriques simples, mais aussi des formes plus complexes, exclusivement constituées de lignes droites.

↑
Polygone constitué de 12 points.
Cliquer dans l'image pour d'autres variations hazardeuses

Code^C

Détails^D

<line>

Une ligne est constituée de 2 points. Chaque point est défini par une paire de coordonnées:
→ x1 et y1 pour le premier point,
→ x2 et y2 pour le second.

---

<g>

Par défaut les tracés d'un svg ne sont pas visibles. Pour pouvoir les visualiser, il faut régler la couleur de contour stroke. Il est possible d'indiquer la couleur de contour sur chacune des lignes mais cela oblige à l'écrire 5 fois. En utilisant le groupe <g></g> précise la couleur de contour une seule fois.

Code^C

Détails^D

<polyline>

Sur le même principe que <polygon>, on renseigne la propriété points avec une liste de paires de coordonnées x,y.
Pour dessiner notamment des lignes de graphiques type excel, ou des paysages accidentés…

Contrairement au polygon, polyline ne se ferme pas et reste une accumulation de segments.

Code^C

Détails^D

<path>

Pour dessiner un tracé <path>, un seul attribut d pour décrire précisément notre tracé. Pour chaque segment ou courbe, on associe une lettre à une ou plusieurs valeurs numériques suivant le cas.

E X E M P L E S

h 16    → ligne horizontale de 16 pixels vers la droite.
h -8    → ligne horizontale de 8 pixels vers la gauche.
v 8     → ligne verticale de 8 pixels vers le bas.
v -8    → ligne verticale de 8 pixels vers le haut.
l 16 -8 → ligne oblique vers le haut et la droite.

---

Dans la balise d'ouverture du groupe, la couleur de remplissage fill est réglée sur none pour faire disparaitre le noir, afin de correctement visualiser le tracé.

↑
Si ce réglage n'est pas effectué, on peut visualiser le comportement de la couleur de remplissage, le tracé se fermant automatiquement entre le premier et le dernier point, le résultat obtenu n'est pas forcément celui escompté.

Code^C

Détails^D

• ✚→ L'élément path en détails sur Mdn Web Docs

---

Exemples détaillés de tracés simples

<text>

Pour positionner des blocs de texte, ligne par ligne.
Les deux balises <text></text> sont impératives: le mot ou phrase à afficher s'écrit entre ces 2 balises.

La gestion du retour à la ligne n'étant pas automatique, il n'est pas aisé de gérer de longs paragraphes avec svg… même si c'est possible, en utilisant notamment <tspan></tspan>.

---

<tspan>

Permet de subdiviser le contenu d'un élément <text>, ouvrant ainsi la voie à des réglages différents suivant les subdivisions.

Code^C

Détails^D

↑
Pour simuler des paragraphes:
Plusieurs lignes <tspan></tspan>
en indiquant la position y de la ligne.

Code^C

↑
Quelques lettres dans <tspan></tspan>
pour varier la couleur des caractères.

Code^C

fill

Par défaut, les formes dessinées s'affichent en noir et sans contour. Pour appliquer une couleur à une forme, on utilisera la propriété fill. Cette propriété concerne l'ensemble des formes, mais ne produira aucun effet sur une ligne droite.
Plusieurs notations possibles pour préciser les couleurs:

• colorName
  Nom de la couleur en anglais.
• #000000
  Valeur hexadecimale
  3 paires de caractères représentent respectivement le rouge, vert, et bleu.
  [ 00 → FF ] — [ 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F ].
• rgb(0,0,0)
  Valeurs rgb.
  3 nombres représentent respectivement le rouge, vert, et bleu.
  [ 0 → 255 ].

• ✚→ Tout savoir sur les couleurs sur w3Schools

  Il existe d'autres façons de préciser les couleurs, les 3 présentées ici nous suffiront pour travailler.

Code^C

Détails^D

	colorName	hex	rgb
	black	#000000	rgb(0,0,0)
	white	#FFFFFF	rgb(255,255,255)
	red	#FF0000	rgb(255,0,0)
	lime	#00FF00	rgb(0,255,0)
	blue	#0000FF	rgb(0,0,255)
	magenta	#FF00FF	rgb(255,0,255)
	yellow	#FFFF00	rgb(255,255,0)
	cyan	#00FFFF	rgb(0,255,255)

stroke

Par défaut, les formes dessinées sont sans contour. Pour définir une couleur de contour on utilisera la propriété stroke.
Peut s'appliquer à l'ensemble des formes.

Comme pour le remplissage, on précise la couleur de contour de multiples façons (nom, valeur hexadecimale, rgb…).

---

stroke-width

Pour un contour plus épais, la propriété stroke-width est réglée sur 4px (voir plus bas).

Code^C

Détails^D

fill-opacity

Pour régler le niveau de transparence de la couleur de remplissage, on utilise la propriété fill-opacity.

Code^C

Détails^D

stroke-opacity

Pour régler le niveau de transparence de la couleur de contour, on utilise la propriété stroke-opacity.

Ces réglages sont également possibles en utilisant une couleur transparente (rgba / #000000FF ).

Code^C

Détails^D

stroke-width

Pour régler l'épaisseur du contour.

Code^C

Détails^D

stroke-linecap

Incidence sur la façon dont sont traitées les extrémités de tracé.
Visible sur des tracés épais.

Code^C

Détails^D

stroke-linejoin

Incidence sur la façon dont sont traités les angles des tracés.
Visible sur des tracés épais.

Code^C

Détails^D

stroke-dasharray

Pour définir le motif appliqué au contour, on accumule une liste de valeurs représentant alternativement un espace plein et un espace vide.

E X E M P L E S

stroke-dasharray="1,1"
Donne un tiret de 1 pixels suivi d'un espace de 1 pixels. (pointillés)

stroke-dasharray="1,4"
Donne un tiret de 1 pixels suivi d'un espace de 4 pixels. (pointillés espacés)

stroke-dasharray="4,4"
Donne un tiret de 4 pixels suivi d'un espace de 4 pixels.

stroke-dasharray="4,4,1,4"
Donne un tiret de 4 pixels suivi d'un espace de 4 pixels suivi d'un tiret de 1 pixel suivi d'une espace de 4 pixels.

Code^C

Détails^D

<linearGradient>

Le dégradé linéaire permet d'obtenir un effet de fondu entre 2 ou plusieurs couleurs, et ce dans une direction voulue.
Les propriétés indispensables pour définir un dégradé linéaire:

• id
  Nom unique du dégradé (sans accent ni espace). Indispensable pour pouvoir l'utiliser.
• x1, y1, x2, y2
  Coordonnées de la ligne (invisible) donnant la direction du dégradé, du point 1 vers le point 2.

---

<stop>

Correspond aux étapes / couleurs du dégradé (2 minimum).
Les propriétés accompagnant la balise stop permettent d'effectuer les réglages nécessaires. Les 2 premières sont indispensables:

• offset
  Position de la couleur (en %) dans l'espace du dégradé.
• stop-color
  Référence colorée (nom, rgb, hexadécimale…).
• stop-opacity
  Opacité de la couleur.

---

<defs>

Dans l'exemple proposé, vous pouvez constater que <linearGradient> est placé entre une paire de balises <defs>.
L'élément defs correspond à une zone de définition: on peut y placer des dégradés, des motifs, des formes réutilisables…
Ce qui est placé dans cette balise n'est pas visible dans le svg, mais appelé par d'autres formes pour se colorer par exemple d'un dégradé.

---

fill

On applique le dégradé aux formes avec la propriété fill, avec une syntaxe spécifique: url(#nomDuDegrade)
Le nom du dégradé doit correspondre rigoureusement à celui défini dans l'id du dégradé.

↑
On remarque que le dégradé s'adapte aux dimensions de la forme.

---

stroke

Il est également possible d'appliquer le dégradé au contour des formes avec la propriété stroke, toujours avec la syntaxe spécifique: url(#nomDuDegrade)

Code^C

Détails^D

<radialGradient>

Le dégradé radial permet d'obtenir un effet de fondu entre 2 ou plusieurs couleurs dans un espace concentrique.
Les propriétés indispensables pour définir un dégradé radial:

id
→ Nom unique du dégradé (sans accent ni espace). Indispensable pour pouvoir l'utiliser.

cx,cy, r
→ Coordonnées et rayon du cercle incluant le dégradé.

fx,fy
→ Coordonnées du point de focalisation du dégradé.

---

<stop>

Comme pour le dégradé linéaire, stop correspond aux différentes couleurs du dégradé.

---

fill / stroke

Comme pour le dégradé linéaire, le dégradé radial s'applique aux formes avec la propriété fill et/ou stroke, avec la syntaxe spécifique: url(#nomDuDegrade)

Code^C

Détails^D

<pattern>

Avec svg, pattern est un fragment rectangulaire dans lequel on dessine ce que l'on veut. En remplissant une forme avec notre pattern, on obtient un motif répétitif: notre fragment / pattern se répète dans les 2 dimensions x et y.

id
→ Nom unique du motif (sans accent ni espace). Indispensable pour pouvoir l'utiliser.

x,y, width, height
→ origine et dimensions du motif.

patternUnits
→ ... dans nos exemples, on utilisera la valeur userSpaceOnUse pour plus de simplicité. (d'autres réglages existent).

---

<defs>

Comme pour les dégradés, une pattern se place dans une balise defs.

---

fill / stroke

Le motif s'applique aux formes avec la propriété fill et/ou stroke, avec la syntaxe spécifique:
url(#nomDuMotif)

Code^C

Détails^D

• ✚→ Les motifs sur Mdn Web Docs

<mask>

Permet de de faire un trou dans une autre forme avec une forme.

---

id
→ Nom unique du masque (la forme qui sert à faire le trou). Indispensable pour pouvoir l'utiliser.

maskContentUnits
→ Plusieurs réglages possibles. Nous utiliserons dans un premier temps objectBoundingBox qui permet d'adapter la taille de notre forme trou à la forme cible.

Code^C

Détails^D

<clipPath>

La forme dessinée au sein de la balise clipPath sera celle qui révèlera une autre forme, un groupe de formes multiples, ou une image.

---

id
→ Nom unique du clip. Indispensable pour pouvoir l'utiliser.

clipPathUnits
→ Plusieurs réglages possibles. Nous utiliserons dans un premier temps objectBoundingBox qui permet d'adapter la taille de notre clip à la forme à révéler.

---

clip-path

À appliquer sur la forme, le groupe, ou l'image à révéler par la forme clipPath.

Code^C

Détails^D

<image>

Bien que le svg soit un format exclusivement vectoriel, il est possible d'intégrer un fichier image.

L'image affichée n'est pas incluse dans dans le svg, elle est simplement liée. Il est nécessaire que l'image utilisée soit accessible par le fichier svg, son chemin ou sa localisation doivent être précisement renseignés.

Code^C

Détails^D

Important !
Dans l'exemple proposé, l'image s'affichera si un fichier portant le nom expocouleur.jpg se trouve placé juste à côté de votre fichier svg (dans le même dossier).

<clipPath> + clip-path

L'attribut clip-path s'applique également aux images et autorise ainsi la révélation d'un fragment d'image dans la forme de votre choix.

Code^C

<use>

La balise use permet d'appeler une forme déjà dessinée et identifiée par son id, afin de pouvoir afficher cette forme autant de fois que nécessaire.

Code^C

Détails^D

Dans ce deuxième exemple, 2 formes (cercle et tracé) sont regroupées: La balise g représente la forme originale finale et est identifiée par son id.
Appliqué à des formes plus complexes, cela évite ainsi de ré-écrire plusieurs fois des lignes parfois extrêmement verbeuses.

Code^C

Clonage ne signifie pas rigoureusement identique… il reste toujours possible de personnaliser chaque réplique: on veillera dans ce cas à ce que les réglages souhaités ne soient pas renseignés dans la forme originale.

transform → translate(0,0)

Déplace/décale la forme dessinée sans avoir à ré-écrire ses coordonnées ou tracés d'origine.

Les 3 cercles sont positionnés au centre,
La position du premier reste inchangée (pas de translation)
Le second et le troisième sont décalés, respectivement à gauche et à droite avec la propriété transform réglée sur translate(x,y).

L'exemple suivant est identique, mais écrit différemment, afin de bien saisir la nuance entre coordonnées d'origine et coordonnées transformées.

Code^C

Détails^D

↑
Le quart de cercle en haut à gauche de l'image correspond au cercle avec les coordonnées cx et cy non renseignées (utilisant les valeurs par défaut).

Si les coordonnées du centre du cercle ne sont pas précisées, le cercle se positionne originellement à [0,0].
Le positionnement final des 3 cercles est assuré par la propriété transform.

Code^C

transform → rotate(0 0 0)

Permet de faire pivoter la forme dans le plan selon un axe donné.

↑
Sur ce premier exemple, l'axe de rotation est situé dans l'angle supérieur gauche (0,0) de l'image.

Code^C

↑
Sur ce deuxième exemple, le code est identique, seul l'axe de rotation change: il est ici situé sur la position d'origine du carré (40,40).

Code^C

↑
Sur ce troisième exemple, le code reste le même, l'axe de rotation est ici situé au centre (64,64) de l'image.

Code^C

Détails^D

transform → translate(0,0) + rotate(0 0 0)

Une transformation accepte plusieurs réglages simultanés.
Dans cet exemple, translate et rotate sont cumulés. Il est ainsi possible d'opérer plusieurs types de transformation simultanément sur une forme.

↑ Pour les besoins de cet exemple,
une forme spécifique est tracée avec la balise <path>.

Code^C

↑
Le même exemple écrit différemment pour bien saisir la nuance entre coordonnées d'origine et coordonnées transformées, associées aux coordonnées de l'axe de rotation de la forme à faire pivoter.

Code^C

transform → scale(1,1)

Redimensionne la forme, l'affiche plus grande ou plus petite que ses dimensions d'origine.

↑
Les cercles sont tracés au centre de l'image (64,64), on remarque que le changement d'échelle prend pour point d'origine l'angle supérieur gauche (0,0).

Code^C

Détails^D

↑
Ici, le centre d'origine des cercles est situé dans l'angle supérieur gauche (0,0). Le positionnement au centre de l'image est assuré par translate(64,64), l'échelle emporte avec elle le centre du cercle comme point de référence, offrant ainsi un redimensionnement concentrique.

Code^C

transform → skewX(0)
transform → skewY(0)

skewX et skewY permettent d'étirer dans les sens opposés horizontalement ou verticalement, créant ainsi un phénomène de distorsion, ou de simulation de perspective isométrique.

Code^C

Détails^D

Code^C

<animate>

La balise animate se place à l'intérieur d'une forme ou d'un groupe de formes. Plusieurs propriétés sont indispensables pour que l'animation soit opérationnelle.

• attributeName
  Nom de la propriété à animer.
• from
  Valeur au début de l'animation.
• to
  Valeur à la fin de l'animation.
• dur
  Durée de l'animation, exprimée en seconde (s).

Code^C

Détails^D

On peut remplacer les 2 attributs from et to par un seul et unique attribut: values. on précisera une suite de valeurs, offrant ainsi la possibilité de davantage détailler les étapes de notre animation, et même, avec une valeur de début et de fin identique, de créer une animation en boucle.

Code^C

↑
On peut créer des mouvements plus complexes en animant plusieurs attributs simultanément, et en jouant avec des durées d'animation différentes.

Code^C

↑
Il est possible d'animer l'intégralité des attributs d'une forme données. Dans ce cas le rayon du cercle.

Code^C

↑
On anime ici la propriété fill, observer dans le code comment sont décrites les couleurs.

Code^C

<animateTransform>

La balise animateTransform se place à l'intérieur d'une forme ou d'un groupe de formes. Elle fonctionne avec les mêmes propriétés dur, from, to, values que la balise animate, mais avec quelques subtilités supplémentaires.

• attributeName
  Nom de la propriété à animer. Dans ce cas, uniquement transform
• type
  type de transformation : translate | rotate | scale | skewX | skewY
• from | to | values
  Valeur au début et à la fin, ou pour la totalité de l'animation.
  Les valeurs doivent avoir la meme structure que ce qui est indiqué entre les parenthèses du type de transformation.
• dur
  Durée de l'animation.

Code^C

Détails^D

↑
Pour une transformation de type rotate, on indique 3 valeurs (rotation en degré, position x et y). Observez dans le code comment sont précisées les valeurs values pour la rotation.

Code^C

↑
Pour une transformation de type scale, on indique 2 valeurs (échelle horizontale et échelle verticale). On constate que la transformation d'échelle s'effectue en fonction de l'angle supérieur gauche.

Code^C

Code^C

<animateMotion>

Pour déplacer une forme selon une trajectoire précise, définie par un tracé.

Code^C

Détails^D

Code^C