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

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

Javascript

Recherche
Comment construire un svg en javascript et l'ajouter à la page ?
Ecrivez une fonction
function svg(attributs, contenu, style, defs){ ... }
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 : 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