« 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é
→‎1. Découvrir le SVG et premier exemple : début activité 2 ; mise en sous-sections
Ligne 156 :
=== 1. Découvrir le SVG et premier exemple ===
 
'''==== Introduction''' ====
 
Le terme SVG signifie en anglais ''scalable vector graphics'' c'est-à-dire « graphismes vectoriels dont on peut modifier l'échelle ». Ce sont des dessins que l'on peut agrandir (zoomer) sans que cela ne fasse apparaître de « grains », de pixels.
Ligne 166 :
On peut créer un dessin au format SVG avec des logiciels de dessin utilisant la souris, comme par exemple Inkscape. Mais il est aussi possible de créer des dessins en tapant directement les instructions à l'aide d'un éditeur de texte.
 
'''==== Objectif''' ====
 
À la fin de la séance, vous saurez créer une image SVG simple et l'afficher.
 
'''==== Activité 1 : créer une image SVG avec un logiciel graphique et l'afficher dans un explorateur Web''' ====
 
# Ouvrez le logiciel Inkscape [[fichier:Inkscape Logo.svg|26px|logo Inkscape]].
Ligne 198 :
<center>'''Fin de l'activité'''<br />***<br />**<br/>*
</center>
 
==== Activité 2 : Créer une image SVG avec un éditeur de texte ====
 
[[Fichier:Modele vide pour document SVG.svg|vignette|upright=2.5|Squelette d'un fichier SVG.]]
 
Une image SVG est un fichier de texte. L'image ci-contre présente le squelette d'un fichier SVG. Il est composé de trois pavés :
# Un pavé d'en-tête qui indique au navigateur Web qu'il s'agit d'une image SVG et qui lui indique des informations complémentaires permettant l'affichage correct de l'image.
# Un pavé contenant les instructions servant à tracer le dessin. Pour l'instant, ce pavé est vide.
# Un pavé de fin de fichier.
Nous pouvons déjà remarquer trois choses :
* les instructions sont mises entre crochets <code>&lt;…&gt;</code> ;
* le pavé (pour l'instant vide) contenant les instructions de dessin est compris entre une balise d'ouverture <code style="color:#0000FF">&lt;svg …&gt;</code> et une balise de fermeture <code style="color:#0000FF">&lt;/svg&gt;</code> ;
* le fichier contient des commentaires, c'est-à-dire du texte facilitant la lecture par un humain mais n'ayant aucune action sur le dessin ; ces commentaires sont inclus dans des balises <code style="color:#008800">&lt;!--…--&gt;</code>.
 
== Notes ==