<object data="rect2.svg" width="100%" height="400px" type="image/svg+xml"></object> syntaxe à utiliser si interactivité
ou
<embed id="Smiley" src="smiley.svg" type="image/svg+xml">
(obsolète) ou
<img id="Smiley" src="smiley.svg"> (sans interactivité)
ou
élément inline <svg>. Attributs width et height (valeurs en px ou en %)
Eléments SVG
circle (attributs cx,cy,r)
rect (x,y,height,width) rx: pour angles arrondis
ellipse (attributs cx,cy,rx,ry)
text (x,y,font-size et autres CSS) contenu élément=à afficher
line (x1,y1,x2,y2)
image (x,y,height,width,xlink:href)
polygon (points: liste de points. exemple: points="x1,y1 x2,y2 x3,y3")
polyline (idem)
g permet de regrouper objets avec attributs communs exemple <g fill="red">
Attributs
fill ("none", nom ou code couleur)
stroke (nom ou code couleur)
stroke-width
id et class
style (CSS). Propriétés de police et de texte, display, visibility, clip, cursor, fill, stroke, stroke-width,.. Exemple: fill:yellow;
On peut ajouter des évèments avec attributs onclick,..
Path
Combinaison de lignes L, splines (cubiques C/S ou quadratiques Q), et arcs d'ellipse A. La lettre doit précéder, pas besoin de la répéter. un "Z" permet de "refermer" un chemin jusqu'au dernier M. Lettres en minuscules: valeurs relatives.
Convention: séparer abscisse et ordonnée par une virgule, les couples de coordonnées par un espace.
La liste de coordonnées est dans l'attribut d="M x1,y1 ..." (M pour "Move to").
H x ligne horizontale ( V y : verticale)
<path d="M 100 100 L 200 200" stroke="black" stroke-width="12"/>
équivaut à
<line x1="200" y1="200" x2="100" y2="100" stroke-width="12" stroke="black" />
Un élément textPath (avec attribut xlink:href="#idPath") peut être imbriqué dans élément text avec en contenu le texte à plaquer sur le tracé. Définir le "path" sur lequel se baser dans un élément "defs" si il ne doit pas être affiché.
Courbes de Bézier
Q x1,y1 x,y
x1,y1 est le point de contrôle (intersection des tangeantes)
T x,y
point de contrôle: reflet du précédent
C x1,y1 x2,y2 x,y
x1,y1 et x2,y2 sont les points de contrôle (tangeante)