Vous allez ici utiliser un éditeur svg wysiwig pour créer votre première figure SVG.
Cliquez ici pour ouvrir svgeditor.
Utilisez les outils proposés par le logiciel pour constituer une figure simple telle que la suivante :
Ensuite, cliquez sur l'icône
:
le texte qui s'affiche est le code qui produit l'image.
Nous allons apprendre dans la suite du cours à produire quelques images en écrivant directement le code.
- wysiwyg ?
- svgeditor
- le code de notre figure
wysiwyg signifie "what you see is what you get". Il s'agit des logiciels dont l'interface permet de construire, de présenter le résultat visuellement tel qu'il est voulu en opposition à une situation où le résultat est obtenu par code.
Par exemple, un traitement de texte tel que Libre Office est wysiwyg, que l'on peut en mettre en opposition avec des systèmes plus puissants mais demandant une phase d'apprentissage comme LaTeX.
Vous trouverez le logiciel svgeditor à cette adresse.
Pour du wysiwyg, vous pouvez aussi vous tourner vers le logiciel très complet inkscape.
Beaucoup d'autres logiciels peuvent produire du code svg. Par exemple le logiciel DIA spécialisé dans la production de diagrammes.
Le code de la figure ci-dessus :
Les cours suivants rentreront dans le détail de ce code, mais vous pouvez déjà repérer quelques clefs :
- La balise
<svg></svg>qui encadre l'ensemble. - La balise
<g></g>qui va servir à regrouper des éléments svg (pour pouvoir par exemple ensuite faire référence à l'ensemble de ces éléments en une seule fois). - La balise
<rect .../>qui sert à définir un rectangle. - La balise
<ellipse .../>qui sert à définir une ellipse. - La balise
<text> ...</text>qui sert à placer du texte dans l'image.