« 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é
Aucun résumé des modifications |
|||
Ligne 260 :
* pour la question du point 13 : le descriptif est utilisé pour l'audio-description ; il permet aux aveugles et mal-voyants de savoir ce que contient l'image ; il peut aussi servir a catégoriser l'image pour faciliter son classement et permettre de la retrouver facilement avec un moteur de recherche.
}}
==== Conclusion ====▼
* Une image SVG est un fichier texte portant l'extension <code>.svg</code> et qui doit respecter des règles strictes pour permettre au navigateur Web de pouvoir tracer le dessin.▼
* 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><…></code> ; elles sont appelées « éléments ».▼
* Certains éléments consistent en une seule balise, le crochet fermant est alors précédé d'une barre oblique, par exemple : <code><line … /></code>, <code><circle … /></code>, <code><rect … /></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><svg … > … </svg></code>,▼
** les éléments <code><title> … </title></code> et <code><desc> … </desc></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><line … /></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><circle … /></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><rect … /></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''.▼
* Les valeurs des attributs sont écrites entre guillemets, par exemple : <code>x="1"</code>.▼
=== 2. Créer un fichier SVG à l'aide d'un programme développé par soi-même ===
Ligne 291 ⟶ 306 :
{{boîte déroulante|titre=Réponse attendue|contenu=Nous choisissons ici de donner la solution avec le langage [[Scilab]].
Si le fichier SVG contient ''n'' lignes, il faut définir une matrice ''n'' × 1 de chaînes de caractères.
Nous commençons par définir l'en-tête et la fin de fichier chacun dans une variable (matrice d'une colonne de chaînes de caractères).
Ensuite, nous calculons les valeurs de ''x'' et de ''y''. Puis, à l'aide de la fonction <code>string()</code>, nous transformons ces valeurs en chaînes de caractères. Pour simplifier, nous mettons un point par ligne, mais nous nous assurons qu'il n'y a qu'une seule colonne.
<source lang="scilab">
// **************
// * Constantes *
// **************
// Définition du fichier
chemin = "C:\Users\107935\Documents\Documents_personnels\SVG\";
nomDeFichier = "fonctionCarree.svg";
// Domaine de définition
valmin = -5;
valmax = 5;
N = 21;
X = linspace(valmin, valmax, N);
// Structure du fichier SVG
entete =["<?xml version=""1.0"" encoding=""UTF-8"" standalone=""no""?>"
"<?xml-stylesheet href=""z_styleSVG.css"" type=""text/css""?>"
" "
"<!DOCTYPE svg PUBLIC ""-//W3C//DTD SVG 1.1//EN"" "
" ""http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"" "
">"
" "
"<svg"
" width=""600"" height=""600"" version=""1.1"" "
" xmlns=""http://www.w3.org/2000/svg"" "
" xmlns:xlink=""http://www.w3.org/1999/xlink"" "
" viewBox=""-5 0 5 25"" "
" transform=""matrix(1, 0, 0, -1, 0, 600)"" "
">"
" "
" <title> Fonction carré </title>"
" <desc> Courbe représentative d ela fonction carré entre -5 et 5 </desc>"
"/>"];
finDeFichier = ["</svg>"];
// ***********************
// * Programme principal *
// ***********************
// Calcul de la fonction carré
Y = X.^2;
// Génération du code
ligne1 = "<path d=""M "+string(X(1))+" "+string(Y(1));
corps = string([X(2:$)', Y(2:$)']);
ligneFin = " "" />";
matriceFichier = [entete
ligne1
corps(:, 1)+" "+corps(:, 2)
ligneFin
finDeFichier];
// Ecriture du fichier
chdir(chemin)
write (nomDeFichier, matriceFichier)
</source>
}}
▲==== Conclusion ====
▲* Une image SVG est un fichier texte portant l'extension <code>.svg</code> et qui doit respecter des règles strictes pour permettre au navigateur Web de pouvoir tracer le dessin.
▲* 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><…></code> ; elles sont appelées « éléments ».
▲* Certains éléments consistent en une seule balise, le crochet fermant est alors précédé d'une barre oblique, par exemple : <code><line … /></code>, <code><circle … /></code>, <code><rect … /></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><svg … > … </svg></code>,
▲** les éléments <code><title> … </title></code> et <code><desc> … </desc></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><line … /></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><circle … /></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><rect … /></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''.
▲* Les valeurs des attributs sont écrites entre guillemets, par exemple : <code>x="1"</code>.
== Notes ==
| |||