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 fichiers peuvent contenir aussi du CSS et également du JS.

Il se pose alors le problème de l'insertion de ces fichiers dans une page Web.
Pour insérer un document SVG dans un document HTML vous avez le choix entre la balise IMG ou la balise 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.
Insertion dans la page via la balise IMG :

L'affichage est 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 désormais 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.
Insertion dans la page web via l'élément IMG :

Les gifs n'apparaissent pas ...

Insertion dans la page 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 dans la page 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 sinon l'animation ne fonctionne pas avec certains navigateurs ...
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 affiché dans un document HTML via l'élément IMG. Donc privilégiez une animation via un keyframes CSS plutôt qu'avec JS ou le SMIL.

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 un document HTML.
Vous allez voir qu'il est relativement facile de transformer 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" xlink:href="avion.png" id ='jet' /> </svg>

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