svg: scalable vector graphics christine potier inf347 - 23-06-09 1 christine potier...

Download SVG: Scalable Vector Graphics Christine Potier INF347 - 23-06-09 1 Christine Potier Télécom-ParisTech INF347 – 22 juillet 2009

Post on 03-Apr-2015

105 views

Category:

Documents

1 download

Embed Size (px)

TRANSCRIPT

  • 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 appe

Recommended

View more >