SVG: Scalable Vector GraphicsChristine Potier INF347 - 23-06-09*Christine PotierTlcom-ParisTechINF347 22 juillet 2009

Vienne : un exemple dapplicationExemple: Vienne autre exempleChristine Potier INF347 - 23-06-09*

Christine Potier INF347 - 23-06-09*SVGle format SVG prsentation gnralesystme de coordonnesobjets graphiques, couleurs, texte, clippathles tranformations gomtriques les dfinitionslanimation interneEncapsuler du SVG dans du htmlSVG anim avec javascriptSVG et le DOMcommunication inter-documentsIntgrer un fond de carte dans du SVGutilisation dun WMSGnration dynamique de SVGInteraction avec php et les bases de donnesAjax

Christine Potier INF347 - 23-06-09*SVG: quest-ce que cest?Dialecte dXML pour la reprsentation de graphique vectoriel 2DTracs de base en vectoriel (courbes, lignes, rectangles,)Affichage labor de texteAffichage dimages bitmapAnimation du type SMILInterfaage avec ECMAScriptAffichage dans un navigateurEn natif dans FireFox 1.5 et + (pas toutes les fonctionnalits), Opera 9.0 et +On peut afficher un fichier svg zippDans une application java : API batik (Apache)Editeur : inkscape, Illustrator, Concurrent:FlashExtension : SVG Mobile en cours de normalisation (SVGTiny)

Christine Potier INF347 - 23-06-09*Code SVG:les rgles de baseRgles de XML : .Toute balise ouverte doit tre fermebalises autofermantes On peut mettre des attributs dans la balise

couleur, type de trac, position,...sensible la casse, balises obligatoirement en minusculeutilisation des styles soit dans une feuille de style CSS soit dans le fichiersvg imbriqus

dfinition dobjets rfrencs rutilisables et use

Christine Potier INF347 - 23-06-09*Structure dun fichier SVG

version de xml

Rfrence la DTD, informations sur la structure du document

dimension de la fentre svg 300x200 pixelsunits,...

Christine Potier INF347 - 23-06-09*Systme de coordonnesEn 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 : viewBoxpermet de dfinir les coordonnes utilisateur

0 xutilisateur 3000, -3000 yutilisateur -1000

Christine Potier INF347 - 23-06-09*x100Systme de coordonnes : un exemple

Le point (0,0) sera en dehors de la fentre donc pas affich

Redfinition du viewport: svg imbriqus

P2=(3050,400)503050400y200 pixelsP1=(50,100)300 pixels

Premier exemple : chat0.svgChristine Potier INF347 - 23-06-09*

Chat

Un chat

Christine Potier INF347 - 23-06-09*Objets graphiques : premiers exemplesline : polyline et polygone : rectangle:

coins arrondis rx="5" ry="3" cercle : ellipse :

chemin

M (ou m) moveto coordoones absolues (L) ou relatives (l)

Christine Potier INF347 - 23-06-09*Objet graphique Pathchemin :

moveto et lineto

coordoones absolues (L) ou relatives (l) (point prcdent)

Bzier quadratique M x0 y0 Q x1 y1 x2 y2 ou q en relatif par rapport P0

Bzier cubiqueM x0 y0 C x1 y1 x2 y2 x3 y3 ou c en relatif

Courbe compositeM x0 y0 C ... C ... Q... L ... ouM x0 y0 c ... c ... q... l ...

Christine Potier INF347 - 23-06-09*Objets graphiques: attributsAttributs de laffichage : paisseur du trait : stroke-widthcouleur du trait : strokecouleur de remplissage: fill opacit: stroke-opacitystroke="#000000" stroke-width="2px" fill="none"couleur : rgb(r,v,b) 0 r,v,b 255couleurs en Hexadcimal ou prdfinies, dgrads,...

Christine Potier INF347 - 23-06-09*Dgrads de couleurdgrad linaire

dgrad radialcx="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*Transformations gomtriquesattribut transformTranslation: translate(a,b)Rotation autour de lorigine rotate(a), a en degrou rotation autour dun point rotate(a, x, y)homotthie scale(a) ou scale(a,b)dformation skewX(a) et skewY(b):utilisation

Skewed by 30 degrees text

On empile les transformationstransform="translate(0,10)scale(3)translate(20,5)"translate(20,5)scale(3)translate(0,10)

Christine Potier INF347 - 23-06-09*Balise dfinition dobjet identifi par son nom

pas directement utilis, mais pouvant tre rfrencon peut dfinir un ensemble dobjets:

Christine Potier INF347 - 23-06-09*Objets SVG : le texteAffichage de texte :

Christine Potier INF347 - 23-06-09*diversDfinition dune couche graphique (noeud XML) on regroupe un ensemble dobjets SVG

au niveau des noeuds, on peut appliquer :suppression, changement de style, transformation gomtrique,..priorit aux redfinitions dans les sous-noeuds

ClippingclipPath dfini partir de path, text, line, rect, circle, ellipse, polyline, polygon et use.

.....

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

Christine Potier INF347 - 23-06-09*Animationdriv de SMIL 2.0 : SVG langage htebalises danimation change les attributs scalairesbase 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 ,

Christine Potier INF347 - 23-06-09*SVG et le monde extrieur!le format SVG prsentation gnralesystme de coordonnesobjets graphiques, couleurs, texte, clippathles tranformations gomtriques les dfinitionslanimation interneEncapsuler du SVG dans du htmlSVG anim avec javascriptSVG et le DOMcommunication inter-documentsIntgrer un fond de carte dans du SVGutilisation dun WMSGnration dynamique de SVGInteraction avec php et les bases de donnesAjax

Christine Potier INF347 - 23-06-09*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)

Christine Potier INF347 - 23-06-09*Interaction : les scriptsUtilisation de scripts pour rendre interactifs les graphiques SVG Langage ECMAScript (the European Computer Manufacturer's Association) :prend modle sur Java, mme syntaxeOrient objet, interprtversions diffrentes selon les navigateurs (Javascript, Jscript)

Les objets rpondent des vnements des vnements associs au statut d'un objet : onload des vnements lis la sourisCliquer : 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 lvnementevt.target

Christine Potier INF347 - 23-06-09*SVG et le DOML'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.

Christine Potier INF347 - 23-06-09*Arbre SVG et le DOMLe DOM permet daccder aux lments et leurs attributsLaborescence du DOM

element: chaque lment est aussi un noeudsvgDocument: racine de larbreInterface commune aux objets SVGnode: Name (nom de la balise) Value Typeparent/child (au sens des nuds)

Christine Potier INF347 - 23-06-09*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

Christine Potier INF347 - 23-06-09*Les actions sur les objets SVG: quelques fonctionsOn 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'arborescencecreateTextNode("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 autreobj.firstChild : slectionne dans l'arbre XML le premier fils de l'objet obj

appendChild(... )

Christine Potier INF347 - 23-06-09* Les fonctions Javascript dans un document SVGDirectement dans le fichier svg

.. texte SVG

ou bien dans un fichier externe scripts.js

.. texte SVG ...

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

evt : objet vnement

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

Christine Potier INF347 - 23-06-09*Manipulation du SVG: 3me 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

..

Christine Potier INF347 - 23-06-09*Insrer un fond de carteBalise On peut inclure tout type dimage: gif, png, jpeg,

exempleOn peut utiliser un WMS (Web Map Serveur)On obtient une carte (image raster) en prcisantLurl du serveur xlink:href="http://www.geosignal.org/cgi-bin/wmsmap?Le systme de coordonnes SRS=EPSG:27582La zone que lon souhaite (rectangle) dans ce systme de coordonnes BBOX=40000,1600000,1150000,2700000La rsolution LAYERS=100kLe 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"

Christine Potier INF347 - 23-06-09*Gnration dynamique de scripts svgServeur MySQL ou PostGreSQL ouNavigateurServeur ApacheExcution du script phphttp://www.enst.fr/carte.phpmodule php

Christine Potier INF347 - 23-06-09* Interaction avec php : 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 pageSource de la page de l'exemple avec balise object d'inclusion du svg une application 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.

Christine Potier INF347 - 23-06-09*SVG et AjaxBD - GISBack-officeFront-office : SVG + Ajax

Christine Potier INF347 - 23-06-09*Communication inter-documentHTML vers SVG

Dans le fichier htmlfunction ChangeStrokeColor(){ window.changeStrokeColor("blue");}et

Dans le fichier SVGtop.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); }voir le rsultat

Christine Potier INF347 - 23-06-09*Communication SVG vers HTMLDans le HTML function ChangeColor(newColor) {document.bgColor=newColor; }

Dans le SVG function talkToHtml() {top.ChangeColor("blue");}

exemple

Christine Potier INF347 - 23-06-09*Communication SVG vers HTML(2)Dans le HTML

Christine Potier INF347 - 23-06-09*Communication SVG vers SVGDans le fichier HTML et la suite Dans svg-control.svg function TalkToSVG() { var body = top.document.body; body.setAttribute("bgColor","aaaa00"); var targetSVG = top.document.embeds["targetSVG"].getSVGDocument(); var targetElement = targetSVG.getElementById("colorRect"); targetElement.setAttribute("fill", "cyan"); } clickDans svg-target.svg function TalkToSVG() { var targetSVG = top.document.embeds["controlSVG"].getSVGDocument(); var targetElement = targetSVG.getElementById("cercle"); targetElement.setAttribute("fill", "magenta");} exemple

Christine Potier INF347 - 23-06-09*Coordonnes: Comment savoir o on est?Changements de coordonnes dfinis parles viewBox et les viewPort des svg imbriqusles transformations gomtriques successivesPile des transformationsA chaque lment est associ une matrice de transformation

Systme de coordonnesUn point (x,y) reprsent sous la forme dun vecteur:

La matrice de transformation est

o correspond au changement dchelle, rotation, dformation et correspond la translation

On obtient

Christine Potier INF347 - 23-06-09*Coordonnes: Comment savoir o on est?

Coordonnes cran ou coordonnes utilisateur?Position du curseur:(evt.clientX, evt.clientY) en coordonnes cran

Pour obtenir le point (x,y) dans le systme utilisateur:on rcupre la matrice de transformation mat = [svgElement].getCTM();on inverse la matrice mat = mat.inverse();

on calcule les coordonnes utilisateur

exemple :

Christine Potier INF347 - 23-06-09*Coordonnes: On est-on (2)? mouse position (?, ?)screenmouse position (?, ?) user (50,50) ..

Christine Potier INF347 - 23-06-09*Une application complte

http://www.infres.enst.fr/~potier/Projets/clic-france/

en Ajax, connexion un fichier xml ou un script php

*****************************