Dessiner avec SVG - sommaire

Tutoriel sur le format SVG - chapitre introductif

Avec HTML il est possible de dessiner des rectangles voire des cercles ou ellipses via des astuces CSS.
Par contre ça devient très compliqué (mais pas impossible avec l'aide de CSS) de dessiner des triangles, des pentagones, des paraléllogrammes, des trapèzes, etc.

Pour SVG, la réalisation de formes géométriques complexes et leur positionnement ne pose aucun problème.
Donc si vous souhaitez réaliser de superbes dessins dans une page web ayez le réflexe SVG.
Par ailleurs les images obtenues étant vectorielles, elles peuvent être agrandies ou réduites sans perte de qualité.
Le SVG est largement supporté par tous les principaux navigateurs, ce qui en fait un choix fiable pour les développeurs web. En 2025 60% des sites utilisent le format SVG.
En fait beaucoup de développeurs web utilisent SVG à leur insu. En effet lorqu'ils intègrent un document Inkscape dans une page, ils insèrent un fichier encodé en SVG ...

À propos de SVG

SVG est l'acronyme de "Scalable Vector Graphics".
Le SVG est un langage XML qui a une structure identique à celle de HTML mais bien sûr avec ses propres 'tags' (rect, circle, ellipse, line, path, image, defs, use, etc. ).
Vous pouvez styliser les objets SVG via le CSS ; et les animer via JavaScript voire le SMIL ou encore le CSS.

Depuis que les navigateurs ont implémenté la norme HTML5 vous pouvez encoder directement du SVG dans une page web.
On distingue donc le "SVG interne" (contenu dans la page web) et le "SVG externe" (un document d'extension .svg).

Dans ce présent tuto j'évoque surtout la production de SVG interne. Ce didacticiel comprend donc deux parties :
• encoder en SVG dans une page web
• générer du SVG en utilisant le framework Snap SVG

Maintenant, je vous rassure, il n'y a pratiquement aucune différence entre du code SVG interne et du code SVG externe.

Un document SVG

Ci-dessous un document SVG inséré dans cette page web.
Zoomez la page, l'image garde toute sa qualité ; pas d'effet "escalier" ou crénelage !

Les particularités d'une image vectorielle

Faites un clic droit sur l'image ci-dessus et dans le menu contextuel sélectionnez "enregistrez l'image sous".
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".
En effet Paint ne peut ouvrir que des images "pixellisées" (ou matricielles) : extensions .gif, .png .jpeg

Ouvrez ce fichier avec un éditeur de textes tel NOTEPAD.
Vous observez du code qui ressemble à du HTML : des instructions commençant par une balise suivie d'attributs.

Ouvrez le fichier avec Inkscape (un éditeur SVG de type WYSIWIG).
L'image vectorielle apparait et vous pouvez la modifier via l'interface graphique.

Une horloge qui donne l'heure exacte

Les images vectorielles peuvent être animées.
Vous verrez que l'on peut animer des objets SVG via le SMIL ou le CSS ou encore le JavaScript.
Ci-dessous une horloge analogique avec l'aiguille des heures et celle des minutes.

Notez que les aiguilles affichent l'heure exacte.
Patientez une minute, vous verrez une aiguille se déplacer.

Dans mon tuto sur SVG, dix chapitres sont consacrés à la création de dessins vectoriels animés.
Vous verrez qu'il y a de nombreuses techniques pour animer des objets SVG (SMIL, CSS, JavaScript).
Vous verrez aussi, comme c'est le cas pour l'horloge analogique, il faut souvent mixer plusieurs outils.
Premier chapitre sur l'animation SVG

Faut-il apprendre le langage SVG ?

Même si vous envisagez de créer du SVG interne via un framework SVG, de produire des documents SVG via des éditeurs graphiques (Inkscape & Boxy SVG) une bonne connaissance de la syntaxe SVG vous sera cependant très utile car ces logiciels ont leurs limites ...
Votre connaissance du langage SVG vous permettra d'avoir un regard critique vis à vis du code généré par ces différents outils. Vous serez à même d'optimiser le code SVG généré.
Mais surtout vous serez capable d'animer vos dessins vectoriels. En effet les éditeurs WYSIWIG de SVG ne génèrent que du code correspondant à un dessin statique.

L'utilisation de Inkscape & boxy SVG est évoquée dans un autre tuto : mon tuto sur Inkscape & Boxy SVG

Les banques d'images SVG

Il existe de nombreuses banques de fichiers SVG dont certaines sont gratuites.
Citons entre autres : SVG clipart, Devient art, SGV studio, hello SVG, svgrepo.com.

Ci-dessous une image vectorielle récupérée sur l'un des sites cités :

Pour insérer cette image vectorielle (ce fichier d'extension .svg) dans une page web, il suffit d'utiliser la balise IMG (comme pour une image matricielle).
Le code dans le document HTML est tout simplement :
< img src ="ordinateur.svg" class ="centre" alt ="dessin vectoriel" >

Je ne me suis pas contenté de "piquer" ce document SVG sur la "toile".
Je l'ai ouvert avec Inkscape, j'ai ajouté une zone de texte et j'ai sauvegardé au format optimisé (il ne pèse plus que 300 KO au lieu de 500 KO).

Installez une extension de windows

Si vous utilisez un PC sous windows je vous conseille d'installer une extension appelée SVG Viewer Extension for Windows Explorer. Sinon il n'est pas possible d'afficher les documents SVG sous forme de vignettes.
Ci-dessous aperçu d'un dossier lorsque l'extension n'est pas installée :

Les fichiers SVG sont visualisés par le logo de Chrome (mon navigateur par défaut).

Ci-dessous aperçu d'un répertoire lorsque l'extension est installée :

Les documents SVG apparaissent sous forme de vignettes, ce qui est beaucoup mieux ...

Le format SVG et les réseaux sociaux

Vous ne pouvez pas publier d'images au format SVG sur Facebook ; seules les images matricielles sont autorisées.
En effet un document SVG contient du code SVG & CSS mais peut contenir aussi du JavaScript. Or ce code JS peut être malveillant ...