Un exemple

Un exemple: tracer une parabole avec entrée des coefficients a, b et c

La page principale parabole.htm

<HTML>
<HEAD>
<SCRIPT language=javascript>       Le script en Javascript qui récupère les entrées et actualise le dessin
var a = 1, b = 2, c = -3;                         valeurs par défaut
function Coeffs()
{ a = parseFloat(document.formular.a.value);                      récupération des paramètres
b = parseFloat(document.formular.b.value);
c = parseFloat(document.formular.c.value);
window.parabole(a, b, c); }                                                   actualisation du tracé
</SCRIPT>
</HEAD>
<BODY bgColor=white onload="Coeffs()">                                          tracé par défaut à l'ouverture de la page
<P><EMBED height=400 src=parabole.svg width=300 ></P>                Le fichier SVG comme objet d'un plugin
<FORM name=formular align="center">                                         Formulaire
f(x) = <INPUT name=a size=2 value=1>x²+                        Entrée des coefficients a, b et c
<INPUT name=b size=2 value=2>x +
<INPUT name=c size=2 value=-3>
<INPUT onclick=Coeffs(); type=button value=Tracer>             Bouton qui déclenche le nouveau tracé
</FORM>
</BODY>
</HTML>

Le fichier parabole.svg fichier texte

<?xml version="1.0" encoding="iso-8859-1"?>
<svg id="root" xml:space="preserve" width="300" height="400" onload="OnLoadEvent(evt)">      Dimensions
<g>
<rect id="bkgrnd" x="0" y="0" width="300" height="400" style="fill:#C0C0C0"/>                   Rectangle de fond
<path id="repere" style="stroke-width:1; stroke:red; fill:none" d="M0 200 300 200 M150 0 150 400"/>            Axes
<path id="repere2" style="stroke-width:1; stroke:black; fill:none" d="M148 192 150 190 152 192 M158 198 160 200 158 202"/>                                                                                                                                                     Flèches des Unités
<path id="curve" style="stroke-width:1; stroke:blue; fill:none" d=""/>                 Déclaration du tracé de la parabole
</g>
<script><![CDATA[
function parabole(a, b, c)
{ var str = "M", dx = 0.1;                                                                                              Pas de tracé
for (var x=-15.; x <= 15.; x += dx)                                                                     Tracé pour x entre -15 et 15
str += (150. + 10.*t) + " " + (200. - 10.*(a*t*t + b*t +c)) + " ";                       Construction de la chaîne (*)
curve.setAttribute("d", str);}
function OnLoadEvent(evt)
{ var doc = evt.getTarget() != null ? evt.getTarget().getOwnerDocument() : null;
if (doc != null)
{ curve = doc.getElementById("curve");
window.parabole = parabole; }}                                             Définition du tracé "curve" comme objet parabole pour la fenêtre
]]></script>
</svg>

L'origine est au centre du rectangle: 150 ; 200. L'unité est de 10 pixels .
Les ordonnées sont comptées à partir du haut du rectangle d'où les formules pour placer un point (x ; y): 150 +10*x et 200 - 10*y
(*) La chaîne sera de la forme Mx₁ y₁x₂ y₂ ………………….