Tutoriel Inkscape & Boxy - sommaire

Insertion d'un document SVG 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 documents SVG peuvent contenir aussi du CSS et également du JS.

Il se pose alors le problème de l'insertion de ces images vectorielles (statiques ou animées) dans une page web.
Pour insérer un document SVG dans un document HTML vous avez le choix entre la balise IMG ou l'élément OBJECT ...

Utiliser IMG ou OBJECT ?

Ci-dessous trois documents SVG insérés dans la page web dont deux insérés deux fois :

Le fichier "rectangles.svg"

Ce document ne comprend que du code SVG et il est inséré dans cette page web via la balise IMG :

L'affichage est correct !

Le fichier "rond_auto.svg"

Ce docuement SVG comprend un script JS pour animer le rond.
Ci-dessous insertion dans cette page web via la balise IMG :

L'animation n'est pas prise en compte ...

Ci-dessous insertion de la même image vectorielle animée via la balise OBJECT :

Ouf ! L'animation est prise en compte.

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.
Ci-dessous insertion dans cette page web via l'élément IMG :

Les gifs n'apparaissent pas ...

Ci-dessous insertion cette fois via OBJECT :

Les gifs apparaissent enfin !

Le document "croix_lorraine_bis.svg"

Ce fichier contient du SVG et du CSS pour animer la croix.
Insertion cette page web via l'élément IMG :

La croix change bien de couleur de fond !

Le code de la page correspondant aux insertions de documents SVG

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'insérer dans la page web sinon l'animation ne fonctionne pas avec certains navigateurs ...
Le document fondeurs.svg comprend des liens vers d'autres images (emploi de l'instruction image href = ...). Il faut donc insérer avec la balise object.

SVG directement dans le document HTML : SVG interne

Depuis HTML5 le code SVG peut être inclus directement dans un document HTML (une page web !) à condition qu'il soit contenu dans le conteneur SVG.
Le recours au SVG interne évite le problème évoqué dans le paragraphe précédent : l'insertion parfois délicate d'un document SVG dans une page web.
Vous allez voir qu'il est facile de convertir du SVG externe en SVG interne.

Utiliser des documents Inkscape dans le cadre de SVG interne

Le document "piste.svg"

Il a été produit avec Inkscape.

Cette image n'est pas plate ; elle a une perspective.

Le document "avion.svg"

Ce document a été également produit avec Inkscape.

Toujours sous Inkscape, j'ai exporté ce fichier au format PNG ; j'ai donc obtenu également une image matricielle : "avion.png".

Le code SVG interne

Dans la partie BODY de cette page web j'ai saisi : <svg width ="80%" viewBox ="0 0 900 600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style ="background-image :url(piste.svg); background-size :cover;" > <desc>intégration du sprite</desc> <image width="250" y ="200" x="50" href="avion.png" id ='jet' /> ..

Notez qu'une zone de dessin SVG peut avoir comme fond un docuement SVG ... L'image vectorielle de fond remplit complètment la zone de dessin grâce à background-size :cover.
Dans la balise SVG début n'oubliez pas le "namespace" xmlns:xlink="http://www.w3.org/1999/xlink" afin que la liaison avec l'image matricielle soit prise en compte.

Le code CSS rajouté

Dans la partie HEAD de ce document HTML et plus précisément à l'intérieur du conteneur STYLE j'ai écrit :

@keyframes animer 
{
	0% {transform : scale(0.1);}
	20% {transform : scale(0.4) ;}
	40% {transform : scale(0.8) ;}
	60% {transform : scale(1.2) ;}
	80% {transform : scale(1.6) ;}
	100% {transform : scale(1.8) ;} 	
}
#jet {animation : animer 15s  infinite linear forwards ;}

Il s'agit d'un modèle d'animation CSS3 avec un changement d'échelle pour créer un effet 3D.
Ce modèle d'animation est appliqué à l'objet identifié "jet" c'est à dire l'image PNG.
Le sprite sera progressivement agrandie pour donner un effet 3D.

Le rendu de l'animation 3D