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

A (1; -3)

B (3; 1)

C (-2; 0)

D (0; 4) : translation appliquée à C de vecteur (AB)

I (1; 0)

O (0; 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.

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 x2+y2+ax+by+c=0 :
      • a
      • b
      • c
      • La condition (a2)2+(b2)2c0 doit être remplie.
  • Sélectionner l'action Ajouter

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

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

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

Pour une rotation pure, choisir «Rapport d'homothétie» =1.

Pour homothétie pure, choisir «Angle de rotation» =0.

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 points ainsi construits apparaissent sous la rubrique «Liste des points».

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 3 dans {1, ..., 3}

Groupe de premier plan

Pour changer de groupe puis

Propriétés du groupe 3

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

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 3

Éléments à dessiner

Segments et polygones du groupe 3

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

Liste des segments et polygones du groupe

A - C : ligne

B - D : ligne

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 3

Liste des droites du groupe

Aucune droite n'appartient au groupe.

Pour ajouter une droite au groupe 3

  • Sélectionner l'action Ajouter

Cercles, disques, arcs et secteurs du groupe 3

Un cercle est une ligne. Un arc est une portion de cercle définie par deux angles. Un disque est une surface. Un secteur est une portion de disque définie par deux angles.

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

Dans tous ces cas, se référer au cercle correspondant.

Liste des cercles, disques, arcs et secteurs du groupe

Au moins un cercle doit avoir été défini.

Pour ajouter un cercle, un disque, un arc ou un secteur au groupe 3

dir1dir2Carc

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 3

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 :
      • Abscisse L'abscisse est une distance affectée d'un signe: une abscisse positive place le texte à l'intérieur de l'angle, une abscisse négative à l'extérieur.
  • 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

Flèches du groupe 3

Liste des flèches du groupe

Aucune flèche n'appartient au groupe.

Pour ajouter une flèche au groupe 3

  • 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

A B C D

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