SVG: Scalable Vector Graphics

  • View
    16

  • Download
    0

Embed Size (px)

DESCRIPTION

Christine Potier Télécom-ParisTech INF347 – 22 juillet 2009. SVG: Scalable Vector Graphics. Vienne : un exemple d’application. Exemple: Vienne autre exemple. SVG. le format SVG présentation générale système de coordonnées objets graphiques, couleurs, texte, clippath… - PowerPoint PPT Presentation

Text of SVG: Scalable Vector Graphics

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