Le site de Patrick Darcheville

Dessiner avec SVG

Dessin vectoriel avec SVG

Dessiner dans une page web avec SVG

Créer des images vectorielles avec SVG

Intérêt d'une image vectorielle (format SVG)

Ci-dessous une image vectorielle au format SVG.
Cliquez sur celle-ci sans relacher et observez ... image svg

Orthographe : guide de survie

Par un ancien cancre en orthographe : l'auteur du site.

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 (ou image bitmap : fichiers .gif, .jpg et .png): 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 accessible via n'importe quel éditeur de textes et est compréhensible (pour celui qui connaît un peu la syntaxe SVG).
Quatrième avantage : il est possible depuis HTML5 de dessiner directement au format SVG dans une page web (code SVG écrit directement dans la page). Aussi dans ce tutoriel le code SVG sera tantôt externe (insertion d'une image vectorielle dans la page) et tantôt interne (code SVG écrit directement dans la page web).

Il y a cependant un bémol. Ainsi l'explorateur de fichiers (programme du système d'exploitation Window) est incapable d'afficher une vignette de l'image SVG ; il se contente d'afficher le nom du fichier.

Faites un clic droit sur l'image vectorielle. Comme pour une image bitmap vous pouvez l'enregistrer sur votre ordinateur.
Faites le ! Vous récupérez 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.
Essayez de l'ouvrir un éditeur de textes tel NOTEPAD ; ça marche !

Extrait du fichier "rue.svg" :

<?xml version="1.0" encoding="utf-8"?> <svg width="100%" height="100%" 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>

Les formes découlent de formules géométriques basées sur des balises 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. 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.

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 savoir modifier le code généré afin d'animer l'image.

Dessiner avec SVG

Dans chaque page 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.