SVG : Création Images Vectorielles

Le SVG (Scalable Vector Graphics) est un langage de description à balises permettant de réaliser des graphiques et images vectorielles. Il appartient à la famille des langages dérivés du SGML (Standard Generalized Markup Language). Le langage SVG consiste à décomposer une image ou un graphique en éléments de bases et à mémoriser leurs équation mathématiques.

Contrairement aux images "matricielles" qui sont mémorisées sous formes de tableaux de secteurs colorés (pixels ou groupes de pixels), les images vectorielles ont une qualité constante quelque soit la résolution de l'écran ou l'agrandissement effectué sur l'image; l'image étant recalculée et reconstruite par la navigateur à chaque chargement ou rafraichissement de la page. Egalement le stockage des images vectorielles nécessitent beaucoup moins d'espace mémoire que les images matricielles, cependant elles sont limitées en complexité étant donné que chaque élément, chaque détail de l'image doit pouvoir être décomposé en éléments géométriques simples descriptibles sous forme d'équations mathématiques. De plus le code SVG est directement intégrable dans le DOM (Document Object Model) au sein même du code HTML ou XML, sans avoir à créer un lien vers un document anexe, ce qui facilite grandement la portabilité DOM.

Cette page est construite en s'inspirant des travaux de la communauté MDN Web Docs, pour chaque paragraphes le lien vers la page source est mentionné par les lettres "MDN" mises en apostrophe.

---

Formes géométriques de base

CIRCLE : Elément "cercle" ^MDN

Attributs propre :
• cx : Position centre du cercle sur axe horizontal;
• cy : Position centre du cercle sur axe vertical;
• r : Rayon du cercle;
• pathLength : Longueur totale de la circonférence en unité utilisateur.


Exemple de code :
<svg viewBox="0 0 300 100"> <circle cx="50" cy="50" r="40"/> <circle cx="50%" cy="50%" r="10%" fill="red"/> </svg>

ELLIPSE : Elément "éllipse" ^MDN

Attributs propre :
• cx : Position centre de l'éllipse sur axe horizontal;
• cy : Position centre de l'éllipse sur axe vertical;
• rx : Rayon de l'éllipse suivant axe horizontal;
• ry : Rayon de l'éllipse suivant axe vertical.

NB: Si un des deux rayons "rx" ou "ry" est ommis sa valeur par défaut est égale à la valeur de l'autre rayon, ce qui revient à tracer un cercle.



Exemple de code :
<svg viewBox="0 0 300 100"> <ellipse cx="50" cy="50" rx="50" ry="30"/> <ellipse cx="50%" cy="50%" rx="10%" ry="10%" fill="red"/> <ellipse cx="75%" cy="50%" rx="10%" fill="green"/> </svg>

RECT : Elément "rectangle"

Attributs propre :
• x : Position coin supérieur gauche du rectangle sur axe horizontal;
• y : Position coin supérieur gauche du rectangle sur axe vertical;
• width : Largeur du rectangle;
• height : Hauteur du rectangle;
• rx : Rayon coins du rectangle suivant axe horizontal;
• ry : Rayon coins du rectangle suivant axe vertical.


Caractéristique attributs propres :
• Unité de valeur : pixel ("px") ou pourcentage ("%");
• Valeur par défaut : "0";
• Modifiables par fonction d'animation "animate".


Exemple de code :
<svg viewBox="0 0 300 100"> <rect width="100" height="100"/> <rect x="110" y="25%" width="80" height="50%" fill="red"/> <rect x="200" y="10%" width="25%" height="80%" rx="30" ry="20" fill="green"/> </svg>

LINE : Elément "ligne droite"

Attributs propre :
• x1 : Position 1ere extrémité de la ligne sur axe horizontal;
• y1 : Position 1ere extrémité de la ligne sur axe vertical;
• x2 : Position 2eme extrémité de la ligne sur axe horizontal;
• y2 : Position 2eme extrémité de la ligne sur axe vertical;


Exemple de code :
<svg viewBox="0 0 300 50"> <!-- NB: l'élément "stroke" est ici nécessaire pour la visualisation de l'élément "line" à l'écran --> <line x1="0" y1="0" x2="110" y2="100%" stroke="black"/> <line x1="115" y1="0" x2="75%" y2="25%" stroke="red"/> </svg>

Tracer de lignes et courbes

PATH : Elément "chemin"

Attributs propre :
• d : Définit le tracé à dessiner au moyen des différentes méthodes ci-dessous:
• MoveTo : "M x y" (coordonnées absolues)
• LineTo : "L x y" (coordonnées absolues) | "l dx dy" (coordonnées relatives)
• HorizontalLineTo : "H x" (coordonnées absolues) | "h dx" (coordonnées relatives)
• VerticalLineTo : "V y" (coordonnées absolues) | "v dy" (coordonnées relatives)
• ClosePath : "Z" (coordonnées absolues) | "z" (coordonnées relatives)
• CurveTo : "C x1 y1, x2 y2, x y" (coordonnées absolues) | "c dx1 dy1, dx2 dy2, dx dy" (coordonnées relatives)
• ShorthandCurveTo : "S x2 y2, x y" (coordonnées absolues) | "s dx2 dy2, dx dy" (coordonnées relatives)
• QuadraticBezierCurveTo : "Q x1 y1, x y" (coordonnées absolues) | "q dx1 dy1, dx dy" (coordonnées relatives)
• ShorthandQuadraticBezierCurveTo : "T x y" (coordonnées absolues) | "t dx dy" (coordonnées relatives)
• EllipticalArc : "A rx ry x-axis-rotation large-arc-flag sweep-flag x y" (coordonnées absolues) | "a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy" (coordonnées relatives)


Exemple de code :
<svg viewbox="0 0 300 100"> <path d="M 10 10 L 10 90 L 120 90 Z" fill="none" stroke="blue"/> <path d="M 10 10 C 10 80 20 90 120 90" fill="none" stroke="red"/> <path d="M 10 10 Q 10 90 120 90" fill="none" stroke="green"/> <path d="M 180 10 V90 H290 Z" fill="none" stroke="blue"/> </svg>

Les paragraphes suivant décrivent chacune des méthodes utilisées dans l'attribut "d" de l'élément "path" présenté précédemment.

MoveTo : Positionner curseur

• Syntaxe : M x y (coordonnées absolues).
• Objectif : Positionner le curseur au point de coordonées (x, y) et le fixer comme point de départ du tracé à effectuer.

LineTo : Tracer ligne droite

• Syntaxe : L x y (coordonnées absolues) | l dx dy (coordonnées relatives).
• Objectif : Joindre par une ligne droite la position actuelle du curseur au point de coordonnées (x, y).
• Exemple de code :
<svg viewBox="0 0 300 50"> <path d="M 10 10 L 50 40 L 90 10" fill="none" stroke="blue"/> <path d="M 110 10 l 40 30 l 40 -30" fill="none" stroke="green"/> </svg>

HorizontalLineTo : Tracer ligne horizontale

• Syntaxe : H x (coordonnées absolues) | h dx (coordonnées relatives).
• Objectif : Joindre par une ligne droite la position actuelle du curseur au point de coordonnées (x) situé sur la même ligne horizontale.
• Exemple :
<svg viewBox="0 0 300 50"> <path d="M 10 10 L 50 40 H 90" fill="none" stroke="blue"/> <path d="M 110 10 l 40 30 h 40" fill="none" stroke="green"/> </svg>

VerticalLineTo : Tracer ligne verticale

• Syntaxe : H x (coordonnées absolues) | h dx (coordonnées relatives).
• Objectif : Joindre par une ligne droite la position actuelle du curseur au point de coordonnées (x) situé sur la même ligne horizontale.
• Exemple :
<svg viewBox="0 0 300 50"> <path d="M 10 10 L 50 40 H 90 V 10" fill="none" stroke="blue"/> <path d="M 110 10 l 40 30 h 40 v -30" fill="none" stroke="green"/> </svg>

ClosePath : Fermer le chemin

• Syntaxe : Z | z.
• Objectif : Fermer le tracé en cours d'éloboration.
• Exemple :
<svg viewBox="0 0 300 50"> <path d="M 10 10 L 50 40 H 90 V 10 Z" fill="none" stroke="blue"/> <path d="M 110 10 l 40 30 h 40 v -30 Z" fill="none" stroke="green"/> </svg>

CurveTo : Tracer courbe

• Syntaxe : C x1 y1 x2 y2 x y (coordonnées absolues) | c dx1 dy1 dx2 dy2 dx dy (coordonnées relatives).
• Objectif : Joindre la position actuelle du curseur au point de coordonnées (x, y) en traçant une courbe cubique de Bézier dont les points de contrôle ont pour coordonnés (x1, y1) et (x2, y2).
• Exemple :
<svg viewBox="0 0 300 50"> <!-- Coordonnées absolues --> <path d="M 10,10 C 10,70 30,40 90,40" fill="none" stroke="black"/> <path d="M 10,10 C 10,40 10,40 90,40" fill="none" stroke="blue"/> <path d="M 10,10 C 10,30 20,30 90,40" fill="none" stroke="red"/> <path d="M 10,10 C 10,20 50,30 90,40" fill="none" stroke="green"/> <!-- Coordonnées relatives --> <path d="M 110,10 c 0,60 20,30 80,30" fill="none" stroke="black"/> <path d="M 110,10 c 0,30 0,30 80,30" fill="none" stroke="blue"/> <path d="M 110,10 c 0,20 10,20 80,30" fill="none" stroke="red"/> <path d="M 110,10 c 0,10 40,20 80,30" fill="none" stroke="green"/> </svg>

ShorthandCurveTo : Tracer courbe cubique de Bézier

• Syntaxe : S x2 y2 x y (coordonnées absolues) | s dx2 dy2 dx dy (coordonnées relatives).
• Objectif : Prolonger un tracé par une courbe cubique de Bézier dont le 1er point de contrôle est construit suivant caractéristiques du tracé à prolonger.
• Caractéristiques particulières : Si le tracé à prolonger est une courbe cubique de Bézier (construit par les commandes C ou S), le 1er point de contrôle du nouveau tracé s'obtient par symétrie axiale du dernier point de contrôle du tracé à prolonger; si le tracé à prolonger n'est pas une courbe cubique de Bézier, le 1er point de contrôle du nouveau tracé correspondra au point de jonction entre les deux courbes (extrémité de la courbe à prolonger).
• Exemple :
<svg viewBox="0 0 300 100" fill="none"> <!-- Coordonnées absolues --> <path stroke="magenta" d="M 10,10 C 10,-20 105,50 75,50 S 140,120 140,90"/> <path stroke="blue" d="M 10,10 C 10,0 85,50 75,50 S 140,100 140,90"/> <path stroke="red" d="M 10,10 C 10,20 65,50 75,50 S 140,80 140,90"/> <path stroke="green" d="M 10,10 C 10,50 35,50 75,50 S 140,50 140,90"/> <path stroke="black" d="M 10,10 L 10,50 75,50 S 140,50 140,90"/> <!-- Coordonnées relatives --> <path stroke="magenta" d="M 160,10 c 0,-30 95,40 65,40 s 65,70 65,40"/> <path stroke="blue" d="M 160,10 c 0,-10 75,40 65,40 s 65,50 65,40"/> <path stroke="red" d="M 160,10 c 0,10 55,40 65,40 s 65,30 65,40"/> <path stroke="green" d="M 160,10 c 0,40 25,40 65,40 s 65,0 65,40"/> <path stroke="black" d="M 160,10 l 0,40 65,0 s 65,0 65,40"/> </svg>

Caractéristiques des attributs et tracés géométriques

Caractéristiques des attributs propres :

Cas général:
• Unité de valeur : pixel ("px") ou pourcentage ("%");
• Valeur par défaut : "0";
• Modifiables par fonction d'animation "animate".


Attributs "rx" et "ry": ^MDN
• Cas d'utilisation: avec éléments <ellipse> | <rect>
  définissent un rayon suivant axe "x" ou axe "y";
• Unité de valeur : pixel ("px") | pourcentage ("%") | automatique ("auto"),
  l'unité automatique attribue à un rayon la valeur du rayon qui lui est orthogonalement opposé ("rx"="ry" | "ry"="rx");
• Valeur par défaut : "auto",
  si aucun des deux rayons n'est défini, la valeur par défaut est "0";
• Modifiables par fonction d'animation <animate>.

Caractéristiques des attributs généraux :

• fill
• stroke
• stroke-width

Eléments d'animation

Elément ANIMATE

Met en mouvement un élément en faisant varier dans le temps un de ses attributs.

• Syntaxe: <animate attributs/>
• Attributs propre :
• de temps : begin; dur; end; min; max;
• de répétition : restart; repeatCount; repeatDur;
• de valeurs : attributeName; values; from; to; by; additive; accumulate;
• de contrôle : fill; calcMode; keyTimes, keySplines;
• de synchronisation : onbegin; onend; onrepeat.
• Exemple :
<svg viewbox="0 0 300 100"> <rect x="100" y="10" height="20" width="40" fill="blue"> <animate attributeName="x" dur="5s" additive="replace" repeatcount="indefinite" values="50; 100; 150"/> </rect> <rect x="100" y="40" height="20" width="40" fill="green"> <animate attributeName="x" dur="5s" additive="replace" repeatcount="indefinite" from="50" to="150"/> </rect> <rect x="100" y="70" height="20" width="40" fill="red"> <animate attributeName="x" dur="5s" additive="sum" repeatcount="indefinite" values="-50; 0; 50"/> </rect> </svg>
<svg viewBox="0 0 300 100"> <path stroke="blue" fill="none"> <animate attributeName="d" dur="10s" repeatCount="indefinite" keyTimes="0; 0.25; 0.5; 0.75; 1" values="M20,90 V10 C20,90 20,90 130,90 H20; M20,50 V10 C20,50 75,90 130,90 H50; M20,10 V10 C20,10 130,90 130,90 H130; M20,50 V10 C20,50 75,90 130,90 H75; M20,90 V10 C20,90 20,90 130,90 H20"/> </path> <path stroke="red" fill="none"> <animate attributeName="d" dur="10s" repeatCount="indefinite" keyTimes="0; 0.25; 0.5; 0.75; 1" values="M280,90 L280,10 Q280,90 170,90 Z; M280,10 L280,10 Q280,0 170,90 Z; M170,10 L280,10 Q170,10 170,90 Z; M170,90 L280,10 Q170,90 170,90 Z; M280,90 L280,10 Q280,90 170,90 Z"/> </path> </svg>

---

Exemple d'application

Utilisation de tracés SVG en Géomatique

La Géomatique, techniques de traitement informatique des données géographiques, possèdent de nombreuses applications. Dans le milieu associatif elle peut être utile pour les activités de pleine nature (courses d'orientation, randonnées, ...), pour les activités environnementales et de défense du monde vivant, pour les activités de valorisation de patrimoines, etc... Dans le secteur des services, elle peut être utile pour l'optimisation des déplacements (calcul des temps de trajets ou de la consommation de carburant), l'optimisation des tournées de visite chez les clients, etc...

Cette page a ainsi vocation de dresser, pour cette discipline, une liste non exhaustive d'application possible y associant l'usage des outils du web.

Tracés de cartes en SVG

Dans ce chapitre nous allons proposer une méthodologie de tracé de cartes géographique en langage SVG. Nous prenons en exemple le Bassin d'Arcachon.

Tout d'abord nous identifions quelques lieux d'intérêt en bord du bassin et relevons leurs coordonnées GPS; nous relevons en même temps les coordonnées GPS de points géographiques quelconques les précédant et les succédants en remontant les bords du bassin (ces derniers points serviront de points de construction pour le tracés SVG).

Ci-dessous un tableau énumérant les points d'intérêts choisis pour le tracé du Bassin d'Arcachon:

Lieu d'intérêt	Coord GPS Pt précédant	Coord GPS Lieu d'intérêt	Coord GPS Pt succédant
Plage de la Lagune	44.53,-1.26	44.55,-1.25	44.56,-1.25
Dune du Pilat	44.58,-1.22	44.59,-1.22	44.60,-1.21
Plage du Moulleau	44.64,-1.20	44.64,-1.20	44.64,-1.20
Plage d'Arcachon	44.66,-1.19	44.66,-1.17	44.66,-1.14
Pointe de l'Aiguillon	44.66,-1.14	44.65,-1.14	44.65,-1.15
Plage de La Teste	44.65,-1.15	44.65,-1.13	44.65,-1.12
...	...,...	...,...	...,...

L'étape suivant consiste à calculer les coordonnées des points de construction pour le tracé vectoriel des bords du Bassin. Le calcul dépendra du mode de projection cartographique choisie.

Lieu d'intérêt	Coord SVG Pt précédant	Coord SVG Lieu d'intérêt	Coord SVG Pt succédant
PtA	xA1,yA1	xA2,yA2	xA3,yA3
PtB	xB1,yB1	xB2,yB2	xB3,yB3
PtC	xC1,yC1	xC2,yC2	xC3,yC3
...	...,...	...,...	...,...
PtI	xI1,yI1	xI2,yI2	xI3,yI3

où:
• x_Ii est la position relative du Pt_Ii par rapport au pôle nord;
  • pour une projection equirectangulaire son unité est le degré et sa valeur est égale à "90°-Latitude du point Pt_Ii";
• y_Ii est la position relative du Pt_Ii par rapport au méridien de référence;
  • pour une projection equirectangulaire le méridien de référence est celui de Greenwich, son unité est le degré et sa valeur est égale à la Longitude du point Pt_Ii;

Ce travail effectué on trace le bord du bassin par la commande PATH.

<path d="M xA2,yA2 C xA3,yA3 xB1,yB1 xB2,yB2 C xB3,yB3 xC1,yC1 xC2,yC2 ......................... C x(I-1)3,y(I-1)3 xI1,yI1 xI2,yI2"/>

---

Ressources externes disponibles sur le sujet:
• https://developer.mozilla.org/fr/docs/Web/SVG/Tutorial (fr)
• https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial (en-US)
• https://www.w3schools.com/graphics/svg_intro.asp (en)
• https://fr.wikiversity.org/wiki/Optimiser_un_fichier_SVG (fr)