Créer des graphiques SVG en coordonnées mathématiques

avec le calculateur en ligne

Cette application en ligne permet de

  • définir son propre système de coordonnées, avec l'axe vertical orienté vers le haut (comme en mathématiques) ;
  • dessiner les objets courants de la géométrie plane :
    • un point est défini par ses coordonnées ;
    • un segment est défini par ses extrémités qui sont des points ;
    • un polygone (ligne brisée et/ou surface) par une liste de points ;
    • une droite par deux points ou par les coefficients de l'équation cartésienne ;
    • un cercle ou un disque par le centre et le rayon, ou par les coefficients de l'équation cartésienne ;
    • un arc ou un secteur par un cercle et deux directions qui peuvent être des angles ;
    • une flèche est définie par ses extrémités qui sont des points ; un arc fléché est défini par un arc orienté ;
    • un texte à positionner pour donner un nom à un point, à un segment ou à un autre objet géométrique ; il peut être incliné ;
    • un texte à écrire en rond sur un cercle.

Exemples de graphiques SVG produits par deleze.name

Le graphique peut être téléchargé, puis inséré dans un document traitement de textes ou une page web.

La page de données peut être enregistrée dans le but de modifier le graphique plus tard.

Les illustrations de cette page (voir ci-dessous) ont été réalisées avec la présente application en ligne.

Objets géométriques

Définitions auxquelles on se réfère

Réinitialisation

Pour effacer toutes les données :

  • sélectionner Nouveau graphique

Liste des points

O (0; 0)

I (1; 0)

Tous les points qui interviennent dans le graphique doivent être déclarés ici : extrémités des segments, sommets des lignes polygonales, centres de certains cercles, extrémités des flèches, etc.

Pour ajouter un point :

  • Nom Pour modifier un point : si le nom du point existe, les nouvelles coordonnées remplacent les anciennes. Par contre, deux points de noms différents peuvent avoir les mêmes coordonnées.
  • Coordonnées :
    • x
    • y
  • Sélectionner l'action Ajouter

On peut aussi définir un point par ses coordonnées polaires (r, φ) via la rubrique «Construire un point par rotation-homothétie» avec «Point auquel s'applique la transformation»=I(1;0), «Centre de rotation»=O(0;0), «Angle de rotation»=φ et «Rapport d'homothétie»=r.

Liste des droites

Ox : (0)x + (1) y + (0) = 0

Oy : (1)x + (0) y + (0) = 0

Pour ajouter une droite :

  • Nom Pour modifier une droite : si le nom de la droite existe, les nouvelles données remplacent les anciennes. Par contre, deux droites de noms différents peuvent avoir les mêmes données.
  • Choisir l'une des deux manières de définir la droite
    • Droite définie par deux points :
      • Si une droite est définie par un point \( A ( x_0; \ y_0 ) \) et un vecteur directeur \( \left( \begin{array}{c} d_x \\ d_y \end{array} \right) \), les coordonnées d'un deuxième point peuvent être calculées comme suit: \( B ( x_0 + d_x; \ y_0 + d_y ) \).
      • Si une droite est définie par un point \( A ( x_0; \ y_0 ) \) et un vecteur normal \( \left( \begin{array}{c} n_x \\ n_y \end{array} \right) \), les coordonnées d'un deuxième point peuvent être calculées comme suit: \( B ( x_0 + n_y; \ y_0 - n_x ) \).
    • Droite définie par l'équation cartésienne \( a x + b y + c = 0 \) :
      • a
      • b
      • c
      • La condition \( a \neq 0 \ \mathrm{ou} \ b \neq 0 \) doit être remplie.
      • Pour la fonction affine \( y = m x + p \), poser \( a=m, \ b=-1, \ c=p \).
  • Sélectionner l'action Ajouter

Liste des cercles

En plus des cercles proprement dits, il faut déclarer ici tous les cercles auxquels se réfèrent les disques, les arcs, les secteurs, ainsi que les points que l'on veut représenter comme des disques de petit rayon.

Aucun cercle défini.

Pour ajouter un cercle :

  • Nom Pour modifier un cercle : si le nom du cercle existe, les nouvelles données remplacent les anciennes. Par contre, deux cercles de noms différents peuvent avoir les mêmes données.
  • Choisir l'une des deux manières de définir le cercle
    • Cercle défini par le centre et le rayon :
      • Centre:
      • Rayon:
    • Cercle défini par l'équation cartésienne \( x^2 + y^2 + a x + b y + c = 0 \) :
      • a
      • b
      • c
      • La condition \( \left( \frac{a}{2} \right)^2 + \left( \frac{b}{2} \right)^2 - c \geq 0\) doit être remplie.
  • Sélectionner l'action Ajouter

Liste des arcs de cercles

En plus des arcs proprement dits, il faut déclarer ici tous les arcs des secteurs.

Pour définir un arc, il faut d'abord définir le cercle auquel il appartient (voir ci-dessus).

Cdir1dir2arc

Pour ajouter un arc orienté :

  • Nom Pour modifier un arc : si le nom de l'arc existe, les nouvelles données remplacent les anciennes. Par contre, deux arcs de noms différents peuvent avoir les mêmes données.
  • Choisir le cercle de référence
  • Pour définir l'arc, il faut donner deux directions. Chaque direction peut être définie par l'une des trois méthodes proposées. Les graphiques représentent
    • un arc dans le sens direct défini par deux directions,
    • une direction donnée par un angle du cercle trigonométrique,
    • les deux sens d'un arc : direct ou rétrograde.
45°90°135°180°-45°-90°-135°
    • Première direction
      • par un point pas nécessairement situé sur l'arc ;
      • par un angle du cercle trigonométrique, en degrés
      • par un angle du cercle trigonométrique, en radians
    • Deuxième direction
      • par un point pas nécessairement situé sur l'arc ;
      • par un angle du cercle trigonométrique, en degrés
      • par un angle du cercle trigonométrique, en radians
Sens rétrogradeSens direct
  • Sélectionner l'action Ajouter : le sens direct est le sens inverse des aiguilles de la montre ; le sens rétrograde est celui des aiguilles de la montre.

Construire un point sur une droite graduée

AB01234-1-2

La droite AB étant graduée à partir de A, la figure illustre ce qu'est l'abscisse d'un point. Pour graduer, les distances sont calculées avec les coordonnées des points, ce qui fait que la distance AB ne joue aucun rôle. Dans le sens de B, les abscisses sont positives, dans le sens opposé, elles sont négatives.

  • Nom du nouveau point
  • Point d'origine de la droite
  • Deuxième point de la droite pour la direction
  • Abscisse
  • Sélectionner l'action

Les points ainsi construits apparaissent sous la rubrique «Liste des points».

Si on préfère travailler avec des multiples du vecteur \( \overrightarrow{A B} \), voir plus bas à la rubrique «Homothétie».

Construire un point par translation

ABCD

La figure montre la construction du nouveau point \( D \) obtenu en appliquant au point \( C \) la translation de vecteur \( \overrightarrow{A B} \).

  • Nom du nouveau point
  • Point d'application de la translation
  • Extrémités du vecteur de translation
  • Sélectionner l'action

Les points ainsi construits apparaissent sous la rubrique «Liste des points».

Construire un point par symétrie axiale ou par projection orthogonale

AdBC

La figure représente

  • la construction du nouveau point B par une transformation appliquée au point A : il s'agit d'une symétrie axiale dont l'axe est la droite d ;
  • la construction du nouveau point C par une transformation appliquée au point A : il s'agit de la projection orthogonale de A sur la droite d.

Pour ajouter un point

  • Nom du nouveau point
  • Point auquel s'applique la transformation
  • Axe de symétrie ou droite sur laquelle s'effectue la projection
  • Sélectionner l'action Symétrie ou Projection

Les points ainsi construits apparaissent sous la rubrique «Liste des points».

Construire un point par rotation-homothétie

CAZ

La figure représente la construction du nouveau point Z au moyen d'une transformation appliquée au point A : une rotation de centre C, d'angle 40°, suivie d'une homothétie de rapport 2.

  • Nom du nouveau point
  • Point auquel s'applique la transformation
  • Centre de rotation et d'homothétie
  • Angle de rotation (ne remplir que l'un des deux champs) :
    • en degrés
    • en radians
  • Rapport d'homothétie
  • Sélectionner l'action

Les points ainsi construits apparaissent sous la rubrique «Liste des points».

Applications

  • Pour une rotation pure, choisir «Rapport d'homothétie» \( = 1 \).
  • Pour homothétie pure, choisir «Angle de rotation» \( = 0 \).
  • Pour ajouter le point-milieu du segment \( A B \), choisir «Point auquel s'applique la transformation » \( = B \), «Centre de rotation et d'homothétie» \( = A \), «Angle de rotation» \( = 0 \) et «Rapport d'homothétie» \( = 0.5 \).
  • Pour ajouter le point image de \( A \) par symétrie centrale de centre \( C \), choisir «Point auquel s'applique la transformation » \( = A \), «Centre de rotation et d'homothétie» \( = C \), «Angle de rotation» \( = 0 \) et «Rapport d'homothétie» \( = -1 \).

Les groupes ont deux fonctions :

  • ils regroupent des éléments graphiques qui ont des propriétés communes : épaisseur et couleur des lignes, couleur des surfaces, caractéristiques des textes et des flèches ;
  • leur numérotation définit l'ordre dans lequel les éléments sont dessinés, d'abord les éléments d'arrière-plan (groupe 1), puis, en dernier, les éléments de premier plan.

Groupe 1 dans {1}

Propriétés du groupe 1

Lignes

Sont concernés les segments, les lignes polygonales, les droites, les cercles et les arcs.

Épaisseur du trait (stroke-width)

Couleur du trait (stroke)

Traitillé (dash)

Surfaces

Sont concernés les surfaces polygonales, les disques et les secteurs.

Couleur de remplissage (fill)

Textes

Taille de la police (font-size)

Couleur de la police (fill)

Style de la police

Flèches

Sont concernés les flèches et les arcs fléchés.

Épaisseur de la hampe (stroke-width)

Longueur de la pointe (en unités du repère mathématique)

Couleur de la flèche (stroke et fill)

Après une ou plusieurs modifications des propriétés du groupe,

Actions disponibles sur les groupes (voir le sélecteur) :

  • Ajouter le groupe 2
  • Réinitialiser le groupe 1

Calculatrice

La calculatrice n'a aucune influence sur le graphique SVG, mais les résultats peuvent être utiles, par exemple pour définir une rotation.

Angle d'élévation d'une droite donnée par deux points

P1P2φr

La figure représente l'angle d'élévation de la droite définie par les points \( P_1 \) et \( P_2 \) : il s'agit de l'angle orienté φ entre les vecteurs \( \left( \begin{array}{c} 1 \\ 0 \end{array} \right) \) et \( \overrightarrow{P_{1} P_{2}} \). La distance r entre \( P_1 \) et \( P_2 \) étant aussi calculée, on obtient les coordonnées polaires (r, φ) de \( P_2 \) lorsqu'on prend \( P_1 \) comme origine.

Angle orienté défini par trois points :

P1P2P3φ

La figure représente l'angle donné par trois points \( P_1 \), \( P_2 \) et \( P_3 \) : il s'agit de l'angle orienté φ entre \( \overrightarrow{P_{2} P_{1}} \) et \( \overrightarrow{P_{2} P_{3}} \).

Objets graphiques du groupe 1

Éléments à dessiner

Segments et polygones du groupe 1

Un segment est défini par deux points, un polygone par une liste de points.

Liste des segments et polygones du groupe

Dans le groupe 1, aucun segment ou polygone n'est défini.

Pour ajouter un polygone :

  • Pour dessiner le segment AB, sélectionner deux points: A et B.
    Pour dessiner le triangle ABC, sélectionner quatre points: A, B, C, A.
    Pour dessiner l'hexagone ABCDEF
    • sélectionner les cinq premiers points A, B, C, D, E, sélectionner l'action Nouveau polygone et Actualiser ;
    • sélectionner les deux points suivants F, A, puis sélectionner l'action Prolonger A-B-C-D-E.
  • Si trois points ou plus sont donnés, sélectionner si on veut dessiner une ligne polygonale ou/et une surface polygonale
  • Sélectionner l'action Nouveau polygone

Droites du groupe 1

Une droite à dessiner se réfère à une droite définie sous Objets géométriques.

Liste des droites du groupe

Aucune droite n'appartient au groupe.

Pour ajouter une droite au groupe 1

  • Sélectionner l'action Ajouter

Cercles et disques du groupe 1

Un cercle est une ligne. Un disque est une surface.

Un point de taille réglable peut être représenté par un disque de petit rayon.

Un cercle ou un disque à dessiner se réfère à un cercle défini sous Objets géométriques.

Liste des cercles et disques du groupe

Aucun cercle n'a été défini sous Objets géométriques.

Pour ajouter un cercle ou un disque au groupe 1

Arcs et secteurs du groupe 1

Un arc est une ligne. Un secteur est une surface.

Un arc ou un secteur à dessiner se réfère à un arc défini sous Objets géométriques.

Liste des arcs et secteurs du groupe

Aucun arc n'a été défini sous Objets géométriques.

Pour ajouter un arc ou un secteur au groupe 1

Textes positionnés

Les textes servent à donner un nom à certains objets géométriques: le point A, la droite d2, l'angle α, etc. Ces désignations doivent apparaître à des positions précises dans la figure.

Liste des textes du groupe 1

Aucun texte n'a été défini.

Pour ajouter un nouveau texte :

  • Remplir le champ Texte
    • On peut introduire un indice en le préfixant d'un trait de soulignement, par exemple A_2. Limitation: un seul indice ou exposant par texte.
    • On peut introduire un exposant en le préfixant du caractère circonflexe , par exemple x^2. Limitation: un seul indice ou exposant par texte.
    • Pour utiliser une lettre grecque α β γ δ ..., il faut introduire son code HTML : α β γ δ ... Pour les majuscules grecques Α Β Γ Δ ..., les codes sont Α Β Γ Δ ...
  • On peut définir la position du texte par l'un des trois moyens suivants dans lesquels les textes sont centrés horizontalement et verticalement :
    • Pour nommer un point : donner un point et une correction (Δx, Δy) :
      • Δx
      • Δy
ABTextepositiondistance
    • Pour nommer un segment ou une droite, donner la position du texte sur la droite et la distance à la droite. La figure représente le positionnement du texte «Texte» (en gris clair) à proximité de la droite AB.
      • Position sur le segment ou la droite La position 0 correspond au premier point, la position 1 au deuxième point, la position 0.5 au milieu du segment. On peut aussi choisir une position négative ou supérieure à 1.
      • Distance à la droite Cette distance est affectée d'un signe : une valeur positive place le texte sur la gauche de (Point 1Point 2), une valeur négative sur la droite.
BAC12-1
    • Pour nommer un angle ou le sommet d'un angle : donner trois points A, B, C et l'abscisse du texte sur la bissectrice de l'angle ABC :
      • Il faut d'abord définir au moins trois points.
  • Rotation du texte, angle en degrés La calculatrice intégrée peut être utile :
    • 0 : texte horizontal de gauche à droite
    • 90 : texte vertical de bas en haut
    • -90 : texte vertical de haut en bas
  • Sélectionner l'action Ajouter

Textes sur cercles du groupe 1

Le cercle doit avoir été défini sous Objets géométriques.

Liste des textes incurvés du groupe

Aucun cercle n'a été défini.

Flèches du groupe 1

Liste des flèches du groupe

Aucune flèche n'appartient au groupe.

Pour ajouter une flèche au groupe 1

  • Sélectionner le et le
    Les deux points doivent être distincts.
    Si la flèche est plus courte que la longueur de la pointe, seule la pointe est dessinée.
  • Pour la translation latérale, l'abscisse est une distance affectée d'un signe: un nombre positif translate la flèche vers la gauche, un nombre négatif vers la droite :
  • Pour le raccourcissement, par exemple, le nombre 0.2 raccourcit le vecteur de 10% à chaque extrémité : Une valeur négative le rallonge.
  • Sélectionner l'action Ajouter la flèche

Arcs fléchés du groupe 1

Liste des arcs fléchés du groupe

Au moins un arc doit avoir été défini sous Objets géométriques.

Fenêtre graphique

xmin

xmax

ymin

ymax

Largeur de la fenêtre graphique en pixels

La hauteur de la fenêtre graphique en pixels est calculée de manière à conserver le ratio d'aspect.

Couleur du fond

Attention : le redimensionnement de la fenêtre graphique peut déséquilibrer les dimensions relatives des figures et des textes.

Représentation graphique

Télécharger le code SVG du graphique

Le fichier enregistré avec l'extension .svg peut être inséré en tant qu'image dans un document traitement de textes ou dans une page HTML.

Enregistrer la page web

Afin de pouvoir, plus tard, modifier le graphique sans tout recommencer, il faut enregistrer le dernier état de la page web, car elle contient les données. Il est ainsi possible de développer plusieurs variantes d'un même graphique.

  • Avec Chrome : Menu Plus d'outils > Enregistrer la page sous avec l'option Page web complète, par exemple sous le nom fig-06.html.
  • Avec Edge : Menu Outils supplémentaires > Enregistrer la page sous > Type : Page web complète > Nom : fig-06.html > Enregistrer.

Contact  |  Accueil  >   Graphiques vectoriels adaptables SVG