« 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 202 :
[[Fichier:Modele vide pour document SVG.svg|vignette|upright=2.5|Squelette d'un fichier SVG.]]
'''Présentation 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 :
Ligne 211 ⟶ 213 :
* le pavé (pour l'instant vide) contenant les instructions de dessin est compris entre une balise d'ouverture <code style="color:#0000FF"><svg …></code> et une balise de fermeture <code style="color:#0000FF"></svg></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"><!--…--></code>.
Le fichier présenté ci-contre est notre modèle. Les pavés d'en-tête et de fin de fichier seront toujours les mêmes, nous n'y toucherons sauf pour donner un titre et mettre une description.
'''À faire :'''
# Ouvrez l'éditeur de texte.
#: ''Détailler la procédure selon le système d'exploitation et l'installation, par exemple : double-cliquez sur l'icône Notepad++ sur le bureau.''
# Ouvrez le fichier <code>00_modele.svg</code> :
## Cliquez sur le bouton « Ouvrir » [[Fichier:Gnome-document-open.svg|26px]] ; cela ouvre la boîte de dialogue « Ouvrir ».
## Dans la liste des fichiers, cliquez sur <code>00_modele.svg</code>.
## Cliquez sur le bouton « Ouvrir ».
# Enregistrez le fichier sous un autre nom :
## Cliquez sur le menu « Fichier » puis dans la liste déroulante, cliquez sur « Enregistrer sous ».
## Dans la zone de texte « Nom du fichier », tapez « <code>premierExemple.svg</code> ».
## Cliquez sur « Enregistrer ».
# Entre les balises <code style="color:#0000FF"><title>…</title></code>, supprimez le commentaire et écrivez à la place le titre : « <code>Premier
exemple de fichier SVG</code> ».
# Entre les balises <code style="color:#0000FF"><desc>…</desc></code>, supprimez le commentaire et écrivez à la place la description : « <code>Une image simple</code> ».
== Notes ==
| |||