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

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.

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

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

Généralités

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.

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
}
text {
	stroke: none;
	stroke-witdth: 0;
	fill: black;
	font-family: serif, Times New Roman;
	transform: matrix(0.05, 0, 0, -0.05, 0, 0)
}

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"
>

  <title> <!-- Écrire le titre ici --> </title>
  <desc> <!-- Écrire une description ici --> </desc>

  <image
     xlink:href="z_grille.svg"
     width="100%" height="100%"
  />
  <g transform="matrix(1, 0, 0, -1, 0, 600)">  

  <!-- Écrire vos instructions ici -->
  
  </g>
 </svg>

Progression didactique

1. Découvrir le SVG et premier exemple

Note à l'enseignant

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

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 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 la 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 :
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 .
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 :
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.
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.
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

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 :

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 .

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 :

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.
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 ».
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 ».
Entre les balises <title>…</title>, supprimez le commentaire et écrivez à la place le titre : « Premier exemple de fichier SVG ».
Entre les balises <desc>…</desc>, supprimez le commentaire et écrivez à la place la description : « Une image simple ».

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" />

Enregistrez le fichier.
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.
Revenez dans l'éditeur de texte. À la suite des commandes précédentes, ajoutez :
```
    <rect x="2" y="6" width="5" height="3" />
```
Enregistrez à nouveau le fichier.
Cliquez dans la fenêtre du navigateur Web et appuyez sur la touche « F5 » du clavier. Commentez ce que vous voyez.
Vérifiez que votre image est conforme au standard du W3C.
https://validator.w3.org/
Selon vous, à quoi sert le descriptif placé entre les balises <desc>…</desc> ?

Réponses attendues

Les conclusions attendues sont :

pour la question du point 8 :
- le titre « Premier exemple de fichier SVG » s'affiche dans l'onglet en haut de l'image,
- la commande <line…> a provoqué le tracé d'un ligne entre les points de coordonnées (1 ; 1) et (5; 5), c'est-à-dire entre les points de coordonnées les attributs (x₁ ; y₁) et (x₂ ; y₂),
- la commande <circle…> a provoqué le tracé d'un cercle de centre (5; 5) et de rayon 2, c'est-à-dire que le centre a pour coordonnées les attributs (cx ; cy) et de rayon l'attribut r ;
pour la question du point 11 :
- la touche « F5 » provoque le rafraîchissement de l'image et fait donc apparaître les modifications faites au fichier .svg,
- la commande <rect…> a provoqué le tracé d'un rectangle dont le sommet en haut a gauche a pour coordonnées (2 ; 6) et qui a une largeur de 5 et une hauteur de 3 ; c'est-à-dire que le sommet en bas à gauche a pour coordonnées les attributs (x ; y), pour largeur l'attribut width et pour hauteur l'attribut height
  notez qu'en anglais, width signifie « largeur » et height signifie « hauteur » ;
pour la question du point 13 : le descriptif est utilisé pour l'audio-description ; il permet aux aveugles et mal-voyants de savoir ce que contient l'image ; il peut aussi servir a catégoriser l'image pour faciliter son classement et permettre de la retrouver facilement avec un moteur de recherche.

Conclusion

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 : [(x₁ ; y₁) ; (x₂ ; y₂)],
- l'élément <circle … /> a pour attributs cx, cy et r qui déterminent la position de son centre (c_x ; c_y) 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

Notes à l'enseignant

Le niveau de difficulté est de 13 ou 14.

Prérequis

Travaux dirigés précédents

Activité 1 : reproduire un dessin

Étudiez le formulaire ci-dessous.
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.

Formulaire SVG

Formulaire SVG.

Voici quelques instructions de SVG.

<line x1="x₁" y1="y₁" x2="x₂" y2="y₂" /> : trace un segment de droite du point de coordonnées (x₁ ; y₁) au point de coordonnées (x₂ ; y₂).
<rect x="x₁" y="y₁" width="L" height="H /> : trace un rectangle dont le point en haut à gauche a pour coordonnées (x₁ ; y₁), et de largeur L et de hauteur H.
<circle cx="x₁" cy="y₁" r="R" /> : trace un cercle dont le centre a pour coordonnées (x₁ ; y₁), et de rayon R.
<path d="M x₁ y₁, x₂ y₂, x₃ y₃" /> : trace une ligne brisée entre les points de coordonnées (x₁ ; y₁) — (x₂ ; y₂) — (x₃ ; y₃).
<path d="M x₁ y₁ l dx₂ dy₂, dx₃ dy₃" /> : trace une ligne brisée partant du point de coordonnées (x₁ ; y₁) et en se déplaçant des vecteurs de composantes (dx₂ ; dy₂) puis (dx₃ ; dy₃). Faites attention : après « y₁ », le « l » désigne la lettre L minuscule, et il ne doit pas y avoir de virgule devant.

Vocabulaire :

les objets graphiques sont appelés « éléments » ; nous avons donc ici les éléments line (ligne), rect (rectangle), circle (cercle) et path (chemin) ;
les paramètres qui caractérisent un élément sont appelés « attributs » :
- l'élément line a pour attributs x1, y1, x2, y2,
- l'élément rect a pour attributs x, y, width et height,
- l'élément circle a pour attributs cx, cy et r,
- l'élément path a pour attribut d.

Notez que :

les virgules ne sont pas obligatoires ;
on peut revenir à la ligne à l'intérieur d'un élément (comme dans l'image ci-contre).

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

Notes à l'enseignant

Prérequis

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

De créer un chaîne de caractères.
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

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.

Réponse attendue

Nous choisissons ici de donner la solution avec le langage Scilab.

Si le fichier SVG contient n lignes, il faut définir une matrice n × 1 de chaînes de caractères.

Nous commençons par définir l'en-tête et la fin de fichier chacun dans une variable (matrice d'une colonne de chaînes de caractères).

Ensuite, nous calculons les valeurs de x et de y. Puis, à l'aide de la fonction string(), nous transformons ces valeurs en chaînes de caractères. Pour simplifier, nous mettons un point par ligne, mais nous nous assurons qu'il n'y a qu'une seule colonne.

//============================================================================
// nom : fonctionCarre.sce
// auteur : Christophe Dang Ngoc Chan
// date de création : 2017-04-27
// dates de modification : 
//----------------------------------------------------------------------------
// version de Scilab : 6.0.0
// module Atoms requis : aucun
//----------------------------------------------------------------------------
// Objectif : Créer un fichier SVG permettant d'afficher le graphe de la
//   fonction carré
// Entrées : aucune (paramètres en dur)
// Sorties : fichier au format SVG
//============================================================================

// **************
// * Constantes *
// **************

// Définition du fichier

chemin = "C:\dossier_de_travail\";
nomDeFichier = "fonctionCarree.svg";

// Domaine de définition

valmin = -5;
valmax = 5;
N = 21;
X = linspace(valmin, valmax, N);

// Structure du fichier SVG

entete =["<?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=""-5 0 5 25"" "
">"
" "
"  <title> Fonction carré </title>"
"  <desc> Courbe représentative de la fonction carré entre -5 et 5 </desc>"
" "
"<g transform=""matrix(1, 0, 0, -1, 0, 25)"">"];

finDeFichier = ["</g>"
" "
"</svg>"];

// ***********************
// * Programme principal *
// ***********************

// Calcul de la fonction carré

Y = X.^2;

// Génération du code

ligne1 = "<path d=""M "+string(X(1))+" "+string(Y(1));
corps = string(X(2:$)')+" "+string(Y(2:$)');
ligneFin = " "" />";

matriceFichier = [entete
ligne1
corps
ligneFin
finDeFichier];

// Ecriture du fichier

chdir(chemin);
write(nomDeFichier, matriceFichier);

On vérifie ensuite que la courbe s'affiche bien dans un navigateur Web et que le code SVG est bien valide.

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 < ↑ > …

[1] ttps://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

[2] ttps://wiki.gnome.org/Apps/Gedit

[3] ttps://www.mozilla.org/fr/firefox/new/

[4] ttps://inkscape.org/fr/ ou en version « portable » http://portableapps.com/apps/graphics_pictures/inkscape_portable

[1]

[2]

[3]

[4]