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

Document inséré avec la balise IMG.

Le fichier "rond_auto.svg"

Ce fichier comprend un script pour animer le rond.
Ci-dessous fichier inséré avec la balise IMG :

Il n'y a pas d'animation !

Ci-dessous fichier inséré cette fois avec l'élément OBJECT :

Il y a animation du rond !

Le document "fondeurs.svg"

Ce fichier comprend des liens vers des images (des gifs animés).
Ci-dessous fichier inséré avec l'élément IMG :

Les gifs animés n'apparaissent pas.

Ci-dessous fichier inséré avec la balise OBJECT :

Les gifs animés apparaissent.

Le code de la page (extraits)

Explications

Le document 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.
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 peut comprendre également une feuille de style interne. Dans ce cas l'insertion avec la balise IMG fonctionne bien avec tous les navigateurs.
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 transformer du code SVG externe en code interne à la page ...

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