Tutoriel Inkscape - sommaire

Inkscape : insertion de 'sprites'

Je vous montre dans cette page qu'en utilisant alternativement Inkscape et NotePad, il est possible d'obtenir rapidement une animation vectorielle et de surcroît légère.

Version 1

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 de niveau moyen.

Le code du fichier SVG (extraits)

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 dans ce cas il faut impérativement rajouter un repère cartésien via 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 "namespace" : 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ées : 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.

Enregistrez le document Inkscape en "SVG optimisé" (à préciser dans la liste déroulante "type" de la boite de dialogue).

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

Version 3 : retour à l'éditeur de texte

Je veux maintenant insérer deux "sprites" (GIF animés) dans ce décor.
Il suffit d'ajouter juste avant la balise fermante SVG le code ci-dessous : <g id ="troupeau"> <image xlink:href="../images/vache.gif" width="90" x = '20%' y ='70%' /> <image xlink:href="../images/vache.gif" width="90" x = '20%' y ='80%' /> </g>

Pour donner une taille aux gifs animés dans le canevas, utilisez l'attribut width ou height.

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é alors au niveau des clones.
Il suffit donc d'ajouter à g id ="arbre" l'attribut : filter="url(#flou0)"

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

Le fichier SVG ne pèse que 10 KO !

On pourrait maintenant imaginer un déplacement des sprites dans le canevas. Il suffirait de rajouter du code en SMIL voire en JavaScript ou en CSS.