Le site de Patrick Darcheville

Dessiner avec SVG

Dessin vectoriel avec SVG

Dessiner avec SVG

Créer des images vectorielles avec SVG

image SVG

Ci-dessus une image vectorielle au format SVG. Survolez l'image et observez !

La taille de l'image est alors doublée et vous constatez qu'elle est toujours aussi nette ; pas de crénelage (ou effet "dents de scie"). C'est le gros avantage d'une image vectorielle (format SVG) par rapport à une image matricielle :l'image vectorielle peut être étirée à l'infini sans perte de qualité !
Deuxième avantage : ce fichier ne pèse que trois KO.
Troisième avantage : le code d'une image SVG est lisible (c'est du XML) et est accessible via n'importe quel éditeur de textes (notePad, par exemple).
Quatrième avantage : depuis HTML5 Le code SVG peut être écrit directement dans la page web ; il doit être à l'intérieur du conteneur SVG. Aussi dans ce tutoriel le code SVG sera tantôt externe (insertion d'un fichier SVG dans la page) et tantôt interne (code SVG écrit directement dans la page web).
Cinquième avantage : le SVG peut être stylé avec CSS.
Sixième avantage : les formes SVG peuvent être animées via JavaScript (et CSS désormais).

Il y a cependant un bémol. Si le format SVG est désormais bien implémenté au niveau des navigateurs on ne peut pas en dire autant au niveau des systèmes d'exploitation et de certaines plateformes. Ainsi explorateur windows (le gestionnaire de fichiers de Windows) est incapable d'afficher une miniature d'un fichier SVG ce qui est quand même un comble pour une image ...
De plus sur certains "builders" (wordpress.com par exemple) il est impossible d'insérer des images SVG dans une page ou un article de votre blog.

Ci-dessous l'affichage des images vectorielles avec explorateur windows :

Pour les images vectorielles le programme se contente d'afficher le nom du fichier avec le logo de l'application Paint. Or paradoxallement il est impossible de modifier un fichier SVG avec Paint (voir ci-dessous) ...

Une image vectorielle : un fichier au format SVG

Faites un clic droit sur l'image vectorielle de cette page. Comme pour une image bitmap vous pouvez l'enregistrer sur votre ordinateur puisque le menu contextuel vous propose la commande "Enregistrez l'image sous".
Faites le ! Vous récupérez sur votre machine un fichier nommé rue.svg.
Essayez de l'ouvrir avec le logiciel PAINT ; vous avez un message d'erreur :" Paint ne peut pas lire ce fichier. Format non pris en charge" ; Paint ne peut ouvrir que les images matricielles (png, jpg).
Essayez maintenant d'ouvrir "rue.svg" avec un éditeur de textes tel NOTEPAD ; ça marche !
Essayez de l'ouvrir avec Inkscape (un éditeur SVG avec interface graphique) ; ça marche !

Extrait du fichier "rue.svg" :

<?xml version="1.0" encoding="utf-8"?> <svg width="100%" height="auto" xml:lang="fr" viewBox ="0 0 500 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect x="0" y="0" width ="500" height ="200" fill ="skyblue" /> <rect x="0" y="200" width ="300" height ="40" fill ="slategray" /> <rect x="0" y="245" width ="300" height ="55" fill ="gray" /> <polygon points ="300,200 500,120 500,140 300,240" fill ="slategray" /> <polygon points ="300,245 500,140 500,300 300,300" fill ="gray" /> ... ... <polygon points ="300,200 340,185 440,205 450,220 410,220" fill ="black" fill-opacity ="0.5"/> <desc>mur</desc> <polygon points ="340,140 500,100 500,120 340,185" fill ="tan" /> <polygon points ="340,185 500,120 500,130 380,195" fill ="black" fill-opacity ="0.5" /> </svg>

Le langage employé dans ce fichier est le SVG. Vous pouvez constater qu'il s'agit (comme le HTML) d'un langage de balisage.
Vous vous doutez que la balise rect permet de dessiner un rectangle ; la balise polygon une suite de lignes.
Les formes découlent de formules géométriques et non pas d'une définition de la couleur de chaque pixel comme pour une image matricielle.

Trois tutoriels sur le format SVG

Dans ce tuto je ne traite que du SVG correspondant à des dessins statiques. Mais dans le même site il y a un second tuto qui évoque le SVG dynamique (les dessins animés !) et qui s'intitule "Animer objets SVG".

Un troisième tuto porte lui sur le logiciel de dessin vectoriel Inkscape. Grâce à Inkscape vous n'avez plus à saisir tout le code SVG d'une image. C'est le logiciel qui s'en charge à partir d'une interface graphique. Vous dessinez, coloriez et le programme génère le SVG correspondant.
Inskcape n'est pas le seul éditeur de SVG il existe aussi Illustrator d'Adobe qui lui est payant.
Maintenant ni Inkscape, ni Illustrator ne sont capables de générer le code pour animer des objets graphiques. Donc la connaissance de la syntaxe SVG reste indispensable pour pouvoir vous y retrouver dans le code SVG généré par un de ces logiciels afin de savoir où et quoi insérer pour animer des objets graphiques.

Il y a mal de tutos sur la "toile" relatifs aux SVG mais ils sont souvent incomplets. Ainsi certains n'abordent pas l'animation. D'autres n'évoquent que les formes de base et éludent les "paths" (chemins). Rares sont ceux qui traitent de l'animation avec CSS3.
Avec mes trois tutos j'essaie d'être complet tant pour le dessin statique que l'animation et la production rapide de fichiers vectoriels (par un emploi intelligent de logiciels tel Inkscape).

Dessiner avec SVG

Dans chaque page de ce tuto des extraits de code figurent dans des encadrés roses. Sur les mobiles, seules les premières lignes apparaissent. Il suffit de toucher l'encart pour le déplier.