Dessiner avec SVG.

<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.

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) ... }

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.

A partir de votre schéma sur papier, identifiez les paramètres utiles à une telle représentation.