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
d'extension .svg contenant du code SVG mais aussi parfois du CSS et du JavaScript.
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.
C'est vrai mais à condition qu'il s'agisse de fichiers SVG simples. Dans d'autres cas il faut utiliser la balise OBJECT.
Par exemple, un fichier SVG comprennant (pour l'animation) un script doit être intégré dans la page avec la balise OBJECT sinon le script
n'est pas interprété.
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"
Document inséré avec la balise IMG.
Le fichier "rond_auto.svg"
Ce fichier inséré deux fois : avec la balise IMG puis avec la balise OBJECT
Il n'y a plus d'animation !
Il y a animation du rond !
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)
Remarques
La classe "centre" est spécifique à l'élément IMG, donc on ne peut pas l'appliquer à la balise OBJECT.
Les fichiers "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.
Explications
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 le script ne fonctionne pas.
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 & 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"
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 son conteneeur.
Le rendu
Insertion réussie !
Les limites
Tentative d'insertion via la propriété background d'un fichier SVG complexe (du SVG + une animation en CSS).
Le code :
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).