Introduction à SVG
Réaliser avec un script un paysage à partir de composants SVG pris dans une bibliothèque.
Démonstrations SVG
SVG est un format standard pour incorporer des dessins vectoriels et animations dans les pages web ou applications Electron.
SVG est à la fois un format de stockage et d'affichage d'images vectorielles. En fait un fichier SVG s'affiche directement dans un navigateur. Il est plus lent que l'API Canvas, mais peut se combiner avec d'autres éléments d'une page HTML et comme on va le voir, peut aussi s'animer...
Que peut-on faire avec SVG?
Des exemples d'application montrant l'étendue des possibilités de ce format.
SVG vs Canvas
Quel format choisir pour intégrer des graphismes dans une page web?
Démonstrations
Le langage Scriptol est utilisé pour le code source de certains scripts, parce qu'il offre des fonctions indispensables ici. L'orientation but en est un exemple.
Scriptol est compilé en JavaScript ce qui confère la compatibilité avec de nombreuses bibliothèques existantes.
SVG: Alunissage et programmation par but
Démonstration de la programmation orientée but appliquée à un module lunaire représenté en SVG.
SVG: Voiture sur une route et programmation d'évènement
On crée dynamiquement une balise image que l'on déplace dans un décor réalisé en SVG. On programme un évènement qui s'accomplit quand le but est atteint.
Avec les mêmes commandes que sur un montage électronique, l'utilisateur peut plier ou déplier le doigt.
En transformant une image SVG en objet JavaScript on obtient des animations plus rapides... Démonstration incluse.
SVG : Créer de beaux titres avec la balise text.
On verra comment créer des filtres, notamment un filtre d'éclairage et les appliquer à un texte, ainsi que tous les attributs de texte en SVG.
Voir aussi...
- SVG dans Canvas. On affiche des images SVG dans une balise Canvas avec un interpréteur JavaScript minimal.