La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

SVG: Scalable Vector Graphics Christine Potier -- MS CPM -- 7 avril 2010 1 Christine Potier Télécom-ParisTech CPM – 7 avril 2010.

Présentations similaires


Présentation au sujet: "SVG: Scalable Vector Graphics Christine Potier -- MS CPM -- 7 avril 2010 1 Christine Potier Télécom-ParisTech CPM – 7 avril 2010."— Transcription de la présentation:

1 SVG: Scalable Vector Graphics Christine Potier -- MS CPM -- 7 avril 2010 1 Christine Potier Télécom-ParisTech CPM – 7 avril 2010

2 Exemples divers http://www.infres.enst.fr/~potier/CoursSVG/ –la carte du 13medu 13me –une belle voiture!voiture –le tigretigre –interaction avec la souris: un cercle qui grossitcercle qui grossit –autre interaction: les yeux trop curieux!yeux trop curieux! –des photos en vracdes photos en vrac –un beau ballon qui flotte au ventballon qui flotte –déformation d'une photo en fonction de la position de la sourisphoto en fonction –des cercles animésdes cercles animés –4 yeux qui louchent!qui louchent –http://srufaculty.sru.edu/david.dailey/svg/SVGOpen2008/edges_of_plausibility.htm –Feu dartifice sur Zurich (pas avec Firefox) http://www.carto.net/neumann/svg/svgfireworks.html http://svg-wow.org/ exemple de carto : Vienne Vienne Christine Potier -- MS CPM -- 7 avril 2010 2

3 Autre exemple: des photos géo-référencéesphotos Christine Potier -- MS CPM -- 7 avril 2010 3

4 4 SVG le langage SVG présentation générale système de coordonnées objets graphiques, couleurs, texte, clippath… les tranformations géométriques les « définitions » lanimation interne Encapsuler du SVG dans du html SVG animé avec javascript Intégrer un fond de carte dans du SVG Génération dynamique de SVG Interaction avec php et les bases de données Ajax

5 Christine Potier -- MS CPM -- 7 avril 2010 5 SVG: quest-ce que cest? Dialecte dXML pour la représentation de graphique vectoriel 2D Tracés de base en vectoriel (courbes, lignes, rectangles,…) Affichage élaboré de texte Affichage dimages bitmap Animation du type SMILAnimation Interfaçage avec ECMAScript (javascript) Affichage dans un navigateur FireFox 1.5+ (pas toutes les fonctionnalités), Opera 9.0+, Safari, Chrome, bientôt IE9! On peut afficher un fichier svg zippé Editeur : inkscape, Illustrator, … Concurrent:Flash SVG pour mobiles (actuellement SVGTiny 1.2)

6 Implémentations http://www.codedread.com/svg-support.php Christine Potier -- MS CPM -- 7 avril 2010 6

7 7 Structure dun fichier SVG 1. version de xml 2. dimension de la fenêtre svg 300x200 pixels unités,... 3. 7 Structure dun fichier SVG 1.version de xml 2.

8 Christine Potier -- MS CPM -- 7 avril 2010 8 Code SVG:les règles de base Règles de XML : …. Toute balise ouverte doit être fermée –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 imbriqués définition dobjets référencés réutilisables et use

9 Christine Potier -- MS CPM -- 7 avril 2010 9 Système de coordonnées 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 fenêtre Taille et position de la fenêtre (viewport) Attribut : viewBox permet de définir les coordonnées utilisateur viewBox="xmin ymin ecart_x ecart_y" 0 x utilisateur 3000, -3000 y utilisateur -1000

10 Christine Potier -- MS CPM -- 7 avril 2010 10 x 100 Système de coordonnées : un exemple Le point (0,0) sera en dehors de la fenêtre donc pas affiché Redéfinition du viewport: svg imbriqués P 2 =(3050,400) 503050 400 y 200 pixels P 1 =(50,100) 300 pixels

11 Premier exemple : chat0.svg Christine Potier -- MS CPM -- 7 avril 2010 11 Chat Un chat Premier exemple : chat0.svg Christine Potier -- MS CPM -- 7 avril 2010 11 <svg version= 1.1 baseProfile= full xmlns=http://www.w3.org/2000/svghttp://www.w3.org/2000/svg xmlns:xlink= http://www.w3.org/1999/xlink xmlns:ev= http://www.w3.org/2001/xml-events width= 160 height= 240 > Chat Un chat

12 Christine Potier -- MS CPM -- 7 avril 2010 12 Objets graphiques : premiers exemples line : polyline et polygone : rectangle: coins arrondis rx="5" ry="3" cercle : ellipse : chemin M (ou m) moveto coordoonées absolues (L) ou relatives (l) ou avec des courbes de Bézier (exemple Bézier cubique) cubique

13 Christine Potier -- MS CPM -- 7 avril 2010 13 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 en hexadécimal (#FF369A) ou prédéfinies, dégradés,...

14 Christine Potier -- MS CPM -- 7 avril 2010 14 Dégradés de couleur dégradé linéaire dégradé radial cx="100" cy="100" r="100" fx="100" fy="0"> cx="100" cy="100" r="100" fx="200" fy="100">

15 Christine Potier -- MS CPM -- 7 avril 2010 15 Transformations géométriques attribut transform Translation: translate(a,b) Rotation autour de lorigine rotate( ), en degré ou rotation autour dun point rotate(, x, y) homotéthie scale(a) ou scale(a,b) déformation 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)

16 Christine Potier -- MS CPM -- 7 avril 2010 16 Balise définition dobjet identifié par son nom pas directement utilisé, mais pouvant être référencé Utilisation: pour tracer comme chemin pour écrire un texte texte à afficher pour répéter :

17 Christine Potier -- MS CPM -- 7 avril 2010 17 Objets SVG : le texte Affichage de texte : SVG orientation glyph-orientation-vertical ="0" Tracé le long dun chemin : textPath

18 Christine Potier -- MS CPM -- 7 avril 2010 18 divers : couche graphique et clipping Définition dune couche graphique (noeud XML) on regroupe un ensemble dobjets SVG –au niveau des noeuds, on peut appliquer : suppression, changement de style, transformation géométrique,.. priorité aux redéfinitions dans les sous-noeuds Clipping –clipPath défini à partir de path, text, line, rect, circle, ellipse, polyline, polygon et use......

19 Christine Potier -- MS CPM -- 7 avril 2010 19 Exemple de clippath -------------------------------------------------------------------

20 Christine Potier -- MS CPM -- 7 avril 2010 20 Animation dérivé de SMIL 2.0 : SVG langage hôte balises danimation change les attributs « scalaires » –basée sur le temps et les évènements déplace un objet le long dun chemin transformations animées (modification de transform) Temporisation : choix du début, de la durée, du nombre de cycle, de la fin,.. exemple danimation: couleur, skewY, clipping,couleurskewYclipping

21 Christine Potier -- MS CPM -- 7 avril 2010 21 SVG et le monde extérieur! le format SVG présentation générale système de coordonnées objets graphiques, couleurs, texte, clippath… les tranformations géométriques les « définitions » lanimation interne Encapsuler du SVG dans du html SVG animé avec javascript Intégrer un fond de carte dans du SVG Génération dynamique de SVG Interaction avec php et les bases de données Ajax

22 Christine Potier -- MS CPM -- 7 avril 2010 22 Insérer 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é)

23 Christine Potier -- MS CPM -- 7 avril 2010 23 Interaction : les scripts Utilisation de scripts pour rendre interactifs les graphiques SVG –En langage JavaScript (ou ecmascript) Les objets répondent à des événements –à des événements associés au statut d'un objet : onload –à des événements liés à la souris Cliquer : onclick, onmousedown, onmouseup Bouger la souris : onmouseover, onmouseout, onmousemove –à des événements non standardisés associés à des touches du clavier : onkeydown, onkeyup. Si on veut faire une action au chargement de la page, on écrit par exemple: – la fonction init(evt) étant une fonction javascript autre exemple onmouseover = "mafonction(evt);"

24 Christine Potier -- MS CPM -- 7 avril 2010 24 SVG et le DOM Pour savoir où sest produit lévénement evt.target Pour atteindre la racine de l'arbre XML svgDoc = evt.target.ownerDocument; ou svgDoc = document; Pour atteindre un élément par son attribut 'Id' (son nom) svgDoc.getElementById("Id") –Attention: l'attribut 'Id' doit être unique dans tout le document SVG Tout noeud peut être supprimé par son parent. Un attribut ne peut être supprimé que par lélément auquel il appartient.

25 Christine Potier -- MS CPM -- 7 avril 2010 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 = document; (evt.target.ownerDocument) Pour accéder à lélément « train » var train = doc.getElementById("train"); ou si on part de wagon1 var wagon1= doc.getElementById("wagon1"); var train = wagon1.parentNode; Pour atteindre les composants de wagon1 (tableau) var composants = wagon1.childNodes;

26 Christine Potier -- MS CPM -- 7 avril 2010 26 Les actions sur les objets SVG: quelques fonctions On peut : –Modifier les attributs des objets (taille, couleur, opacité, position, visibilité,...) getAttributeNS(null,"nom") setAttributeNS(null,"nom",valeur) createAttribute(): crée un nouvel attribut pour l'arborescence –Créer ou détruire des objets : createElement(): crée un nouvel élément pour l'arborescence createTextNode("un texte") : demande au document de créer un nouvel élément de texte dont le contenu est la chaîne transmise en argument. –Modifier l'arborescence : replaceChild(nouvelElement,ancienElement) : –va remplacer un nœud du document XML par un autre obj.firstChild : –sélectionne dans l'arbre XML le premier fils de l'objet obj appendChild(... )

27 Christine Potier -- MS CPM -- 7 avril 2010 27 Les fonctions Javascript dans un document SVG Directement dans le fichier svg .. texte SVG ou bien dans un fichier externe « script.js ».. texte SVG...

28 Christine Potier -- MS CPM -- 7 avril 2010 28 Fonctions Javascript : Exemple 1Exemple 1 Un rectangle qui change de couleur au chargement (vert => bleu) function init(evt) { var doc = document; var rect1 = doc.getElementById("greenRect"); rect1.setAttributeNS(null, "fill", "blue"); } Christine Potier -- MS CPM -- 7 avril 2010 28 Fonctions Javascript : Exemple 1Exemple 1 Un rectangle qui change de couleur au chargement (vert => bleu) <svg version= 1.1 baseProfile= full xmlns:svg= http://www.w3.org/2000/svg xmlns:ev= http://www.w3.org/2001/xml-events width= 600 height= 400 onload= init(evt); > <![CDATA[ function init(evt) { var doc = document; var rect1 = doc.getElementById( greenRect ); rect1.setAttributeNS(null, fill , blue ); } ]]>

29 Christine Potier -- MS CPM -- 7 avril 2010 29 Un cercle qui change de taille : 2me exemple2me exemple

30 Christine Potier -- MS CPM -- 7 avril 2010 30 Insérer un fond de carte Balise –On peut inclure tout type dimage: gif, png, jpeg,… exemple la carte Velovexemple { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.fr/1693997/6/slides/slide_29.jpg", "name": "Christine Potier -- MS CPM -- 7 avril 2010 30 Insérer un fond de carte Balise –On peut inclure tout type dimage: gif, png, jpeg,… exemple la carte Velovexemple

31 Christine Potier -- MS CPM -- 7 avril 2010 31 Génération dynamique de scripts svg Serveur MySQL ou PostGreSQL ou… Navigateur Serveur Apache requête résultat Exécution du script php http://www.enst.fr/carte.php url: script php source SVG module php

32 Christine Potier -- MS CPM -- 7 avril 2010 32 SVG et Ajax BD - GIS Back-office Scripts php génération de XML Au chargement Requête Clic souris Front-office : SVG + Ajax Au clic XML


Télécharger ppt "SVG: Scalable Vector Graphics Christine Potier -- MS CPM -- 7 avril 2010 1 Christine Potier Télécom-ParisTech CPM – 7 avril 2010."

Présentations similaires


Annonces Google