I. Le SVG▲
SVG est à la fois construit avec le langage XML, donc quelque chose de bien structuré et aussi un format graphique. Ainsi, on ne peut pas séparer l'aspect graphique de la structure !
Internet pullule d'images, mais elles sont en majorité aux formats PNG, JPG… De telles images se contentent d'être une représentation pixélisée et ne comportent rien d'autre. Il en va bien différemment du SVG ! Il est structuré, stylisable et modifiable.
On peut même utiliser directement un fichier SVG pour créer une application utilisable sur le WEB.
Le souci principal avec le SVG est sa prise en charge assez aléatoire selon les navigateurs, mais c'est également vrai pour certaines fonctionnalités du CSS3.
En 2016 a été lancée la version 2 du SVG, mais combien de temps faudra-t-il avant de pouvoir l'utiliser ? Pour le moment, il faut se contenter de la version 1.1.
II. Intégration du SVG▲
II-A. Le SVG comme une image▲
La façon la plus simple d'intégrer du SVG dans une page html est d'utiliser la balise img, après tout c'est comme ça qu'on a l'habitude d'intégrer une image !
Par exemple, j'ai ce fichier SVG (paperclip.svg) qui représente un trombone :
<svg version="1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 511 511">
<path d="M112 483H64c-35 0-64-29-64-64v-48c0-15 6-29 16-39L304 44c10-10 25-16 40-16h103c35 0 64 28 64 64v103c0 15-6 29-16 40L347 382a16 16 0 1 1-23-22l148-148c4-4 7-10 7-17V92c0-18-14-32-32-32H344c-7 0-13 2-17 7L39 354c-4 5-7 11-7 17v48c0 17 14 32 32 32h48c6 1 13-2 17-7l217-217-30-30-189 189a16 16 0 1 1-22-23l189-189c12-12 33-12 45 0l30 30a32 32 0 0 1 0 46L152 467a56 56 0 0 1-40 16z" fill="#ff4f19"/>
</svg>
Je peux appeler ce fichier dans une balise image classique :
<img src="svg/paperclip.svg" alt="Mon beau trombone" />À partir de là, je dispose de toute la panoplie des règles CSS pour traiter cette image. Par exemple, on peut la centrer et limiter sa dimension à 50 % de la largeur disponible :
2.
3.
4.
5.
6.
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
Et ça fonctionne comme toutes les autres images, à part que là, je suis sûr que mon image sera impeccable dans toutes les résolutions.
C'est simple, mais on perd plein de possibilités du SVG :
- les scripts ne fonctionnent pas pour des raisons évidentes de sécurité ;
- l'image ne peut pas être modifiée par un script de la page ;
- on ne peut pas intercepter un événement comme un clic spécifique ;
- on ne peut pas appeler un fichier externe (par exemple un fichier CSS, mais évidemment, les règles internes fonctionnent).
Si on admet ces limitations alors la procédure est parfaite.
II-B. Le SVG intégré (embedded)▲
Si on n'est pas trop partant pour les limitations vues ci-dessus, une autre approche consiste à intégrer le SVG avec une balise object :
2.
3.
4.
5.
<object data="svg/paperclip.svg"
width="100"
height="100"
type="image/svg+xml">
</object>
Maintenant, le fichier SVG peut appeler des ressources externes et utiliser du JavaScript. Par contre, il doit contenir ses propres règles CSS.
D'autre part, l'image ne peut pas être transformée en lien comme c'est le cas avec la balise image.
On peut aussi utiliser un balise iframe de la même manière.
II-C. Le SVG dans le HTML▲
On peut aussi, grâce à la balise svg, mettre le code directement dans une page HTML5 :
2.
3.
4.
5.
6.
7.
8.
<!DOCTYPE html>
<html>
<body>
<svg version="1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 511 511">
<path d="M112 483H64c-35 0-64-29-64-64v-48c0-15 6-29 16-39L304 44c10-10 25-16 40-16h103c35 0 64 28 64 64v103c0 15-6 29-16 40L347 382a16 16 0 1 1-23-22l148-148c4-4 7-10 7-17V92c0-18-14-32-32-32H344c-7 0-13 2-17 7L39 354c-4 5-7 11-7 17v48c0 17 14 32 32 32h48c6 1 13-2 17-7l217-217-30-30-189 189a16 16 0 1 1-22-23l189-189c12-12 33-12 45 0l30 30a32 32 0 0 1 0 46L152 467a56 56 0 0 1-40 16z" fill="#ff4f19"/>
</svg>
</body>
</html>
La page HTML risque ainsi de prendre un peu d'embonpoint.
Il faut bien voir que cette balise SVG est à la fois enfant dans le DOM de la page et parente pour l'image. La page peut uniquement intervenir globalement sur l'image (position, dimension…).
Un grand avantage, c'est que le style de la page agit sur les éléments de l'image ainsi que le JavaScript. On peut même utiliser des pseudoclasses.
II-D. Le SVG comme image de fond▲
On peut aussi utiliser l'image SVG comme image de fond avec le CSS :
2.
3.
4.
5.
body {
background-image: url('svg/paperclip.svg');
width: 20px;
height: 20px;
}
Mais évidemment, on se retrouve avec les mêmes limitations que la balise image.
L'adresse de l'image peut être absolue ou relative.
III. Le style▲
Il y a plusieurs façons de styliser une image SVG.
III-A. Les attributs▲
La façon la plus simple de styliser est d'utiliser des attributs, voici un exemple :
<svg height="400" width="400">
<polygon points="100,10 40,198 190,78 10,78 160,198" fill="magenta" stroke="orange" stroke-width="5" />
</svg>
Les attributs sont sensibles à la casse (minuscules et majuscules), un attribut doit être présent une seule fois.
III-B. Style en ligne▲
À la place des attributs, on peut utiliser des règles CSS dans la balise :
<polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:magenta;stroke:orange;stroke-width:5"/>Ces valeurs prennent le pas sur les attributs et les règles de style de la page (sauf !important).
III-C. Bloc de style dans le SVG▲
On peut mettre un bloc de style directement dans le SVG :
III-D. Bloc de style dans le HTML▲
Le style peut aussi se trouver dans un bloc de la page HTML :
III-E. Fichier externe▲
IV. Conclusion▲
On a fait un peu le point sur l'intégration du SVG et sa mise en forme.
V. Remerciements▲
Nous tenons à remercier Maurice Chavelli qui nous a autorisés à publier ce tutoriel.
Nous remercions également Winjerome pour la mise au gabarit, et escartefigue pour la correction orthographique.