Tutoriel Inkscape & Boxy SVG - 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 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'agit 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 pas 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

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.
Donc privilégiez l'animation d'éléments SVG via un "keyframes CSS" ou le SMIL plutôt qu'avec le JavaScript.
Pour pouvez aussi coller le code d'un fichier SVG directement dans votre page web ...

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 ! Le fichier "piste.svg" ne comporte que du code SVG.

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>

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