Tutoriel pour apprendre à utiliser le format SVG

SVG et le web

Maurice Chavelli

Quelle est la place du SVG dans le web ? De façon classique, les sites sont créés avec du marquage HTML pour la structure, des règles CSS pour le style et du JavaScript pour la dynamique. C'est une organisation maintenant bien établie.

Le SVG change un peu la donne. Avec lui, l'aspect devient le principal élément dans une organisation structurée, qui peut embarquer du style et des scripts. Il devient alors délicat d'avoir une vue cohérente de son intégration dans la vision classique.

Dans cet article, je vais tenter de montrer comment le SVG a trouvé sa place et présenter également le potentiel encore peu exploité qu'il recèle.

Commentez

- Titre : Tutoriel pour apprendre à utiliser le format SVG

- Auteur : Maurice Chavelli

- Parution : 13 août 2019

- Licence : Copyright ® 2018 Maurice Chavelli. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Voir également :

- Tutoriel pour apprendre à utiliser le format SVG - Les bases

Sommaire

- I. Le SVG

- II. Intégration du SVG

- II-A. Le SVG comme une image

- II-B. Le SVG intégré (embedded)

- II-C. Le SVG dans le HTML

- II-D. Le SVG comme image de fond

- III. Le style

- III-A. Les attributs

- III-B. Style en ligne

- III-C. Bloc de style dans le SVG

- III-D. Bloc de style dans le HTML

- III-E. Fichier externe

- IV. Conclusion

- V. Remerciements

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 :

1. img {

2. display: block;

3. margin-left: auto;

4. margin-right: auto;

5. width: 50%;

6. }

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 :

1. <object data="svg/paperclip.svg"

2. width="100"

3. height="100"

4. type="image/svg+xml">

5. </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 :

1. <!DOCTYPE html>

2. <html>

3. <body>

4. <svg version="1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 511 511">

5. <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"/>

6. </svg>

7. </body>

8. </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 :

1. body {

2. background-image: url('svg/paperclip.svg');

3. width: 20px;

4. height: 20px;

5. }

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 :

1. <svg height="400" width="400">

2. <style>

3. polygon {

4. fill: magenta;

5. stroke: orange;

6. stroke-width: 5;

7. }

8. </style>

9. <polygon points="100,10 40,198 190,78 10,78 160,198" />

10. </svg>

III-D - Bloc de style dans le HTML

Le style peut aussi se trouver dans un bloc de la page HTML :

1. <!DOCTYPE html>

2. <html>

3. <style>

4. polygon {

5. fill: magenta;

6. stroke: orange;

7. stroke-width: 5;

8. }

9. </style>

10. <body>

11. <svg height="400" width="400">

12. <polygon points="100,10 40,198 190,78 10,78 160,198" />

13. </svg>

14. </body>

15. </html>

III-E - Fichier externe

Enfin, on peut aussi avoir les règles dans un fichier externe :

1. <svg height="400" width="400">

2. <style type="text/css" >

3. @import "style.css";

4. </style>

5. <polygon points="100,10 40,198 190,78 10,78 160,198" />

6. </svg>

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.