Dessiner avec SVG.

Le but est de représenter une figure simple (composée de points reliés par des segements de droite), de placer ces points dans un repère orthonormé, et d'utiliser SVG pour la représenter dans une page HTML.

Thèmes abordés : plan, représentation graphique, repère, coordonnées, changement de repère.

Voir aussi : Cheatsheet SVG.

SVG

Créez une nouvelle page html et insérez le code :
<style>
.svgexo{
    display:block;
    margin:1rem;
    border:1px solid grey;
}
.svgexo .axis{
    stroke:black;
}
</style>

<svg
    class="svgexo"
    width="600"
    height="300"
>
    <!-- Dessine les axes -->
    <line x1="30" y1="30" x2="30" y2="270" class="axis" />
    <line x1="30" y1="270" x2="570" y2="270" class="axis" />

    <!-- Dessine la maison -->
    <path d="M100 250 h120 v-150 l-60 -60 l-60 60 v150" style="stroke:darkblue; fill:lightblue" />
</svg>
Se documenter sur quelques formes que l'on peut dessiner en svg :
  • circle
  • ellipse
  • line
  • polygon
  • polyline
  • rect
  • text
Voir par exemple http://www.math.wsu.edu/math/kcooper/M300/svgcheat.php.

Faire des essais en jouant avec ces formes sur une page html brouillon.
Pour comprendre la balise path, lire developer.mozilla.org
Comprendre l'utilisation de la balise <defs>.
Voir par exemple https://vanseodesign.com/web-design/svg-linear-gradients/
Utiliser une balise <defs> pour remplir la figure ci-dessus en utilisant un linear gradient.

Au papier et au crayon

Sur une feuille de papier, dessinez une zone rectangulaire qui va représenter une dessin SVG.
Dessinez soigneusement les axes.
  • Les axes se terminent par une flèche
  • Ils ont une légende
  • Représentez les graduations, sur les axes horizontal et vertical.
  • Dessinez une figure composée de points reliés par des lignes (utilisez la figure donnée en exemple ou créez une figure de votre choix).
  • Mesurez les coordonnées de chaque point de votre figure.
    Vous obtenez une suite de coordonnées { (x1, y1), (x2, y2) ... }

Javascript

Recherche
Comment construire un svg en javascript et l'ajouter à la page ?
Ecrivez une fonction
function svg(attributs, contenu, style, defs){ ... }
  • attributs est un dictionnaire clé: valeur, par exemple :
    const attributs = {
    class:  svgexo,
    width:  600,
    height: 300
    }
    
    attributs doit au moins contenir les clés width et height.
  • contenu est une chaîne de caractères contenant les instructions de dessin (line, path etc.)
  • style est une chaîne de caractères contenant le CSS à utiliser dans ce SVG (par défaut chaîne vide).
  • contenu est une chaîne de caractères contenant une balise defs (par défaut chaîne vide).
La fonction svg() renvoie une chaîne de caractère contenant la balise svg.

Ecrire une page html testant cette fonction.
Réfléchir aux tests qu'il faudrait écrire pour tester les différents comportements possibles de la fonction :
  • attributs ne contient pas width ou height, les valeurs ne de ces attributs ne représentent pas des nombres entiers positifs.
  • L'attribut style est une chaîne vide
  • etc.
Notez que l'écriture de cette fonction correspond à une réponse possible à la question Comment construire un svg en javascript et l'ajouter à la page ?, mais qu'on aurait pu arriver au même résultat d'une autre manière.
On va maintenant se concentrer sur la manière d'écrire le contenu du SVG.

Dessiner une courbe dans un repère

Le but est maintenant d'écrire du code permettant de représenter une courbe constituée de points reliés par des lignes dans un repère muni de coordonnées cartésiennes.
A partir de votre schéma sur papier, identifiez les paramètres utiles à une telle représentation.

Dessiner les axes

Dessiner la figure

Changement de repère.

Dessiner un path

Ressources