Découvrir le SVG/Introduction
Qu'est-ce que le SVG
modifierLe sigle SVG signifie scalable vector graphics, c'est-à-dire « graphiques vectoriels dont on peut modifier l'échelle ».
Le SVG est un langage de programmation qui sert à dessiner. La meilleure manière de créer un dessin en SVG consiste à utiliser un logiciel doté d'une interface graphique, par exemple le logiciel libre Inkscape 
.
- Pour plus de détails voir : Inkscape.
La façon la plus simple de voir un dessin en SVG consiste à l'afficher dans un navigateur Web (Mozilla Firefox, Opera, Microsoft Internet Explorer, Microsoft Edge, Safari, Google Chrome…) — le format SVG est en effet un standard du Web depuis 2001[1], même si certains navigateurs s'y sont mis tardivement[2]. On peut par exemple faire un glisser-lâcher depuis la fenêtre d'un gestionnaire de fichiers (Explorateur Windows, Finder MacOs, GNOME Commander…) vers la fenêtre du navigateur Web.
Un dessin SVG est en fait simplement un fichier texte portant l'extension .svg : on peut le voir en utilisant la commande « afficher le code source » du navigateur Web,
- en général accessible par le menu contextuel : faire un clic avec le bouton secondaire de la souris (« clic droit » pour une souris configurée en droitier) dans la fenêtre du navigateur et, dans la liste qui apparaît, choisir
Afficher le code source de la pageou équivalent (selon le navigateur :Afficher la source,Code source de la page…) ; - ou bien avec la commande « Éditeur XML » d'Inkscape — menu
Édition > Éditeur XMLou bien le bouton dédié
.
Dans certains cas, le code SVG peut être intégré au sein d'un autre fichier, par exemple un fichier HTML.
-
Dessin élémentaire et éditeur XML avec Inkscape. -
Code source d'un dessin SVG élémentaire dans Mozilla Firefox.
Le langage SVG est un langage XML (extended markup language). C'est donc un texte qui comprend des balises entre crochets <…>. Le langage SVG est décrit par une recommandation du World Wide Web Consortium (W3C) : Scalable Vector Graphics (SVG) — W3C Recommendation[3]. Il existe une recommandation « minuscule » (tiny) pour les appareils munis de petits écrans, typiquement les appareils mobiles (téléphones, tablettes)[4].
- Pour plus de détails voir : Programmation XML.
Quel est l'objectif de ce manuel ?
modifierCe manuel est destiné à découvrir le langage SVG. Cela peut permettre par exemple de modifier des fichiers générés par Inkscape, pour les simplifier[5] ou créer des animations, ou encore de créer soi-même ses propre dessins, avec un éditeur de texte ou en exportant depuis un programme.
On peut aussi utiliser le SVG comme outil didactique pour travailler la géométrie (points, segments de droites, transformations du plan, courbes de Bézier) et la programmation.
Notes
modifier- ↑ (en) « Scalable Vector Graphics (SVG) 1.0 Specification », sur W3C, (consulté le 29 mars 2017)
- ↑ 2009 pour Microsoft Internet Explorer, voir (en) « Secret Origin of SVG », sur W3C, (consulté le 29 mars 2017)
- ↑ (en) « Scalable Vector Graphics (SVG) — W3C Recommendation », sur W3C (consulté le 29 mars 2017)
À ce jour (avril 2017), la version 2 est encore en cours d'approbation (candidate), on peut la consulter ici : (en) « Scalable Vector Graphics (SVG) 2 — W3C Candidate Recommendation », sur W3C, (consulté le 29 mars 2017) - ↑ (en) « Scalable Vector Graphics (SVG) Tiny 1.2 Specification — W3C Recommendation », sur W3C, (consulté le 11 avril 2017)
- ↑ Sur ce point, voir le cours Optimiser un fichier SVG : Avec un éditeur de texte sur la Wikiversité.