Introduction à SVG Scalable Vector Graphic

Informations ● Plus d'informations ici (draft, tutoriaux, outils... ): –

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.

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.

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.

Un exemple <path d="M L L L

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

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

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

Un exemple

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

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.

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.

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.

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

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 :

Ou trouver des élements SVG ? ● Librairies d'élements en ligne : – – ● Pour dessiner : –

Ou trouver des élements SVG ? ● Linux !