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.

Décor en SVG

Introduction à SVG
Réaliser avec un script un paysage à partir de composants SVG pris dans une bibliothèque.

Alunissage SVG

SVG: Alunissage et programmation par but

Démonstration de la programmation orientée but appliquée à un module lunaire représenté en SVG.

Simulation de route 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.

Animer un doigt de robot

Animation d'un doigt de robot

Avec les mêmes commandes que sur un montage électronique, l'utilisateur peut plier ou déplier le doigt.

Convertir SVG en JSON

Convertir SVG en JSON

En transformant une image SVG en objet JavaScript on obtient des animations plus rapides... Démonstration incluse.

Titres en SVG

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...