Tutoriel Inkscape - sommaire

Insertion d'un document Inkscape dans une page web

Dès que vous utilisez des logiciels tels Inkscape ou Boxy SVG vous obtenez du code SVG externe c'est à dire des fichiers d'extension .svg. Ces fichiers peuvent contenir aussi du CSS mais aussi du JS.
Se pose alors le problème de l'ajout de ces fichiers dans une page Web. Pour ajouter un document SVG dans une page vous pouvez recourir au HTML ou au CSS.

Insertion via le HTML

Jusqu'à présent je vous ai dit que pour ajouter une image SVG dans une page web via le HTML il suffisait d'utiliser la balise IMG commme pour une image matricielle.
C'est vrai mais à condition qu'il s'agisse de documents SVG simples. Dans d'autres cas il faut mieux utiliser la balise OBJECT.

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

Le fichier "rectangles.svg"

Ce document ne comprend que du code SVG.
Insertion dans la page via la balise IMG :

Affichage correct !

Le fichier "rond_auto.svg"

Ce fichier comprend un script JS pour animer le rond.
Insertion dans la page via la balise IMG :

Le rond n'est pas animé !

Insertion du même fichier via la balise OBJECT :

Le rond est animé !

Le document "fondeurs.svg"

Ce fichier comprend des liens vers des images (des gifs animés) ; animation de ces GIF réalisé avec le SMIL de SVG.
Ajout dans la page via IMG :

Les gifs n'apparaissent pas.

Ajout dans la page cette fois via OBJECT :

Les gifs apparaissent !

Le code de la page correspondant aux ajouts de documents SVG

Dans la feuille de style externe il n'existe pas de classe spécifique à l'élément object d'où le style en ligne.

Les raisons du code

Le document rond_auto.svg comprend un script JS (pour animer le cercle). Il faut donc utiliser la balise object pour l'ajouter dans la page sinon l'animation ne fonctionne pas.
Le document 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'insérer dans la page sinon les images liées n'apparaissent pas.

Un fichier SVG qui comprend une feuille de style CSS peut être ajoutée à une page web via la balise IMG. Donc privilégiez une animation via un keyframes CSS plutôt qu'avec JS.

Insérer une image vectorielle via le CSS

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

Premier exemple

Le code : <svg width ="80%" height ="400" style ="background-image :url(piste.svg); background-size : cover;" > </svg>

La zone SVG pour "background" un document SVG ...
N'oubliez pas la propriété background-size pour que l'image de fond s'adapte aux dimensions de son conteneeur.

Le rendu :

Ajout réussi dans la page web car le fichier "piste.svg" ne comporte que du code SVG.
Il suffirait maintenant de créer un lien vers l'image "avion.png" et d'animer cet objet via le CSS pour créer une animation. Il faudrait aussi rajouter l'attribut viewBox à l'élément SVG. Voir l'animation et son code .

Deuxième exemple

Le code : <svg width ="80%" height ="200" style = "background-image : url(fondeurs.svg) ; background-size : cover; border : 1px solid black;" > </svg>

Le rendu :

Les gifs animés (liens vers d'autres images) n'apparaissent pas ...
Donc la valeur de la propriété background-image doit correspondre à un document SVG simple.

Concluons !

Pour ajouter un document SVG dans une page web privilégiez le HTML au CSS (propriété background-image).
Si le document SVG est dépourvu de script et de liens, vous pourrez utiliser la balise IMG pour l'ajouter dans une page web sinon utilisez la balise OBJECT.