« 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é
Ligne 239 :
# Enregistrez à nouveau le fichier.
# Cliquez dans la fenêtre du navigateur Web et appuyez sur la touche « F5 » du clavier. Commentez ce que vous voyez.
# Selon vous, à quoi sert le descriptif placé entre les balises <code style="color:#0000FF"><desc>…</desc></code> ?
{{boîte déroulante|titre=Réponses attendues|contenu=Les conclusions attendues sont :
Ligne 247 ⟶ 248 :
* pour la question du point 11 :
** la touche « F5 » provoque le rafraîchissement de l'image et fait donc apparaître les modifications faites au fichier <code>.svg</code>,
** la commande <code><rect…></code> a provoqué le tracé d'un rectangle dont le sommet en bas a gauche a pour coordonnées (2 ; 6) et qui a une largeur de 5 et une
* pour la question du point 12 : le descriptif est utilisé pour l'audio-description ; il permet au aveugle de savoir ce que contient l'image ; il peut aussi servir a catégoriser l'image pour faciliter son classement et pouvoir 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 donc 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, 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.
== Notes ==
| |||