Le prologue est la première instruction de tout fichier SVG. Il indique la version XML utilisée.
<?xml version="1.0" encoding="utf-8"?>
<svg width="100" height="100">
...
</svg>
Une image SVG est entièrement contenue dans une balise svg.
À l’intérieur de la balise svg, on peut placer différentes formes, comme des rectangles, lignes, cercles, etc.
Les éléments sont dessinés dans l’ordre dans lequel ils apparaissent dans le code:
les derniers éléments seront dessinés au-dessus des premiers éléments s’ils sont au même emplacement.
Contrairement au HTML, la syntaxe SVG est sensible à la casse et les valeurs des attributs doivent toujours être placées entre guillemets, même pour des nombres.
Pour placer les éléments à l’intérieur du SVG, on précise les coordonnées x et y de la forme.
Le point d’origine (0,0) est le coin supérieur gauche du SVG.
La valeur de x pousse la forme vers la droite et la valeur de y vers le bas à partir du point d’origine.
Les formes qui dépassent la zone d’affichage du SVG sont tronquées.
Les attributs width et height spécifient la taille d’affichage du SVG.
Si l’unité n’est pas précisé, il s’agit par défaut de pixels.
Par exemple, pour créer une image SVG (vide) de 100px par 100px:
<svg width="100px" height="100px"></svg>
L’attribut viewBox définit les dimensions du dessin.
Les dimensions du viewbox n’ont pas d’unité, pas plus que les attributs de largeur et de hauteur des éléments à l’intérieur du SVG. La raison est simple: un SVG peut être agrandit ou rétrécit à volonté — notamment avec width et height.
Le viewBox définit les valeurs suivantes (séparées par des espaces ou des virgules):
viewBox="min-x min-y width height"
Par exemple, pour spécifier que le SVG doit être affiché sur 200px par 200px, on utilise les attributs width et height; et pour spécifier que les dimensions du SVG est 100 par 100, on utilise l’attribut viewBox — chaque unité du SVG vaut donc deux pixels, on double la taille du contenu.
<svg width="200" height="200" viewBox="0 0 100 100">
Si on ne définit pas de viewbox, les dimensions du SVG sont considérés être la taille d’affichage.
JSFiddle viewbox
Lorsqu’on redimensionne l’image, par défaut, le ratio des formes est toujours respecté et le contenu du SVG est centré au milieu.
Ce comportement peut être modifié avec l’attribut preserveAspectRatio. JSFiddle preserveAspectRatio.
<svg width="100" height="50" viewBox="0 0 100 100" preserveAspectRatio="none">
Contrairement à HTML, un élément SVG peut inclure d’autres éléments SVG. Il est donc possible d’utiliser différents systèmes de coordonnées, en définissent les attributs viewBox, width et height de ce sous-document.
<svg width="100" height="100">
<svg width="100" height="100" viewBox="0 0 50 50">
<circle cx="25" cy="25" r="25" fill="blue" />
</svg>
<circle cx="25" cy="25" r="25" fill="red" />
</svg>
La balise rect permet d’afficher un rectangle de taille widthxheight.
Le coin supérieur gauche du rectangle est positionné au point (x,y).
<rect x="5" y="5" width="50" height="90" fill="white" />
Par arrondir les coins, définir les attributs rx et ry.
<rect x="5" y="5" rx="5" ry="5" width="45" height="45" fill="white" />
<rect x="50" y="50" rx="5" ry="15" width="45" height="45" fill="white" />
La balise circle permet de dessiner un cercle de rayon r.
Le centre du cercle est positionné au point (cx, cy).
<circle cx="20" cy="20" r="15" fill="white" />
La balise ellipse permet de dessiner une ellipse de rayon horizontal rx et de rayon vertical ry.
Le centre de l’ellipse est positionné au point (cx, cy).
<ellipse cx="20" cy="20" rx="15" ry="5" fill="white" />
La balise line permet de tracer une ligne droite entre le point (x1, y1) et le point (x2, y2).
<line x1="10" y1="10" x2="50" y2="50" stroke="white" stroke-width="5" />
La balise polyline permet de tracer des lignes droites entre plusieurs points.
Les différents points peuvent être séparés par des virgules ou des espaces.
<polyline points="10 10, 15 20, 20 15, 25 30, 30 25, 35 40, 40 35, 45 50, 50 45, 80 10"
stroke="white" stroke-width="5" fill="red" />
La balise polygon permet de tracer des lignes droites entre plusieurs points, même principe que polyline à la différence près qu’on crée une forme fermée.
<polygon points="10 10, 15 20, 20 15, 25 30, 30 25, 35 40, 40 35, 45 50, 50 45, 80 10"
stroke="white" stroke-width="5" fill="red" />
La balise path permet de créer des formes complexes à partir d’une série de lignes droites et courbes.
L’attribut d définit la liste des commandes a exécuter. Chaque commande est représentée par une lettre spécifique et est suivit de paramètres.
Par exemple, M20,30 déplace le curseur à la position (20,30)
Les deux nombres de chaque point peuvent être séparés par une virgule ou un espace.
<path d="M20,30 Q40,5 50,30 T90,30" stroke="white" stroke-width="5" />
Toutes les commandes peuvent être appelées soit avec
Les différentes commandes sont:
| Commande | Nom | Description |
|---|---|---|
Mx,y |
Move | Se déplacer vers le point (x,y), sans rien tracer |
Lx,y |
LineTo | Tracer une ligne droite vers le point (x,y) |
Hx |
Horizontal lineTo | Tracer une ligne droite vers le point (x,.) |
Vy |
Vertical lineTo | Tracer une ligne droite vers le point (.,y) |
Z |
ClosePath | Fermer le chemin. Trace une ligne droite de la position actuelle au premier point du chemin |
Cx1 y1, x2 y2, x y |
Cubic Bezier | Tracer une courbe de Bézier cubique entre la position actuelle et (x,y). (x1,y1) et (x2,y2) sont les points de contrôle de la courbe |
Sx2 y2, x y |
Shorthand | Tracer une courbe de Bézier cubique entre la position actuelle et (x,y). Le premier point de contrôle est automatiquement calculé pour être symétrique au dernier point de contrôle de la commande qui le précéde ( S ou C).(x2,y2) est le deuxième point de contrôle de la courbe. |
Qx1 y1, x y |
Quadratic Bezier | Tracer une courbe de Bézier quadratique entre la position actuelle et (x,y). (x1,y1) est le point de contrôle de la courbe |
Tx y |
Shorthand | Tracer une courbe de Bézier quadratique entre la position actuelle et (x,y). Le point de contrôle est automatiquement calculé pour être symétrique point de contrôle de la commande qui le précéde ( Q ou T). |
Arx ry 0 0 1 x y |
Elliptical Arc | Tracer un arc entre la position actuelle et (x,y), de rayon horizontal rx et de rayon vertical ry. Voir MDN pour la liste complète des paramètres de Arc |
La balise text permet d’ajouter du texte dans le SVG.
Par défaut, le point (x,y) désigne la position du coin inférieur gauche du texte.
Il est possible de modifier ce comportement, et modifier l’alignement horizontal de l’élément, avec l’attribut text-anchor
<text x="5" y="15" fill="white">Hello World</text>
La balise tspan doit être un enfant de text ou tspan. Elle permet de baliser des sous-parties de texte.
<text x="5" y="15" fill="white">
This is <tspan font-weight="bold" fill="red">bold</tspan>
</text>
Les attributs dx et dy permettent de décaler l’élément par rapport à sa position d’origine.
Ça permet par exemple d’ajouter des retours à la ligne.
<text x="5" y="15" fill="white">
<tspan>A</tspan>
<tspan x="5" dy="1em">B</tspan>
<tspan x="5" dy="1em">C</tspan>
</text>
La balise textPath permet de placer du texte sur une ligne définit par un élément path.
Attention, si le texte dépasse la ligne, il est tronqué.
<path id="MyPath" fill="none" stroke="red"
d="M10,90 Q90,90 90,45 Q90,10 50,10 Q10,10 10,40 Q10,70 45,70 Q70,70 75,50" />
<text fill="white">
<textPath href="#MyPath">The quick brown fox jumps over the lazy dog.</textPath>
</text>
La balise g (pour groupe) permet de grouper un ensemble de formes, un peu à la manière d’un div en HTML. Cette balise peut être utile 1. pour que le code soit plus compréhensible 2. pour appliquer des interractions utilisateur (comme :hover) 3. pour appliquer des transformations sur plusieurs formes (transform) 4. pour appliquer un même style (fill, stroke, etc) sur plusieurs éléments.
<style>
g:hover * { fill: green; }
</style>
<g>
<rect x="5" y="5" width="50" height="50" fill="white" />
<rect x="20" y="20" width="50" height="50" fill="red" />
</g>
La balise image permet d’insérer une image (vectorielle ou bitmap) dans le document SVG.
<image width="128" height="146" xlink:href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" />
La balise foreignObject permet d’inclure à l’intérieur du SVG des éléments d’un espace de noms XML différent. Dans le contexte d’un navigateur web, il s’agit généralement d’inclure du XHTML/HTML. Dans le cas d’un SVG intégré dans du HTML, le namespace XHTML peut être omis, mais il est obligatoire dans le contexte d’un document SVG standalone.
<foreignObject x="20" y="20" width="160" height="160">
<div xmlns="http://www.w3.org/1999/xhtml" style="font-size: 28px; overflow: auto; height: 100%;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</foreignObject>
La balise switch affiche le premier élément enfant dont les attributs requiredFeatures, requiredExtensions et systemLanguage sont évalués à vrai. Les attributs non spécifiés valent vrai: un élément sans aucun attribut sera forcemment affiché si aucun élément n’a été affiché avant lui — ce qui revient à définir une valeur par défaut.
L’exemple suivant affiche un texte différent suivant les paramètres de langue du navigateur, ou affiche un emoji si la langue de l’utilisateur n’est pas dans la liste:
<switch>
<text systemLanguage="ar">مرحبا</text>
<text systemLanguage="de,nl">Hallo!</text>
<text systemLanguage="en">Hello!</text>
<text systemLanguage="en-us">Howdy!</text>
<text systemLanguage="en-gb">Wotcha!</text>
<text systemLanguage="en-au">G'day!</text>
<text systemLanguage="es">Hola!</text>
<text systemLanguage="fr">Bonjour!</text>
<text systemLanguage="ja">こんにちは</text>
<text systemLanguage="ru">Привет!</text>
<text>☺</text>
</switch>