Insertion d'un document Inkscape dans une page web

Dès que vous utilisez des logiciels tels Inkscape ou Boxy SVG vous obtenez du SVG externe c'est à dire des fichiers SVG.
Se pose alors le problème de l'insertion de ces fichiers dans une page Web.
Pour insérer un fichier SVG dans une page vous pouvez utiliser les balises IMG ou OBJECT (solution HTML) ou la propriété background (solution CSS).

Insertion via le HTML

Jusqu'à présent je vous ai dit que pour intégrer une image SVG dans une page web via le HTML il suffisait d'utiliser la balise img commme pour une image matricielle.

Oui, mais à condition qu'il s'agisse de fichiers SVG simples. Dans d'autres cas il faut utiliser la balise OBJECT.

Ci-dessous trois fichiers SVG insérés dans la page web via le HTML dont deux insérés deux fois :

Le fichier "rectangles.svg"

image SVG

Le fichier "rond_auto.svg"

Ce fichier inséré deux fois : avec la balise IMG puis avec la balise OBJECT

Pas d'animation !

Animation en continu.

Le fichier "fondeurs.svg"

Fichier inséré deux fois : avec la balise IMG puis avec la balise OBJECT

Les 'sprites' (gif animés) n'apparaissent pas.

Les gifs animés apparaissent et se déplacent.

Le code de la page (extraits)

... <p>Ci-dessous trois fichiers SVG insérés dans la page web via le HTML dont deux insérés deux fois : <h4>Le fichier "rectangles.svg"</h4> <img src ="rectangles.svg" alt ="image SVG" width ="60%" /> <h4>Le fichier "rond_auto.svg"</h4> <p>Ce fichier inséré deux fois : avec la balise IMG puis avec la balise OBJECT <img src ="rond_auto.svg" width ="60%" > <p>Pas d'animation ! <object type="image/svg+xml" data="rond_auto.svg" width ="60%"></object> <p>Animation en continu. <h4>Le fichier "fondeurs.svg"</h4> <p>Fichier inséré deux fois : avec la balise IMG puis avec la balise OBJECT <img src ="fondeurs.svg" width ="60%"> <p>Les 'sprites' (gif animés) n'apparaissent pas. <object type="image/svg+xml" data="fondeurs.svg" width ="60%"></object> <p>Les gifs animés apparaissent et se déplacent. ...

Les fichier "rond_auto.svg" et "fondeurs.svg" sont insérés selon deux méthodes (balise IMG puis balise OBJECT).
Concernant l'image "rond_auto.svg" dans le premier cas l'image est statique alors que dans le second cas elle est animée.
Concernant l'image "fondeurs.svg" dans le premier cas les "sprites" n'apparaissent pas alors qu'il sont présents et de plus animés dans le deuxième cas.

L'image vectorielle rond_auto.svg comprend un script pour animer le cercle. Il faut donc utiliser la balise object pour l'insérer dans la page sinon l'animation est perdue ..
l'image vectorielle fondeurs.svg comprend des liens vers d'autres images (emploi de la l'instruction image xlink:href ...). Il faut donc aussi utiliser la balise object pour l'intégrer dans la page sinon les images liées n'apparaissent pas.

Un fichier SVG peut comprendre une feuille de style interne. Dans ce cas l'insertion avec la balise IMG est possible.
Si vous avez un doute insérez l'image SVG dans la page avec la balise OBJECT. De plus et dans ce cas le visiteur ne peut pas récupérer le code du fichier SVG avec la commande "enregistrer sous ..."
La balise OBJECT comprend les attributs width et height.

Insérer une image vectorielle via le CSS

Un image vectorielle peut être (comme une image matricielle) le "background" d'une boite HTML.

Exemple de code pour insérer une image vectorielle en "background"

<svg width ="80%" height ="auto" viewBox ="0 0 900 600" style ="background-image :url(piste.svg); background-size : cover;" > </svg>

Le canevas SVG a une taille adaptative et a pour "background" une image vectorielle.
N'oubliez pas la propriété background-size pour que l'image de fond s'adapte aux dimensions de la boite.

Le rendu

Les limites

Tentative d'insertion via la propriété background d'un fichier SVG complexe (du SVG + une animation en CSS).

Le code :

<svg width ="80%" height ="auto" viewBox ="0 0 900 600" style ="background-image :url(atterrisage.svg); background-size : cover;" > </svg>

Le rendu :
Echec ! la boite est vide !
Attention l'insertion d'une image vectorielle via la propriété background suppose qu'il s'agit d'un fichier SVG simple (que du SVG) ...
Retour menu