« Découvrir le SVG/Le SVG pour l'enseignement des mathématiques et de la programmation » : différence entre les versions

Contenu supprimé Contenu ajouté
→‎Conclusion : attributs
Ligne 257 :
* Le fichier a un en-tête normalisé qui permet au navigateur Web de savoir ce que contient le fichier ; l'en-tête indique les standards suivis (en particulier le standard XML et le standard SVG) ansi que des informations sur l'image (comme ses dimensions, largeur et hauteur, son titre et un descriptif).
* Les instructions SVG sont entre crochets <code>&lt;…&gt;</code> ; elles sont appelées « éléments ».
* Certains éléments consistent en une seule balise, le crochet fermant est doncalors précédé d'une barre oblique, par exemple : <code>&lt;line … /&gt;</code>, <code>&lt;circle … /&gt;</code>, <code>&lt;rect … /&gt;</code>.
* D'autres éléments sont sont des « conteneurs » : ils contiennent d'autres éléments et sont faits de deux balises, une balise ouvrante et une balise fermante, ; c'est alors la balise fermante qui contient la barre oblique par exemple :
** l'élément <code>svg</code>, qui contient toutes les instructions de tracé : <code>&lt;svg … &gt; … &lt;/svg&gt;</code>,
** les éléments <code>&lt;title&gt; … &lt;/title&gt;</code> et <code>&lt;desc&gt; … &lt;/desc&gt;</code> qui contiennent du texte.
* Les éléments ont en général des paramètres, appelés « attributs », qui déterminent leur caractéristiques (position dans l'image, taille), par exemple :
** l'élément <code>&lt;line … /&gt;</code> a pour attributs <code>x1</code>, <code>y1</code>, <code>x2</code> et <code>y2</code> qui déterminent les extrémités du segment : [(''x''<sub>1</sub> ; ''y''<sub>1</sub>) ; (''x''<sub>2</sub> ; ''y''<sub>2</sub>)],
** l'élément <code>&lt;circle … /&gt;</code> a pour attributs <code>cx</code>, <code>cy</code> et <code>r</code> qui déterminent la position de son centre (''c<sub>x</sub>'' ; ''c<sub>y</sub>'') et son rayon ''r'',
** l'élément <code>&lt;rect … /&gt;</code> a pour attributs <code>x</code>, <code>y</code>, <code>width</code> et <code>height</code> qui déterminent la position de son sommet en bas à gauche (''x'' ; ''y'') et ses dimensions ''width'' × ''height''.
 
== Notes ==