Aller au contenu

Découvrir le SVG/Le SVG pour l'enseignement des mathématiques et de la programmation

Un livre de Wikilivres.

Le SVG est un outil de dessin vectoriel, il utilise donc la géométrie. On peut donc s'en servir dans le cadre d'un enseignement de géométrie analytique, pour aborder les notions de coordonnées, vecteurs, transformations du plan et matrices de changement de base par exemple.

C'est également un langage de programmation qui présente l'avantage d'avoir un effet visuel et immédiat (moyennant le rafraîchissement de la page du navigateur affichant l'image) ; il est en cela assez proche du Logo. Il permet d'introduire des notions telles que la rigueur de la syntaxe (en-têtes normalisé, respect de l'orthographe et de la grammaire propre au langage) ou l'organisation arborescente des données.


Pour plus de détails voir : Programmation Logo.

Pour estimer la difficulté des activités, nous utilisons la cotation de la Wikiversité.

Niveau de difficulté
Cotation Équivalence selon le pays
France Belgique Suisse (HarmoS) Québec
13 Terminale 6e secondaire
rhéto
3e ou 4e (collège ou gymnase) DEC 1 et 2
14 Bac+1, licence 1
1re année de BTS, DUT ou CPGE
Baccalauréat 1 Bachelor 1 ou 1re HES Baccalauréat 1 et DEC 3
15 Bac+2, licence 2
2e année de BTS, DUT ou CPGE
Baccalauréat 2 Bachelor 2 ou 2e HES Baccalauréat 2
16 Bac+3, licence 3 Baccalauréat 3 Bachelor 3 ou 3re HES Baccalauréat 3 et 4

Généralités

[modifier | modifier le wikicode]

Fiche enseignant

  • Objectifs généraux :
    1. Consolider les notions apprises en géométrie.
    2. Découvrir la démarche de programmation.
    3. Comprendre le fonctionnement de l'Internet : notion de codage et de décodage des données, notion de standard.
  • Prérequis pour l'élève :
    • Savoir se servir d'un éditeur de texte.
    • Savoir se servir d'un navigateur Web.
    • Savoir se servir du gestionnaire de fichiers (Explorateur Windows, Finder MacOs, GNOME Commander…).
    • Notion de géométrie analytique.
  • Matériel et logiciel :
    • Un ordinateur pour deux apprenants, voire un ordinateur par apprenant.
    • Un éditeur de texte, de préférence avec coloration syntaxique comme Notepad++ pour Microsoft Windows[1] ou bien gedit[2].
    • Un navigateur Web supportant le SVG et de préférence le CSS comme Mozilla Firefox[3].
    • Inkscape[4].
  • Préparation :
    • S'assurer que les apprenants peuvent ouvrir une session. Le cas échéant, créer ou faire créer des comptes individuels (identifiants et des mots de passe) ou bien des comptes « invités ».
    • S'assurer que les outils sont facilement accessibles, par exemple par des icônes sur le bureau.
    • Définir le répertoire (dossier) de travail et s'assurer qu'il est facilement accessible, par exemple par un raccourci sur le bureau.
    • Dans le répertoire de travail, créer les fichiers suivants en lecture seule (les préfixes 0_ et z_ assurent qu'avec le classement alphabétique, les fichiers seront toujours respectivement en tête et en queue de liste) :
      • un fichier z_styleSVG.css indiquant que par défaut, la largeur du trait vaut 0,06, sa couleur est noire et que le remplissage est vide ;
      • un fichier z_sgrille.svg traçant un cadre et une grille régulière 10 × 10, le tout en gris clair et avec une épaisseur de trait de 0,03 ;
      • un fichier 00_modele.svg contenant le cadre de travail vide, c'est-à-dire l'en-tête et l'élément <svg …> … </svg> vide. Mettre ce fichier en lecture seule.

Progression didactique

[modifier | modifier le wikicode]

1. Découvrir le SVG et premier exemple

[modifier | modifier le wikicode]

Note à l'enseignant

[modifier | modifier le wikicode]

Ce travail correspond à un niveau de difficulté 13 ou 14.

Le terme SVG signifie en anglais scalable vector graphics c'est-à-dire « graphismes vectoriels dont on peut modifier l'échelle ». Ce sont des dessins que l'on peut agrandir (zoomer) sans que cela ne fasse apparaître de « grains », de pixels.

Le SVG est un standard Internet permettant de créer des images et de les diffuser.

Une image SVG se présente comme un fichier portant l'extension .svg. C'est un fichier contenant du texte « lisible » par un humain : le texte décrit ce que doit dessiner l'ordinateur avec des mots anglais. Les ordres donnés à l'ordinateur sont appelés « instructions ».

On peut créer un dessin au format SVG avec des logiciels de dessin utilisant la souris, comme Inkscape. Mais il est aussi possible de créer des dessins en tapant directement les instructions à l'aide d'un éditeur de texte.

À la fin de la séance, vous saurez créer une image SVG simple et l'afficher.

Activité 1 : créer une image SVG avec un logiciel graphique et l'afficher dans un explorateur Web

[modifier | modifier le wikicode]
  1. Ouvrez le logiciel Inkscape logo Inkscape.
    Détailler la procédure selon le système d'exploitation et l'installation, par exemple : double-cliquez sur l'icône Inkscape sur le bureau.
  2. Cliquez sur le « stylo » Bouton « stylo ». Le pointeur prend la forme d'une croix avec un stylo-plume.
  3. Placez le pointeur à un endroit de la fenêtre et cliquez puis relâchez le clic. Recommencez plusieurs fois à plusieurs endroits : cela crée une ligne brisée (avec éventuellement des arcs courbes si la souris bouge pendant que le bouton de clic est enfoncé).
  4. Appuyez sur la touche « Entrée » du clavier : cela termine le tracé.
  5. Cliquez sur le bouton « Sélection » Bouton « Sélection ».
  6. Appuyez sur la touche « Ctrl » du clavier, puis faites bouger la molette de la souris en maintenant la touche enfoncer. Selon la direction de rotation de la molette, cela agrandit (zoom) ou rapetisse (dé-zoom) l'image ; si vous n'y arrivez pas, utilisez la boîte de zoom située en bas à droite de la fenêtre. Vérifiez que même si on agrandit fortement l'image, les traits restent lisses.
  7. Enregistrez l'image sous le nom premierEssai :
    1. Cliquez sur le bouton « Enregistrer » . Cela ouvre la boîte de dialogue « Enregistrer sous ».
    2. Allez dans le dossier de travail.
      Détailler la procédure selon la manière dont est organisé le disque dur.
    3. Dans la zone de texte « nom du fichier », tapez « premierEssai ».
    4. Cliquez sur le bouton « Enregistrer ».
    5. Fermez Inkscape Icônes « fermer ».
  8. Ouvrez le navigateur Web logo Firefox.
    Détailler la procédure selon le système d'exploitation et l'installation, par exemple : double-cliquez sur l'icône Firefox sur le bureau.
  9. Ouvrez le répertoire de travail. Positionnez la fenêtre du répertoire de travail à côté de celle du navigateur Web.
    Détailler la procédure selon le système d'exploitation et l'installation, par exemple : double-cliquez sur l'icône Fichiers SVG sur le bureau.
  10. Faite un « glisser-lâcher » du fichier premierEssai.svg que vous venez de créer du répertoire de travail ans la fenêtre du navigateur Web :
    1. Dans la fenêtre du répertoire de travail, cliquez sur le fichier premierEssai.svg.
    2. En maintenant le bouton de la souris enfoncé, déplacez le pointeur dans la fenêtre du navigateur Web et relâchez le clic.
  11. Vérifiez que le dessin qui s'affiche est identique à ce que vous avez dessiné.
  12. Faite un agrandissement (zoom : touche « Ctrl » du clavier et molette de la souris) pour vérifier que les traits restent lisses.
  13. Allez sur le site du « validateur de SVG » de l'organisme W3C et vérifiez que votre image est conforme aux standards.
    https://validator.w3.org/
Fin de l'activité
***
**
*

Activité 2 : Créer une image SVG avec un éditeur de texte

[modifier | modifier le wikicode]
Squelette d'un fichier SVG.

Présentation d'un fichier SVG

Une image SVG est un fichier de texte. L'image ci-contre présente le squelette d'un fichier SVG. Il est composé de trois pavés :

  1. Un pavé d'en-tête qui indique au navigateur Web qu'il s'agit d'une image SVG et qui lui indique des informations complémentaires permettant l'affichage correct de l'image.
  2. Un pavé contenant les instructions servant à tracer le dessin. Pour l'instant, ce pavé est vide.
  3. Un pavé de fin de fichier.

Nous pouvons déjà remarquer trois choses :

  • les instructions sont mises entre crochets <…> ;
  • le pavé (pour l'instant vide) contenant les instructions de dessin est compris entre une balise d'ouverture <svg > et une balise de fermeture </svg> ;
  • le fichier contient des commentaires, c'est-à-dire du texte facilitant la lecture par un humain mais n'ayant aucune action sur le dessin ; ces commentaires sont inclus dans des balises <!--…-->.

Le fichier présenté ci-contre est notre modèle. Les pavés d'en-tête et de fin de fichier seront toujours les mêmes, nous n'y toucherons sauf pour donner un titre et mettre une description.

À faire :

  1. Ouvrez l'éditeur de texte.
    Détailler la procédure selon le système d'exploitation et l'installation, par exemple : double-cliquez sur l'icône Notepad++ sur le bureau.
  2. Ouvrez le fichier 00_modele.svg :
    1. Cliquez sur le bouton « Ouvrir »  ; cela ouvre la boîte de dialogue « Ouvrir ».
    2. Dans la liste des fichiers, cliquez sur 00_modele.svg.
    3. Cliquez sur le bouton « Ouvrir ».
  3. Enregistrez le fichier sous un autre nom :
    1. Cliquez sur le menu « Fichier » puis dans la liste déroulante, cliquez sur « Enregistrer sous ».
    2. Dans la zone de texte « Nom du fichier », tapez « premierExemple.svg ».
    3. Cliquez sur « Enregistrer ».
  4. Entre les balises <title></title>, supprimez le commentaire et écrivez à la place le titre : « Premier exemple de fichier SVG ».
  5. Entre les balises <desc></desc>, supprimez le commentaire et écrivez à la place la description : « Une image simple ».
  6. Dans le pavé d'instructions, enlevez le commentaire et écrivez à la place :
        <line x1="1" y1="1" x2="5" y2="5" />
        <circle cx="5" cy="5" r="2" />
    
  7. Enregistrez le fichier.
  8. Faites un glisser-lâcher du fichier depuis le répertoire de travail dans la fenêtre du navigateur Web. Commentez ce que vous voyez.
  9. Revenez dans l'éditeur de texte. À la suite des commandes précédentes, ajoutez :
        <rect x="2" y="6" width="5" height="3" />
    
  10. Enregistrez à nouveau le fichier.
  11. Cliquez dans la fenêtre du navigateur Web et appuyez sur la touche « F5 » du clavier. Commentez ce que vous voyez.
  12. Vérifiez que votre image est conforme au standard du W3C.
    https://validator.w3.org/
  13. Selon vous, à quoi sert le descriptif placé entre les balises <desc></desc> ?
  • Une image SVG est un fichier texte portant l'extension .svg et qui doit respecter des règles strictes pour permettre au navigateur Web de pouvoir tracer le dessin.
  • Le fichier a un en-tête normalisé qui permet au navigateur Web de savoir ce que contient le fichier ; l'en-tête indique les standards suivis (en particulier le standard XML et le standard SVG) ainsi que des informations sur l'image (comme ses dimensions, largeur et hauteur, son titre et un descriptif).
  • Les instructions SVG sont entre crochets <…> ; elles sont appelées « éléments ».
  • Certains éléments consistent en une seule balise, le crochet fermant est alors précédé d'une barre oblique, par exemple : <line />, <circle />, <rect />.
  • D'autres éléments sont des « conteneurs » : ils contiennent d'autres éléments et sont faits de deux balises, une balise ouvrante et une balise fermante ; c'est alors la balise fermante qui contient la barre oblique par exemple :
    • l'élément svg, qui contient toutes les instructions de tracé : <svg > </svg>,
    • les éléments <title> </title> et <desc> </desc> qui contiennent du texte.
  • Les éléments ont en général des paramètres, appelés « attributs », qui déterminent leur caractéristiques (position dans l'image, taille), par exemple :
    • l'élément <line /> a pour attributs x1, y1, x2 et y2 qui déterminent les extrémités du segment : [(x1 ; y1) ; (x2 ; y2)],
    • l'élément <circle /> a pour attributs cx, cy et r qui déterminent la position de son centre (cx ; cy) et son rayon r,
    • l'élément <rect /> a pour attributs x, y, width et height qui déterminent la position de son sommet en haut à gauche (x ; y) et ses dimensions width × height.
  • Les valeurs des attributs sont écrites entre guillemets, par exemple : x="1".

2. Coder et décoder le SVG

[modifier | modifier le wikicode]

Notes à l'enseignant

[modifier | modifier le wikicode]

Le niveau de difficulté est de 13 ou 14.

Prérequis

Travaux dirigés précédents

Activité 1 : reproduire un dessin

[modifier | modifier le wikicode]
  1. Étudiez le formulaire ci-dessous.
  2. Reproduisez les figures qu'il contient. Pour cela, créez un fichier SVG avec un éditeur de texte en utilisant le modèle vu précédemment.

3. Créer un fichier SVG à l'aide d'un programme développé par soi-même

[modifier | modifier le wikicode]

Notes à l'enseignant

[modifier | modifier le wikicode]

Prérequis

Ces travaux dirigés sont destinés à des élèves connaissant un langage de programmation et qui sont capables :

  1. De créer un chaîne de caractères.
  2. De créer un fichier texte.

Le langage utilisé importe peu. En outre, ils doivent avoir compris le fonctionnement des attributs viewbox et transforme="matrix(…)".

Cela correspond globalement à un niveau de difficulté de 14 ou 15.

Nous choisissons ici de créer une courbe représentative d'une fonction mathématique simple. Pour l'exemple, nous choisissons la fonction ƒ(x) = x² car tous les langages de programmation possèdent la fonction multiplié. On peut bien entendu utiliser une autre fonction selon les possibilités du langage, comme une fonction trigonométrique.

Dans la formulation, nous restons volontairement flous en ce qui concerne la « vingtaine de valeurs bien réparties ». La valeur 0 faisant partie de l'intervalle, il paraît évident qu'elle doit faire partie de l'échantillon, le plus simple étant alors d'avoir un nombre impair de valeurs — 19 ou 21 — réparties de manière uniforme.

Objectifs

À l'issue de la séance, l'élève devra savoir qu'il est possible de générer automatiquement un fichier SVG exploitable et devra être en mesure de générer un fichier simple.

Activité unique : Créer une image SVG à l'aide d'un programme développé par soi-même

[modifier | modifier le wikicode]

Présentation

Une image SVG étant un fichier texte, on peut créer un fichier texte à partir d'un programme que l'on réalise soi-même. C'est ce que nous allons faire ici.

À faire

Dans le langage de votre choix (ou bien dans un langage imposé par l'enseignant), déterminez les valeurs de la fonction carré, ƒ(x) = x², pour une vingtaine de valeurs de x bien réparties entre –5 et 5. Créer un fichier au format SVG permettant d'afficher la courbe représentative y = ƒ(x) dans un navigateur Web.


Manipulations avancées < > …