Introduction à SVG Scalable Vector Graphic. Informations ● Plus d'informations ici (draft, tutoriaux, outils... ): –

Présentation au sujet: "Introduction à SVG Scalable Vector Graphic. Informations ● Plus d'informations ici (draft, tutoriaux, outils... ): –"— Transcription de la présentation:

1 Introduction à SVG Scalable Vector Graphic

2 Informations ● Plus d'informations ici (draft, tutoriaux, outils... ): – http://www.w3.org/Graphics/SVG/ http://www.w3.org/Graphics/SVG/

3 Introduction ● Le graphisme sur le web : – Images souvent conséquentes en taille, – Résolution fixe, – Impossible de rajouter des informations, – Difficile d'adapter un environnement de visualisation, – Les données sont statiques et il n'y a pas d'interactions possibles (gifs animés), – Solutions propriétaires.

4 Ce qu'apporte SVG ● Qu'apporte le graphique vectoriel ? – Indépendant de la résolution, – Le client interprète le contenu du document, – Le contenu est recherchable, – Facile à éditer, – Langage XML qui s'intègre facilement à XHTML.

5 Petit historique de SVG ● Working Group du W3C crée en 1998, ● Spécification stable depuis 2000, ● Devenue une recommandation : – SVG 1.0 en septembre 2001, – SVG 1.1 et SVG Mobile en janvier 2003, ● SVG est le HTML du graphisme.

6 Un exemple <path d="M 0.0 112 L 20 124 L 40 129 L 60 126......

7 Un exemple ● svg est l'élement racine, ● g est un tag de groupement, ● path est une des commandes SVG, elle permet de décrire un chemin qui peut être : – Une ligne avec une certaine largeur et couleur, – Une forme à remplir avec un dégradé ou un motif, – Une zone à transformer, animer, filtrer...

8 Le systèle de coordonnées ● Déclaré par les attributs width et height de l'élement racine svg, ● Plusieurs unités sont possibles : – Px, – Pt, – Mm – Cm, – In...

9 Un exemple ● Dessin d'un rectangle contenant un texte. Abracadabra...

10 Un exemple

11 La notion de groupe ● Concept important en graphisme : – Permet d'appliquer des opérations à un ensemble d'objets, – Les groupes peuvent être imbriqués, – Nommés et adressables par URL, – Rend le code SVG plus lisible, –...

12 Génerer du SVG (programmatif) ● Utiliser un template : fichier SVG vide ne définissant qu'une vue et une dimension, ● Se servir de l'API DOM pour charger le template, ● Insérer des objets en utilisant la notion de groupe : – Un groupe peut définir la position de tous les objets qu'il englobe, – L'opération principale pour le placement est la translation.

13 Génerer du SVG (programmatif) ● Faire dessiner la totalité des objets peut être à gérer complexe, ● Méthode plus simple : – Utiliser une librairie d'élements SVG déjà conçus, – Un élement SVG représenté par son fichier est copié/collé dans l'arbre DOM du document SVG qui représentera la scène.

14 Générer du SVG (déclaratif) ● Avec les technologies XSLT/XQuery : – plus simple que via une API, – processus de publication et non du contenu dynamique.

15 Génerer du SVG (déclaratif) ● Exemple : <svg:rectangle x1='10' y1='10' x2='.....

16 Lire du SVG ● Deux possibilités : – Un programme indépendant : ● Batik, ● The Gimp, ● InkScape ●... – Mécanisme de plugin pour les navigateurs : ● Le plus connu est celui d'Adobe : Adobe SVG Viewer ● Le projet Mozilla SVG : http://www.mozilla.org/projects/svg/

17 Ou trouver des élements SVG ? ● Librairies d'élements en ligne : – http://clipart.freedesktop.org/ http://clipart.freedesktop.org/ – http://users.skynet.be/kborrey/klipart/klipart.html http://users.skynet.be/kborrey/klipart/klipart.html ● Pour dessiner : – http://www.sodipodi.com/

18 Ou trouver des élements SVG ? ● Linux !