Page 1

SVG: Scalable Vector Graphics Christine Potier INF347 - 23-06-09 1 Christine Potier Tlcom-ParisTech INF347 22 juillet 2009

Page 2

Vienne : un exemple dapplication Exemple: VienneExemple: Vienne autre exempleexemple Christine Potier INF347 - 23-06-09 2

Page 3

3 SVG le format SVG prsentation gnrale systme de coordonnes objets graphiques, couleurs, texte, clippath les tranformations gomtriques les dfinitions lanimation interne Encapsuler du SVG dans du html SVG anim avec javascript SVG et le DOM communication inter-documents Intgrer un fond de carte dans du SVG utilisation dun WMS Gnration dynamique de SVG Interaction avec php et les bases de donnes Ajax

Page 4

Christine Potier INF347 - 23-06-09 4 SVG: quest-ce que cest? Dialecte dXML pour la reprsentation de graphique vectoriel 2D Tracs de base en vectoriel (courbes, lignes, rectangles,) Affichage labor de texte Affichage dimages bitmap Animation du type SMILAnimation Interfaage avec ECMAScript Affichage dans un navigateur En natif dans FireFox 1.5 et + (pas toutes les fonctionnalits), Opera 9.0 et + On peut afficher un fichier svg zipp Dans une application java : API batik (Apache) Editeur : inkscape, Illustrator, Concurrent:Flash Extension : SVG Mobile en cours de normalisation (SVGTiny)

Page 5

Christine Potier INF347 - 23-06-09 5 Code SVG:les rgles de base Rgles de XML : . Toute balise ouverte doit tre ferme balises autofermantes On peut mettre des attributs dans la balise couleur, type de trac, position,... sensible la casse, balises obligatoirement en minuscule utilisation des styles soit dans une feuille de style CSS soit dans le fichier svg imbriqus dfinition dobjets rfrencs rutilisables et use

Page 6 dimension de la fentre svg 300x200 pixels units,... 4.">

Christine Potier INF347 - 23-06-09 6 Structure dun fichier SVG 1. version de xml 2. Rfrence la DTD, informations sur la structure du document 3. dimension de la fentre svg 300x200 pixels units,... 4.

Page 7

Christine Potier INF347 - 23-06-09 7 Systme de coordonnes En pixels, en pouces (in), en cm, en points (pt), en %... width="200" ou width="10in" ou width="12cm" pt : 72 points par pouce % : un pourcentage de la fentre Taille et position de la fentre (viewport) Attribut : viewBox permet de dfinir les coordonnes utilisateur 0 x utilisateur 3000, -3000 y utilisateur -1000

Page 8

Christine Potier INF347 - 23-06-09 8 x 100 Systme de coordonnes : un exemple Le point (0,0) sera en dehors de la fentre donc pas affich Redfinition du viewport: svg imbriqus P 2 =(3050,400) 503050 400 y 200 pixels P 1 =(50,100) 300 pixels

Page 9 Chat Un chat">

Premier exemple : chat0.svg Christine Potier INF347 - 23-06-09 9 Chat Un chat

Page 10

Christine Potier INF347 - 23-06-09 10 Objets graphiques : premiers exemples line : polyline et polygone : rectangle: coins arrondis rx="5" ry="3" cercle : ellipse : chemin M (ou m) moveto coordoones absolues (L) ou relatives (l)

Page 11

Christine Potier INF347 - 23-06-09 11 Objet graphique Path chemin : moveto et lineto coordoones absolues (L) ou relatives ( l ) (point prcdent) Bzier quadratiquequadratique M x 0 y 0 Q x 1 y 1 x 2 y 2 ou q en relatif par rapport P 0 Bzier cubique cubique M x 0 y 0 C x 1 y 1 x 2 y 2 x 3 y 3 ou c en relatif Courbe composite M x 0 y 0 C... C... Q... L... ou M x 0 y 0 c... c... q... l...

Page 12

Christine Potier INF347 - 23-06-09 12 Objets graphiques: attributs Attributs de laffichage : paisseur du trait : stroke-width couleur du trait : stroke couleur de remplissage: fill opacit: stroke-opacity stroke="#000000" stroke-width="2px" fill="none" couleur : rgb(r,v,b) 0 r,v,b 255 couleurscouleurs en Hexadcimal ou prdfinies, dgrads,...

Page 13 dgraddgrad radial cx="100" cy="100" r="100" fx="100" fy="0"> cx="100" cy="100" r="100" fx="200" fy="100">">

Christine Potier INF347 - 23-06-09 13 Dgrads de couleur dgraddgrad linaire dgraddgrad radial cx="100" cy="100" r="100" fx="100" fy="0"> cx="100" cy="100" r="100" fx="200" fy="100">

Page 14

Christine Potier INF347 - 23-06-09 14 Transformations gomtriques attribut transform Translation: translate(a,b) Rotation autour de lorigine rotate( ), en degr ou rotation autour dun point rotate(, x, y) homotthie scale(a) ou scale(a,b) dformation skewX( ) et skewY( ): utilisation skewX( ) utilisation Skewed by 30 degrees text On empile les transformations transform="translate(0,10)scale(3)translate(20,5)" 1. translate(20,5) 2. scale(3) 3. translate(0,10)

Page 15 pas directement utilis, mais pouvant tre rfrenc on peut dfinir un ensemble dobjets: ">

Christine Potier INF347 - 23-06-09 15 Balise dfinition dobjet identifi par son nom pas directement utilis, mais pouvant tre rfrenc on peut dfinir un ensemble dobjets:

Page 16 SVG orientation glyph-orientation-vertical ="0" Trac le long dun chemin : textPath">

Christine Potier INF347 - 23-06-09 16 Objets SVG : le texte Affichage de texte :

Christine Potier INF347 - 23-06-09 18 Exemple de clippath

Page 19

Christine Potier INF347 - 23-06-09 19 Animation driv de SMIL 2.0 : SVG langage hte balises danimation change les attributs scalaires base sur le temps et les vnements dplace un objet le long dun chemin transformations animes (modification de transform) Temporisation : choix du dbut, de la dure, du nombre de cycle, de la fin,.. exemple danimation: couleur, skewY, clipping,couleurskewYclipping

Page 20

Christine Potier INF347 - 23-06-09 20 SVG et le monde extrieur! le format SVG prsentation gnrale systme de coordonnes objets graphiques, couleurs, texte, clippath les tranformations gomtriques les dfinitions lanimation interne Encapsuler du SVG dans du html SVG anim avec javascript SVG et le DOM communication inter-documents Intgrer un fond de carte dans du SVG utilisation dun WMS Gnration dynamique de SVG Interaction avec php et les bases de donnes Ajax

Page 21 ou bien Un chat dans une page html On peut aussi inclure un fichier compress (zipp)">

Christine Potier INF347 - 23-06-09 21 Insrer un document SVG dans une page html Un chat! ou bien Un chat dans une page html On peut aussi inclure un fichier compress (zipp)

Page 22

Christine Potier INF347 - 23-06-09 22 Interaction : les scripts Utilisation de scripts pour rendre interactifs les graphiques SVG Langage ECMAScript (the European Computer Manufacturer's Association) : prend modle sur Java, mme syntaxe Orient objet, interprt versions diffrentes selon les navigateurs ( Javascript, Jscript) Les objets rpondent des vnements des vnements associs au statut d'un objet : onload des vnements lis la souris Cliquer : onclick, onmousedown, onmouseup Bouger la souris : onmouseover, onmouseout, onmousemove des vnements non standardiss associs des touches du clavier : onkeydown, onkeyup. Pour savoir o sest produit lvnement evt.target

Page 23

Christine Potier INF347 - 23-06-09 23 SVG et le DOM L'objet svgDocument se rfre au contenu affich dans la fentre du navigateur. Il se trouve sous l'objet window (et ventuellement sous lobjet document ). L'objet svgDocument a toutes les proprits et les mthodes de dom::Document, events::DocumentEvent Les lments d'un document SVG sont des sous-objets de l'objet svgDocument La valeur de l'attribut 'Id' doit tre unique dans tout le document XML et obir aux rgles sur les noms de variables de ECMAScript. Exmple, pour accder un lment par son nom : svgDocument.getElementById("Id") Tout noeud - et avec lui tout lment - peut tre supprim par son parent. Un attribut ne peut tre supprim que par llment auquel il appartient.

Page 24

Christine Potier INF347 - 23-06-09 24 Arbre SVG et le DOM Le DOM permet daccder aux lments et leurs attributs Laborescence du DOM element : chaque lment est aussi un noeud svgDocument : racine de larbre Interface commune aux objets SVG node: Name (nom de la balise) Value Type parent/child (au sens des nuds)

Page 25

Christine Potier INF347 - 23-06-09 25 Arbre SVG => DOM __ |__ __ __ // cabine __ // caisse verte __ // we start here ! __ __ // bobine rouge __ // bobine bleue __ __ // grande lettre __ // caisse bleue Pour atteindre la racine du document var doc = svgDocument; (evt.target.ownerDocument) Pour accder llment train var train = doc.getElementById("train"); ou si on part de wagon1 var wagon1 // le noeud wagon1 est dj un objet var train = wagon1.parentNode; Pour atteindre les composants de wagon1 (tableau) var composants = wagon1.childNodes; les objets peuvent rpondre des vnements evt

Page 26

Christine Potier INF347 - 23-06-09 26 Les actions sur les objets SVG: quelques fonctions On peut : Modifier les attributs des objets (taille, couleur, opacit, position, visibilit,...) getAttribute("nom") setAttribute("nom",valeur) createAttribute(): cre un nouvel attribut pour l'arborescence Crer ou dtruire des objets : createElement(): cre un nouvel lment pour l'arborescence createTextNode("un texte") : demande au document de crer un nouvel lment de texte dont le contenu est la chane transmise en argument. Modifier l'arborescence : replaceChild(nouvelElement,ancienElement) : va remplacer un nud du document XML par un autre obj.firstChild : slectionne dans l'arbre XML le premier fils de l'objet obj appendChild(... )

Page 27

Christine Potier INF347 - 23-06-09 27 Les fonctions Javascript dans un document SVG Directement dans le fichier svg

Page 28

Christine Potier INF347 - 23-06-09 28 Fonctions Javascript : Exemple 1Exemple 1 Un rectangle qui change de couleur au chargement (vert => bleu) evt : objet vnement

Page 29

Christine Potier INF347 - 23-06-09 29 Un cercle qui change de taille : 2me exemple2me exemple

Page 30

Christine Potier INF347 - 23-06-09 30 Manipulation du SVG: 3me exemple3me exemple.. function transformeTShirt() { obj = svgDocument.getElementById("tshirt"); obj.setAttribute("transform", "scale(" + facteurEchelle[choixEchelle] + ")"); obj.setAttribute("stroke-width", 1.0/facteurEchelle[choixEchelle] ); } function positionneEchelle(n) { var obj = svgDocument.getElementById("echelle" + choixEchelle); obj.setAttribute("fill", "white"); choixEchelle = n; var obj = svgDocument.getElementById("echelle" + choixEchelle); obj.setAttribute("fill", "#ffc"); transformeTShirt(); } Dans le svg.. S..

Page 31

Christine Potier INF347 - 23-06-09 31 Insrer un fond de carte Balise On peut inclure tout type dimage: gif, png, jpeg, exemple On peut utiliser un WMS (Web Map Serveur) On obtient une carte (image raster) en prcisant Lurl du serveur xlink:href="http://www.geosignal.org/cgi-bin/wmsmap? Le systme de coordonnes SRS=EPSG:27582 La zone que lon souhaite (rectangle) dans ce systme de coordonnes BBOX=40000,1600000,1150000,2700000 La rsolution LAYERS=100k Le type du fichier FORMAT=image/gif xlink:href="http://www.geosignal.org/cgi-bin/wmsmap?SRS=EPSG:27582 &BBOX=40000,1600000,1150000,2700000&LAYERS=100kversion=1.1.1&request=GetMap &service=WMS&FORMAT=image/gif"

Page 32

Christine Potier INF347 - 23-06-09 32 Gnration dynamique de scripts svg Serveur MySQL ou PostGreSQL ou Navigateur Serveur Apache requte rsultat Excution du script php http://www.enst.fr/carte.php url: script php source SVG module php

Page 33

Christine Potier INF347 - 23-06-09 33 Interaction avec php : 4e exemple (1)4e exemple (1) Directement l'appel du script php par affichage de l'url http://www.... /carte.php?dep=51 Par insertion de l'appel dans une page html 4e exemple insr dans une page Source de la page de l'exemple avec balise object d'inclusion du svgl'exemple avec balise object d'inclusion du svg une application http://www.infres.enst.fr/~potier/Projets/clic-france/ http://www.infres.enst.fr/~potier/Projets/clic-france/ Remarque : on peut gnr du code svg zipp, la dcompression se fait sur le client au moment de l'affichage.

Page 34

Christine Potier INF347 - 23-06-09 34 SVG et Ajax BD - GIS Back-office Scripts php gnration de XML Au chargement Requte Clic souris Front-office : SVG + Ajax Au clic XML

Page 35

Christine Potier INF347 - 23-06-09 35 Communication inter-document HTML vers SVG Dans le fichier html function ChangeStrokeColor(){ window.changeStrokeColor("blue"); } et Dans le fichier SVG top.changeStrokeColor = ChangeStrokeColor; // pour que ce soit accessible depuis lHTML top.changeFillColor = ChangeFillColor; // et par des bookmarklets (et aussi quand SVG nest pas inclus) function ChangeStrokeColor(color) { SVGDocument.getElementById("colorCircle").setAttribute("stroke", color); } function ChangeFillColor(color) { SVGDocument.getElementById("colorCircle").setAttribute("fill", color); } Top (window) document body SVG voir le rsultat SVG html

Page 36 Top (window) document body SVG parent exemple">

Christine Potier INF347 - 23-06-09 36 Communication SVG vers HTML Dans le HTML function ChangeColor(newColor) { document.bgColor=newColor; } Dans le SVG function talkToHtml() { top.ChangeColor("blue"); } Top (window) document body SVG parent exemple

Page 37