« SVG avec JavaScript » : différence entre les versions
m (→Prérequis) |
m (→Introduction) |
||
| Ligne 2 : | Ligne 2 : | ||
== Introduction == | == Introduction == | ||
[[SVG]] et [[JavaScript]] partagent une évolution assez similaire, car les deux technologies ont | [[SVG]] et [[JavaScript]] partagent une évolution assez similaire, car les deux technologies ont connu des hauts et des bas depuis leur créations, mais depuis quelques années elles ont été (ré)découvertes. La combinaison entre les deux représente donc un moyen pour améliorer les applications web interactives notamment en ce qui concerne : | ||
* | * Le design d'interfaces utilisateurs "graphiques" (e.g. dessin d'animaux, cartes géographiques, ...) ; | ||
* La création d'animations "stand-alone" ou qui s'intègrent avec le contenu d'une page web ; | * La création d'animations "stand-alone" ou qui s'intègrent avec le contenu d'une page web ; | ||
* La création de représentations graphiques dynamiques (e.g. visualisation de données) ; | |||
* L'adaptation des éléments graphiques à différents tailles et résolutions des écrans grâce à la nature vectorielle des SVG. | * L'adaptation des éléments graphiques à différents tailles et résolutions des écrans grâce à la nature vectorielle des SVG. | ||
Cet article propose | Cet article propose des éléments conceptuels et techniques qui aident l'intégration des deux technologies dans une version plus récente par rapport au [[Tutoriel SVG dynamique avec DOM]]. | ||
=== Prérequis === | === Prérequis === | ||
Version du 14 mars 2018 à 19:27
Cet article est en construction: un auteur est en train de le modifier.
En principe, le ou les auteurs en question devraient bientôt présenter une meilleure version.
Introduction
SVG et JavaScript partagent une évolution assez similaire, car les deux technologies ont connu des hauts et des bas depuis leur créations, mais depuis quelques années elles ont été (ré)découvertes. La combinaison entre les deux représente donc un moyen pour améliorer les applications web interactives notamment en ce qui concerne :
- Le design d'interfaces utilisateurs "graphiques" (e.g. dessin d'animaux, cartes géographiques, ...) ;
- La création d'animations "stand-alone" ou qui s'intègrent avec le contenu d'une page web ;
- La création de représentations graphiques dynamiques (e.g. visualisation de données) ;
- L'adaptation des éléments graphiques à différents tailles et résolutions des écrans grâce à la nature vectorielle des SVG.
Cet article propose des éléments conceptuels et techniques qui aident l'intégration des deux technologies dans une version plus récente par rapport au Tutoriel SVG dynamique avec DOM.
Prérequis
Pour lire cet article, les connaissances suivantes sont nécessaires :
- Comprendre la distinction entre une image vectorielle et une image matricielle ;
- Savoir créer/modifier des pages HTML5 et CSS avec un éditeur de texte (e.g. Brackets, Visual studio code, etc.) ;
- Savoir créer/modifier des fichiers SVG avec un éditeur SVG (e.g. Inkscape, Illustrator, SVGedit, etc.).
Il faut également une connaissance de bases des deux technologies, voir à ce propos surtout les pages :
Ces pages proposent également d'autres liens qui peuvent être utiles à la compréhension du contenu de l'article.
Exemples traités dans l'article
Les exemples proposées et analysées dans cet article sont disponibles dans un repository GitHub :