Pré-requis

Savoir ce qu'est un fichier SVG.
Savoir ce qu'est un fichier HTML et savoir le modifier (pour le lier à un fichier SVG).
Disposer d'un ordinateur capable d'exécuter du code Python. Un double-clic sur le fichier "svg.py" suffit alors pour lancer le programme (en mode terminal).

Les ordinateurs fonctionnant sous distribution Linux (tel qu'Ubuntu) peuvent exécuter du code Python. Sous Windows, une installation préalable de Python est généralement requise.

Rôle du programme

Ce programme, codé en Python, dédié à la construction de représentations géométriques, est un outil permettant d'afficher le code SVG correspondant et de créer un fichier SVG.

Cet outil apporte une grande aide dans la réalisation du code SVG. Toutefois, il vous appartient de finaliser le code, si nécessaire (notamment pour ajouter des formes, des textes ou des animations).

Initialement, cet outil a été conçu pour créer du code SVG relatif à des droites (hauteurs, médianes et médiatrices de triangles).

Les images peuvent ne pas correspondre exactement au texte de la présente documentation. Elles fournissent cependant un très bon aperçu du fonctionnement du programme.

Configuration

Avant de dessiner, il faut définir les caractéristiques de l'image.

Lorsque le fichier `param.txt` n'existe pas
dans le dossier du programme.

Par défaut, la largeur de l'image vaut 800 pixels. Elle peut varier de 16 à 7680 pixels.

Par défaut, la hauteur de l'image vaut 600 pixels. Elle peut varier de 16 à 4320 pixels.

La taille 7680 x 4320 pixels correspond aux écrans TV 8K.

Par défaut, l'axe des X est situé à 100 pixels par rapport au bas de l'image. Il peut être situé jusqu'à 1000 pixels hors de l'image.

Par défaut, l'axe des Y est situé à 200 pixels par rapport au bord gauche de l'image. Il peut être situé jusqu'à 1000 pixels hors de l'image.

Par défaut, la couleur de fond de l'image est blanc.

Vous pouvez indiquer le nom d'une couleur ou son code. Exemple : Aqua ou #00FFFF
Liste des noms de couleurs/code.

Par défaut, les axes X et Y sont représentés sur l'image. Il suffit de taper "N" (Non) pour qu'ils ne soient pas repris sur l'image à créer.

Par défaut, la couleur des axes est noir.

Le programme s'assure que les données (fournies par l'utilisateur), issues du système de coordonnées utilisé en mathématique (avec l'axe des Y pointant vers le haut) soient correctement représentées dans le système de coordonnées utilisé en informatique (avec l'axe des Y pointant vers le bas).

Image conforme aux options choisies. (302 octets)

Le fichier SVG créé (dans le dossier du programme) pourra être renommé, déplacé et intégré dans un fichier HTML, tel que :

<img src="axes.svg" width="800" height="600" alt="" />

En modifiant les valeurs des attributs width et height de la balise <img />, l'image sera affichée à la taille indiquée par ces attributs. Si ces valeurs ne correspondent pas à celles contenues dans le code SVG, l'image sera "déformée", sans perte de qualité. Outre leur extrême légèreté, c'est le principal avantage des images vectorielles (tel que .svg) sur les images matricielles ( .jpg, .png, .gif, ...)

Le même fichier (axes.svg) ...

<p class="centrer">
  <img src="axes.svg" width="400" height="300" alt="" />
  <img src="axes.svg" width="200" height="150" alt="" />
  <img src="axes.svg" width="100" height="75" alt="" />
</p>

1. Droite

Ce choix permet d'afficher l'équation d'une droite passant par deux points, l'angle de la pente, le code SVG qui peut être ajouté au fichier SVG.

Au niveau des coordonnées, si la valeur n'est pas indiquée, elle vaut 0.

La valeur peut être décimale. Dans ce cas, il faut utiliser le point décimal.
Une unité vaut un pixel.

Si les deux points sont confondus, une (seule) droite ne peut pas être dessinée.

Après avoir donné les coordonnées des deux points, s'affiche l'équation de la droite sous la forme Y = aX + b où les coefficients sont mis entre parenthèses => Y = (a)X + (b). Si le second point est à la verticale du premier, l'équation de la droite (verticale) est sous la forme X = (k) (où k est une constante).

Et, après avoir donné la couleur, l'épaisseur et la discontinuité de la ligne, s'affiche le code SVG de la ligne où x1 vaut toujours 0 et où x2 vaut toujours la largeur de l'image.

Attention, les éventuelles valeurs données (relatives à la couleur, à l'épaisseur et à la discontinuité) ne sont pas vérifiées.

Droite verticale. Équation de la droite : X = k
avec k=100 (donc, elle est parallèle à l'axe des Y et à sa droite de 100 unités)
La droite est rouge, d'épaisseur d'un pixel et en pointillé
(trait de 5 pixels suivis d'un vide de 5 pixels).

[1(1)10] : Lorsque le choix est numérique et borné, la valeur par défaut est indiquée entre ( et ).

Droite horizontale (Angle = 0). Équation de la droite : Y = aX + b
avec a=0 (donc, elle est parallèle à l'axe des X)
et avec b=50 (donc, elle est située à 50 unités au dessus de l'axe des X)
La droite est rouge, d'épaisseur d'un pixel et en pointillé
(trait de 10 pixels suivis d'un vide de 10 pixels).

Droite oblique. Équation de la droite : Y = aX + b
avec b=0 (donc, elle passe par l'origine du système de coordonnées).

Vous avez ensuite la possibilité d'ajouter ce code SVG dans le fichier (SVG). Tapez "N" (Non) si vous ne souhaitez pas l'ajouter (ou rien ou n'importe quoi pour l'ajouter).

Les 3 droites encodées. (600 octets)

2. // (Parallèle)

Le programme permet de dessiner une parallèle à une droite, passant par un point.

(882 octets)

3. + (Perpendiculaire)

Le programme permet de dessiner une perpendiculaire à une droite, passant par un point.

(893 octets)

4. Pt d'intersection

Le programme permet d'afficher les coordonnées du point d'intersection entre deux droites (au niveau mathématique et sur l'image).

La connaissance du point d'intersection de deux droites permet :

dans le cas de deux médiatrices d'un triangle, de connaître le centre du cercle qui le circonscrit. Il est ensuite possible d'ajouter du code SVG pour dessiner ce cercle.
dans le cas de perpendiculaires, de connaître le point de rotation du petit carré. Il est ensuite possible d'ajouter du code SVG pour le dessiner ce petit carré suivant l'angle de sa perpendiculaire.
...

(1 188 octets)

Lorsque la couleur de fond de l'image n'est pas indiquée, elle prendra la couleur de fond de la page web. Notez qu'une couleur par défaut est une couleur ...

5. Segment de droite + distance

Une droite est de longueur infinie et donc traverse toute l'image. Un segment de droite est borné par deux points. Si un point ou les deux se situent dans l'image, le trait ne traversera pas toute l'image (sauf, s'il est ou ils sont sur le bord de l'image).

(407 octets)

6. Code SVG

Il est possible d'ajouter du code SVG. Et, donc des formes, des textes et des animations ...

(932 octets)

7. Pt SVG

Après avoir donné les coordonnées (mathématiques) d'un point, s'affichent les valeurs x1 et y1 du point dans l'image.

L'origine (0,0) est à 200 pixels du bord gauche et à 500 pixels du bord haut.

Les valeurs x1 et y1 dépendent de la configuration donnée après le lancement du programme.

99

Après avoir modifié la fonction test() dans le code-source, en tapant "99" comme choix dans le menu le code de cette fonction est exécuté. Ceci permet de tester le programme (et de stocker les valeurs nécessaires pour créer des fichiers SVG servant à illustrer une page web).

Contacter l'auteur