Atelier : production d'un paysage buccolique

Je vais tenter de vous montrer dans cette page qu'en utilisant alternativement un éditeur de textes tel Notepad puis Inkscape il est possible d'obtenir des images vectorielles (voire des animations vectorielles) très "light" et aussi très rapidement.
En effet dans certains cas le codage au format SVG peut devenir fastidieux. Il faut alors confier cette mission à Inkscape.
A contrario utiliser uniquement Inkscape pour générer le code SVG peut aboutir à un code lourd ...

Il y a dans ce site un tutoriel sur le logiciel Inkscape.

Version 1 : code saisi avec Notepad

Le code du fichier SVG (extraits)

<?xml version="1.0" encoding="utf-8"?> <svg viewBox ="0 0 900 400" width="100%" height="100%" xml:lang="fr" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <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(0.9)" /> ... </svg>

Commentaire du code

Attention si vous voulez utiliser le clonage (balise use) dans un fichier SVG il faut impérativement que la balise SVG contienne la mention xmlns:xlink="http://www.w3.org/1999/xlink".
Notez aussi l'attribut viewBox dans la balise SVG qui autorise alors l'expression en pourcentages des dimensions de l'image vectorielle afin que celle-ci s'adapte toujours à l'écran quelque soit sa taille ...

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 est obtenu en clonant n fois le modèle arbre (clonage avec translation et changement d'échelle).

Version 2 : utilisation d'Inkscape pour compléter l'oeuvre (lol)

L'image vectorielle n'a pas été créée avec Inkscape et pourtant il est possible d'ouvrir ce fichier avec Inkscape. Ce logiciel peut ouvrir n'importe quel fichier d'extension .svg !

J'ai donc ouvert via Inkscape le fichier SVG et j'ai ajouté un calque.
Dans ce nouveau calque j'ai dessiné à "main levée" quelques broussailles.
J'aime coder mais ici "ça aurait été galère" (courbes de Bézier); je préfère donc que Inksape s'en charge ...

Ci-dessous rendu du fichier SVG après modifications sous Inkscape : image SVG

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

Donc je viens de vous montrer que rien ne vous interdit d'utiliser le logiciel Inkscape pour "parachever" une image vectorielle dont le code SVG a été initialement saisi avec un éditeur de textes.

Version 3 : retour à NotePad !

Maintenant il faut insérer plusieurs fois un gif animé dans l'image SVG.

J'ouvre le fichier SVG sous Notepad; 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 de l'image GIF sont 360 par 400. Donc je l'insère deux fois avec une taille plus petite mais avec respect des proportions.
Avec la balise image je me contente de créer des liens vers ces images matricielles donc la taille du fichier SVG n'augmente que de quelques octets ...

Insertion de l'image vectorielle dans une page web

Pour insérer cette image vectorielle dans une page web il faut utiliser la balise object. En effet je rappelle que dès q'une image vectorielle contient un script JS et/ou un lien vers d'autres fichiers la balise img ne convient plus. Le code HTML d'insertion est donc :

<object type="image/svg+xml" data="../images/atelier2.svg"></object>
Retour menu