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 texte à positionner pour donner un nom à un point, à un segment ou à un autre objet géométrique.

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.

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(x0; y0) et un vecteur directeur (dxdy), les coordonnées d'un deuxième point peuvent être calculées comme suit: B(x0+dx; y0+dy).
      • Si une droite est définie par un point A(x0; y0) et un vecteur normal (nxny), les coordonnées d'un deuxième point peuvent être calculées comme suit: B(x0+ny; y0nx).
    • Droite définie par l'équation cartésienne ax+by+c=0 :
      • a
      • b
      • c
      • La condition a0 ou b0 doit être remplie.
      • Pour la fonction affine y=mx+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.

cext : de centre O, de rayon 29.5

cint : de centre O, de rayon 6.785

ctxt : de centre O, de rayon 24

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 x2+y2+ax+by+c=0 :
      • a
      • b
      • c
      • La condition (a2)2+(b2)2c0 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.

Aucun arc défini.

Pour ajouter un arc :

  • 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. Le graphique représente un arc dans le sens direct défini par deux directions.
dir1dir2Carc
    • 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 AB, 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 AB.

  • 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 AB, 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 2 dans {1, 2}

Groupe de premier plan

Pour changer de groupe puis

Propriétés du groupe 2

Lignes

Sont concernés les segments, les lignes polygonales 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

É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 3
  • Permuter les groupes 2 et 1
  • Réinitialiser le groupe 2
  • Supprimer le groupe 2

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 P1 et P2 : il s'agit de l'angle orienté φ entre les vecteurs (10) et P1P2. La distance r entre P1 et P2 étant aussi calculée, on obtient les coordonnées polaires (r, φ) de P2 lorsqu'on prend P1 comme origine.

Angle orienté défini par trois points :

P1P2P3φ

La figure représente l'angle donné par trois points P1, P2 et P3 : il s'agit de l'angle orienté φ entre P2P1 et P2P3.

Groupe de premier plan

Objets graphiques du groupe 2

Éléments à dessiner

Segments et polygones du groupe 2

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 2, 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 2

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 2

  • Sélectionner l'action Ajouter

Cercles et disques du groupe 2

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 ou disque n'appartient au groupe.

Pour ajouter un cercle ou un disque au groupe 2

  • Sélectionner le cercle de référence :
  • Sélectionner l'action Ajouter :

Arcs et secteurs du groupe 2

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.

Pour ajouter un arc ou un secteur au groupe 2

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 2

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 2

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

Liste des textes incurvés du groupe

3: 90 °C, 3-5 min, sur le cercle ctxt, de sens direct, d'angle au centre 75°

Les caractères sont répartis à intervalles réguliers (chasse fixe).

Pour ajouter un texte sur cercle au groupe 2

Sens rétrogradeSens direct
  • Texte
  • Choisir le cercle
  • L'ouverture est l'angle au centre en degrés qui mesure l'étalement du texte (par exemple, 180 pour un demi-tour).
    • Pour les textes dans le sens rétrograde, le texte est centré sur la position la plus haute (12 h sur l'horloge)
    • Pour les textes dans le sens direct, le texte est centré sur la position la plus basse (6 h sur l'horloge)
  • Sélectionner l'action Ajouter le texte

La taille de la police doit être adaptée à l'espace disponible.

Flèches du groupe 2

Liste des flèches du groupe

Aucune flèche n'appartient au groupe.

Pour ajouter une flèche au groupe 2

  • 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

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

E a r l G r e y f l e u r s b l e u e s 9 0 ° C , 3 - 5 m i n

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