SVG
Le Scalar Vector Graphics (SVG) est un format d'image vectorielle basé sur le langage XML, permettant de créer des graphiques évolutifs qui s'adaptent sans perte de qualité à toutes les tailles d'écran. Contrairement aux images matricielles (comme PNG ou JPEG), les SVG sont définis par des instructions textuelles décrivant des formes, des couleurs et des transformations, ce qui les rend légers, modifiables et idéaux pour le web. Grâce à leur intégration dans le HTML, les SVG peuvent être manipulés dynamiquement avec CSS ou JavaScript pour créer des animations ou des graphiques interactifs.
On utilise de plus en plus la norme Scalar Vector Graphics (SVG) pour dessiner des figures en utilisant le XML. Vous pouvez déjà utiliser le format SVG avec plusieurs logiciels de bureautique ou tout simplement insérer un élément « svg » dans un document HTML comme nous allons le voir.
La syntaxe SVG (Scalable Vector Graphics) repose sur un langage basé sur XML pour décrire des graphiques vectoriels bidimensionnels. Les principaux concepts incluent les éléments graphiques comme rect, circle, line, polygon ou path, qui définissent des formes géométriques. Ces éléments sont configurés via des attributs tels que x, y pour la position, width, height pour les dimensions, ou fill et stroke pour les couleurs et contours. Les transformations (via transform) permettent de déplacer, faire pivoter ou mettre à l’échelle les formes. SVG utilise un système de coordonnées où l’origine (0,0) est en haut à gauche, et les unités peuvent être absolues (px, cm) ou relatives (%). Enfin, les groupes (g) et les styles (via CSS ou l’attribut style) facilitent l’organisation et la personnalisation des éléments, rendant SVG flexible pour des graphiques interactifs et adaptatifs.
Les attributs en SVG jouent un rôle clé pour définir les propriétés des éléments graphiques et contrôler leur apparence ou comportement. Parmi les attributs géométriques, on trouve x et y pour positionner un élément, width et height pour ses dimensions, ou cx et cy pour le centre d’un cercle. Les attributs de présentation comme fill déterminent la couleur de remplissage, stroke la couleur et stroke-width l’épaisseur du contour, tandis que opacity ajuste la transparence. Pour les formes complexes, path utilise l’attribut d pour décrire des trajectoires via des commandes comme M (move to), L (line to) ou C (courbe de Bézier). Les attributs de transformation, comme transform avec translate, rotate ou scale, modifient la position ou l’orientation. Enfin, des attributs comme id et class permettent d’identifier ou de styliser via CSS, et viewBox contrôle le cadre de visualisation pour un rendu adaptatif. Ces attributs offrent une grande précision pour personnaliser les graphiques SVG.
Principales balises et éléments SVG
Voici les éléments les plus couramment utilisés, avec leur rôle et un exemple simple.
| Élément | Description | Exemple d’utilisation | Rendu approximatif |
|---|---|---|---|
<svg> | Conteneur racine obligatoire. Définit la zone de dessin avec
width
,
height
et
viewBox
. | <svg width="200" height="200" viewBox="0 0 200 200"></svg> | Zone carrée 200×200 |
<rect> | Rectangle (coins éventuellement arrondis avec
rx
et
ry
). | <rect x="10" y="10" width="100" height="60" rx="10"/> | Rectangle arrondi |
<circle> | Cercle défini par centre (
cx
,
cy
) et rayon
r
. | <circle cx="100" cy="100" r="80"/> | Cercle centré |
<ellipse> | Ellipse avec rayons horizontal
rx
et vertical
ry
. | <ellipse cx="100" cy="70" rx="80" ry="40"/> | Ovale |
<line> | Segment de droite entre deux points. | <line x1="0" y1="0" x2="200" y2="100"/> | Diagonale |
<polyline> | Série de segments connectés (liste de points). | <polyline points="0,100 50,20 100,80 150,10 200,100"/> | Ligne brisée |
<polygon> | Polygone fermé (le dernier point est relié au premier). | <polygon points="100,10 160,90 40,90"/> | Triangle |
<path> | Forme la plus puissante : courbes de Bézier, arcs, etc. via l’attribut
d
. | <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"/> | Courbe cubique symétrique |
<text> | Texte. Position avec
x
,
y
; rotation avec
transform
ou
rotate
. | <text x="100" y="50" text-anchor="middle">Bonjour</text> | Texte centré |
<tspan> | Sous-élément de
<text>
pour changer de style ou position à l’intérieur d’un même texte. | <text><tspan font-weight="bold">Gras</tspan> normal</text> | Partie en gras |
<g> | Groupe d’éléments. Permet d’appliquer des attributs ou transformations communes. | <g fill="red"><circle …/><rect …/></g> | Tous les enfants en rouge |
<defs> | Définit des éléments réutilisables (gradients, patterns, symboles, clipPath…). | <defs><linearGradient id="grad">…</linearGradient></defs> | — |
<use> | Réutilise un élément défini dans
<defs>
ou ailleurs. | <use href="#monSymbole" x="50" y="50"/> | Instance du symbole |
<linearGradient>
&
<radialGradient> | Dégradés linéaire ou radial. | <linearGradient id="g1"><stop offset="0%" stop-color="gold"/><stop offset="100%" stop-color="red"/></linearGradient> | Dégradé or → rouge |
<pattern> | Motif répétitif (carreaux, rayures, images…). | <pattern id="dots" …><circle cx="5" cy="5" r="3"/></pattern> | Points répétés |
<marker> | Flèches ou symboles aux extrémités de
<path>
,
<line>
, etc. | <marker id="fleche"><path d="M0,0 L0,6 L9,3 z"/></marker> | Flèche à la fin du trait |
<clipPath> | Masque de découpage. | <clipPath id="cercleClip"><circle cx="100" cy="100" r="80"/></clipPath> | Ne montre que l’intérieur du cercle |
<filter>
+ primitives (
<feGaussianBlur>
,
<feOffset>
, etc.) | Effets graphiques (ombre portée, flou, glow…). | <filter id="ombre"><feGaussianBlur stdDeviation="4"/></filter> | Ombre floue |
Ces éléments couvrent la très grande majorité des besoins en illustration vectorielle, diagrammes, icônes animées et graphiques interactifs dans les pages web modernes. SVG est entièrement stylisable avec CSS et animable avec SMIL ou JavaScript.
Laboratoire
Je vous invite à éditer le code SVG au sein de la boîte suivante pour observer le résultat. Le SVG est notamment mis en forme à l'aide du CSS, un notion que nous allons explorer plus tard dans le cours.
Code SVG
Rendu SVG
Pour approfondir votre compréhension du SVG, essayez les activités suivantes dans la boîte de code ci-dessus :
- Changez la couleur du rectangle (par exemple, remplacez
fill: #3498dbparfill: #f1c40f) ou ajustez le rayon du cercle (modifiezr="30"àr="50"). - Insérez un triangle en utilisant l'élément
<polygon points="150,100 200,150 100,150" style="fill: #8e44ad; stroke: #2c3e50; stroke-width: 2;" />à l'intérieur de la balise<svg>. - Appliquez une rotation au rectangle en ajoutant
transform="rotate(45 70 50)"à l'élément<rect>pour le faire pivoter autour de son centre. - Combinez plusieurs formes (cercles, rectangles, lignes) pour dessiner une maison simple ou un autre objet de votre choix.
- Testez des propriétés CSS comme
fill-opacity: 0.5oustroke-dasharray: 5,5pour créer des effets de transparence ou de pointillés.
On peut utiliser la norme SVG pour générer des graphiques dynamiques au sein de pages web scriptées.