svg et le web

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, 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 également le potentiel pas trop exploité qu’il recèle.

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 comporte 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.

Intégration du SVG

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

A 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 :

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.

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 :

<object data="svg/paperclip.svg"
    width="100"
    height="100"
    type="image/svg+xml">
</object>

Maintenant le fichier SVG peut appeler des ressources externe, 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.

Le SVG dans le HTML

On peut aussi grâce à la balise svg mettre le code directement dans une page HTML5 :

<!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 sue cette balise SVG est à la fois enfant dans le DOM de la page mais 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 pseudo-classes.

Le SVG comme image de fond

On peut aussi utiliser l’image SVG comme image de fond avec le CSS :

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.

Le style

Il y a plusieurs façons de styliser une image SVG.

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.

Style en ligne

A 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).

Bloc de style dans le SVG

On peut mettre un bloc de style directement dans le SVG :

<svg height="400" width="400">
    <style>
        polygon {
            fill: magenta;
            stroke: orange;
            stroke-width: 5;
        }
    </style>
    <polygon points="100,10 40,198 190,78 10,78 160,198" />
</svg>

Bloc de style dans le HTML

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

<!DOCTYPE html>
<html>
<style>
    polygon {
        fill: magenta;
        stroke: orange;
        stroke-width: 5;
    }
</style>
<body>
    <svg height="400" width="400">
        <polygon points="100,10 40,198 190,78 10,78 160,198" />
    </svg>              
</body>
</html>

Fichier externe

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

<svg height="400" width="400">
    <style type="text/css" >
        @import "style.css";
    </style>
    <polygon points="100,10 40,198 190,78 10,78 160,198" />
</svg>

Conclusion

On a fait un peu le point sur l’intégration du SVG et sa mise en forme.

 

Laisser un commentaire