Page 1

SVG: Scalable Vector Graphics Exemple: Vienne Christine Potier, INF347, 20 juin 2008

Page 2

Christine Potier INF347 - 20-06-08 2 SVG le format SVG prsentation gnrale Objets graphiques Attributs: couleur,... les dfinitions les tranformations gomtriques et 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 Bases de donnes Ajax

Page 3

Christine Potier INF347 - 20-06-08 3 SVG: Scalable Vector Graphics 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 Interaction avec les bases de donnes (php) Affichage dans un navigateur Plugin SVG dAdobe: fonctions prdfinies: zoom, dplacementzoom, dplacement En natif dans FireFox 1.5 (pas toutes les fonctionnalits), Opera 9.0 et + On peut afficher un fichier svg zipp Concurrent:Flash Extension : SVG Mobile en cours de normalisation (SVGTiny)

Page 4

Christine Potier INF347 - 20-06-08 4 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 5

Christine Potier INF347 - 20-06-08 5 Structure dun fichier SVG 1. version de xml 2. Rfrence la DTD, informations sur la structure du document 3.

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

Page 14

Christine Potier INF347 - 20-06-08 14 Un chat avec defs, use et des transformations

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

Christine Potier INF347 - 20-06-08 15 Objets SVG : le texte Affichage de texte :

Christine Potier INF347 - 20-06-08 16 svg imbriqus : exemples

Page 17 ">

Christine Potier INF347 - 20-06-08 17 divers Dfinition 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 Clipping clipPath dfini partir de path, text, line, rect, circle, ellipse, polyline, polygon et use......

Page 18 ----------------------------------------------- ">

Christine Potier INF347 - 20-06-08 18 Exemple de clippath

Page 19

Christine Potier INF347 - 20-06-08 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 ou bien Un chat dans une page html On peut aussi inclure un fichier compress (zipp)">

Christine Potier INF347 - 20-06-08 20 Insrer un document SVG dans une page html Magasin en ligne ou bien Un chat dans une page html On peut aussi inclure un fichier compress (zipp)

Page 21

Christine Potier INF347 - 20-06-08 21 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 22

Christine Potier INF347 - 20-06-08 22 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 23

Christine Potier INF347 - 20-06-08 23 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 24

Christine Potier INF347 - 20-06-08 24 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 25

Christine Potier INF347 - 20-06-08 25 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(... ) 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 26

Christine Potier INF347 - 20-06-08 26 Les fonctions Javascript dans un document SVG Directement dans le fichier svg

Page 27

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

Page 28 Passer la souris sur le cercle pour changer sa taille. ou bien dclaration pure et simple dans le fichier scripts.js ">

Christine Potier INF347 - 20-06-08 28 Un cercle qui change de taille : 2me exemple2me exemple Source du svg : Passer la souris sur le cercle pour changer sa taille. ou bien dclaration pure et simple dans le fichier scripts.js

Page 29

Christine Potier INF347 - 20-06-08 29 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 30

Christine Potier INF347 - 20-06-08 30 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 31 Top (window) document body SVG parent exemple">

Christine Potier INF347 - 20-06-08 31 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 32