Insertion de "sprites" dans un document Inkscape

Je vais vous montrer dans cette page qu'en utilisant alternativement un éditeur de textes (tel Notepad) et le logiciel Inkscape il est possible d'obtenir rapidement une animation vectorielle et de surcroît légère.

Version 1

image SVG

Le code SVG indiqué ci-dessous a été saisi avec NotePad. La syntaxe des objets produits est en effet très simple (des rectangles, des ellipses, des flous basiques, des clonages) et est donc à la portée d'un développeur web moyen.

Le code du fichier SVG (extraits)

... <svg width="100%" height="auto" viewBox ="0 0 900 400" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" > <defs> <filter id="flou0"> <feGaussianBlur stdDeviation="3" /> </filter> <filter id="flou1">... </filter> <filter id="flou2">... </filter> <g id ="arbre"> <ellipse cx ="120" cy ="155" rx ="70" ry ="10" fill ="gray" filter = "url(#flou0)" /> <rect x ="45" y ="100" width ="10" height ="60" fill ="brown" /> <ellipse cx ="50" cy ="50" rx ="20" ry ="55" fill = "green" /> </g> </defs> <rect y= "50%" x ="0%" width ="100%" height ="50%" fill = "lime" filter = "url(#flou0)" /> <rect y= "0%" x ="0%" width ="100%" height ="50%" fill = "skyblue" /> <ellipse cx = "70%" cy = "20%" rx = "150" ry ="50" fill ="white" filter = "url(#flou1)" /> <ellipse cx = "80%" cy = "30%" rx = "150" ry ="50" fill ="white" filter = "url(#flou1)" /> <circle cx = "10%" cy ="20%" r = "75" fill = "yellow" filter = "url(#flou2)" /> <ellipse cx ="10%" cy ="70%" rx ="150" ry ="50" fill ="blue" filter = "url(#flou1)"/> <desc>Le bois </desc> <use xlink:href ="#arbre" transform ="translate(400,100) scale(1.1)" /> <use xlink:href ="#arbre" transform ="translate(450,110) scale(1.1)" /> ... <use xlink:href ="#arbre" transform ="translate(800,90)scale(0.9)"/> <use xlink:href ="#arbre" transform ="translate(850,90)scale(0.9)"/> </svg>

Commentaire du code

Afin que l'image vectorielle s'adapte bien à la largeur de la page notez que la valeur de with est notée en pourcentage.
Mais bien sûr dans ce cas il faut impérativement rajouter un repère avec l'attribut viewBox !

Attention si vous voulez utiliser le clonage (balise use) dans un fichier SVG il faut impérativement que la balise SVG contienne le "name space" : xmlns:xlink="http://www.w3.org/1999/xlink"

Dans le conteneur defs il est défini trois floutages et un modèle identifié "arbre".
L'arbre c'est une ellipse grise et floutée (l'ombre à midi), une ellipse verte (feuillage) et un rectangle marron (le tronc).

Le ciel est un rectangle rempli de "skyblue" et contenant deux ellipses remplies de blanc et floutée (le nuage).
La prairie contient une mare (une ellipse bleue et floutée) et un bois.
Le bois c'est le clonage de n fois le modèle "arbre" avec transformations (translation et changement d'échelle).

Version 2 : utilisation d'Inkscape pour améliorer "l'oeuvre"

Même si l'image vectorielle originale n'a pas été produite avec Inkscape mais avec un éditeur de texte il est possible d'ouvrir ce fichier avec Inkscape. Inkscape est en effet capable d'ouvrir n'importe quel fichier d'extension .svg !
Dans le fichier SVG j'ai alors ajouté un calque et j'ai dessiné à "main levée" quelques broussailles dans celui-ci. image SVG

L'image a pris un peu de poids (9 KO par rapport à 2 KO). Mais reconnaissez que ça reste toujours très léger ...

Enregistrez le document Inkscape en "SVG simple" (et non pas en "SVG Inkscape") ; il sera plus léger.
Par ailleurs "nettoyez le document" avant d'enregistrer ainsi les filtres et dégradés non utilisés sont supprimés de la zone defs.

Version 3 : retour à NotePad

Je veux maintenant insérer deux "sprites" (GIF animés) dans ce décor.
Il suffit d'ajouter juste avant la balise </svg> le code suivant :

<g id ="troupeau"> <image xlink:href="../images/vache.gif" width="90" height="100" x = '20%' y ='70%' /> <image xlink:href="../images/vache.gif" width="99" height="110" x = '20%' y ='80%' /> </g>

Les dimensions d'origine du gif animé sont 360 par 400. Donc je l'insère deux fois avec respect des proportions.

Ci-dessous le rendu

Version définitive

Vous voulez que les arbres du bois soient légèrement floutés. Que faut-il changer dans le code ?
Attention il y a la solution lourde et la solution légère ...
Avez vous trouvé ?

La solution lourde : flouter les différents arbres.
La bonne solution : flouter le modèle (objet identifié "arbre") ; le floutage sera répercuté aux clones.
Il suffit donc d'ajouter à g id ="arbre" l'attribut : filter="url(#flou0)"

<g id="arbre" filter="url(#flou0)"> <ellipse ...

Ci-dessous version définitive de l'image vectorielle

Le fichier SVG ne pèse que 10 KO !
Retour menu