« Découvrir le SVG/Le SVG pour l'enseignement des mathématiques et de la programmation » : différence entre les versions
m →Généralités : note |
→1. Découvrir le SVG et premier exemple : début activité 2 ; mise en sous-sections |
||
Ligne 156 : | Ligne 156 : | ||
=== 1. Découvrir le SVG et premier exemple === |
=== 1. Découvrir le SVG et premier exemple === |
||
==== Introduction ==== |
|||
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 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. |
||
Ligne 166 : | Ligne 166 : | ||
On peut créer un dessin au format SVG avec des logiciels de dessin utilisant la souris, comme par exemple Inkscape. Mais il est aussi possible de créer des dessins en tapant directement les instructions à l'aide d'un éditeur de texte. |
On peut créer un dessin au format SVG avec des logiciels de dessin utilisant la souris, comme par exemple Inkscape. Mais il est aussi possible de créer des dessins en tapant directement les instructions à l'aide d'un éditeur de texte. |
||
==== Objectif ==== |
|||
À la fin de la séance, vous saurez créer une image SVG simple et l'afficher. |
À 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 ==== |
|||
# Ouvrez le logiciel Inkscape [[fichier:Inkscape Logo.svg|26px|logo Inkscape]]. |
# Ouvrez le logiciel Inkscape [[fichier:Inkscape Logo.svg|26px|logo Inkscape]]. |
||
Ligne 198 : | Ligne 198 : | ||
<center>'''Fin de l'activité'''<br />***<br />**<br/>* |
<center>'''Fin de l'activité'''<br />***<br />**<br/>* |
||
</center> |
</center> |
||
==== Activité 2 : Créer une image SVG avec un éditeur de texte ==== |
|||
[[Fichier:Modele vide pour document SVG.svg|vignette|upright=2.5|Squelette 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 : |
|||
# 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. |
|||
# Un pavé contenant les instructions servant à tracer le dessin. Pour l'instant, ce pavé est vide. |
|||
# Un pavé de fin de fichier. |
|||
Nous pouvons déjà remarquer trois choses : |
|||
* les instructions sont mises entre crochets <code><…></code> ; |
|||
* le pavé (pour l'instant vide) contenant les instructions de dessin est compris entre une balise d'ouverture <code style="color:#0000FF"><svg …></code> et une balise de fermeture <code style="color:#0000FF"></svg></code> ; |
|||
* 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 <code style="color:#008800"><!--…--></code>. |
|||
== Notes == |
== Notes == |
Version du 13 avril 2017 à 13:25
Introduction
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.
Généralités
Fiche enseignant
- Objectifs généraux :
- Consolider les notions apprises en géométrie.
- Découvrir la démarche de programmation.
- Comprendre la 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 par exemple Notepad++ pour Microsoft Windows[1] ou bien gedit[2].
- Un navigateur Web supportant le SVG et de préférence le CSS comme par exemple Mozilla Firefox[3].
- Inkscape[4].
- Préparation :
- S'assurer que les apprenant 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_
etz_
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.
- un fichier
Fichiers
Fichier z_styleSVG.css
/* Déclaration 1 : jeu de caractères utilisable */
@charset "UTF-8"; /* ISO Latin-1 */
/* Déclaration 2 : paramètres généraux des éléments */
svg {
stroke: black;
stroke-width: 0.06;
fill: none
}
Fichier z_grille.svg
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"
>
<svg
width="100" height="100" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<title> Grille </title>
<desc> pour faciliter le repérage </desc>
<defs>
<style type="text/css"><![CDATA[
rect {
fill: none;
stroke: lightgray;
stroke-width: 0.03
}
line {
fill: none;
stroke: lightgray;
stroke-width: 0.03
}
]]></style>
</defs>
<symbol id="horizontale">
<line x1="0" y1="0" x2="100%" y2="0" />
</symbol>
<symbol id="verticale">
<line x1="0" y1="0" x2="0" y2="100%" />
</symbol>
<!-- Cadre extérieur -->
<rect
x="0" y="0" width="100%" height="100%"
/>
<!-- Lignes horizontales -->
<use xlink:href="#horizontale" y="10%" />
<use xlink:href="#horizontale" y="20%" />
<use xlink:href="#horizontale" y="30%" />
<use xlink:href="#horizontale" y="40%" />
<use xlink:href="#horizontale" y="50%" />
<use xlink:href="#horizontale" y="60%" />
<use xlink:href="#horizontale" y="70%" />
<use xlink:href="#horizontale" y="80%" />
<use xlink:href="#horizontale" y="90%" />
<!-- Lignes verticales -->
<use xlink:href="#verticale" x="10%" />
<use xlink:href="#verticale" x="20%" />
<use xlink:href="#verticale" x="30%" />
<use xlink:href="#verticale" x="40%" />
<use xlink:href="#verticale" x="50%" />
<use xlink:href="#verticale" x="60%" />
<use xlink:href="#verticale" x="70%" />
<use xlink:href="#verticale" x="80%" />
<use xlink:href="#verticale" x="90%" />
</svg>
Fichier 00_modele.svg
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet href="z_styleSVG.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"
>
<svg
width="600" height="600" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 10 10"
transform="matrix(1, 0, 0, -1, 0, 600)"
>
<title> <!-- Écrire le titre ici --> </title>
<desc> <!-- Écrire une description ici --> </desc>
<image
xlink:href="z_grille.svg"
width="100%" height="100%"
/>
<!-- Écrire vos instructions ici -->
</svg>
Progression didactique
1. Découvrir le SVG et premier exemple
Introduction
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 par exemple Inkscape. Mais il est aussi possible de créer des dessins en tapant directement les instructions à l'aide d'un éditeur de texte.
Objectif
À 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
- Ouvrez le logiciel 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.
- Cliquez sur le « stylo » . Le pointeur prend la forme d'une croix avec un stylo-plume.
- 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é).
- Appuyez sur le touche « Entrée » du clavier : cela termine le tracé.
- Cliquez sur le bouton « Sélection » .
- 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.
- Enregistrez l'image sous le nom
premierEssai
:- Cliquez sur le bouton « Enregistrer » . Cela ouvre la boîte de dialogue « Enregistrer sous ».
- Allez dans le dossier de travail.
- Détailler la procédure selon la manière dont est organisé le disque dur.
- Dans la zone de texte « nom du fichier », tapez «
premierEssai
». - Cliquez sur le bouton « Enregistrer ».
- Fermez Inkscape .
- Ouvrez le navigateur Web .
- 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.
- 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.
- 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 :- Dans la fenêtre du répertoire de travail, cliquez sur le fichier
premierEssai.svg
. - En maintenant le bouton de la souris enfoncé, déplacez le pointeur dans la fenêtre du navigateur Web et relâchez le clic.
- Dans la fenêtre du répertoire de travail, cliquez sur le fichier
- Vérifiez que le dessin qui s'affiche est identique à ce que vous avez dessiné.
- Faite un agrandissement (zoom : touche « Ctrl » du clavier et molette de la souris) pour vérifier que les traits restent lisses.
***
**
*
Activité 2 : Créer une image SVG avec un éditeur de texte
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 :
- 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.
- Un pavé contenant les instructions servant à tracer le dessin. Pour l'instant, ce pavé est vide.
- 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
<!--…-->
.
Notes
- ↑ https://notepad-plus-plus.org/ ou en version « portable » (sans installation, ne nécessite pas d'avoir les droits administrateur) http://portableapps.com/apps/development/notepadpp_portable
- ↑ https://wiki.gnome.org/Apps/Gedit
- ↑ https://www.mozilla.org/fr/firefox/new/
- ↑ https://inkscape.org/fr/ ou en version « portable » http://portableapps.com/apps/graphics_pictures/inkscape_portable
Manipulations avancées < ↑ > …