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. Dialecte dXML pour la représentation de graphique vectoriel 2D Tracés de base en vectoriel (courbes, lignes, rectangles,…)

Présentations similaires


Présentation au sujet: "SVG: Scalable Vector Graphics. Dialecte dXML pour la représentation de graphique vectoriel 2D Tracés de base en vectoriel (courbes, lignes, rectangles,…)"— Transcription de la présentation:

1 SVG: Scalable Vector Graphics

2 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 Interaction avec les bases de données (php) Affichage dans un navigateur Plugin SVG (Adobe). En projet dans Mozilla Fonctions prédéfinies: zoom, déplacement Concurrent:Flash Extension : SVG Mobile en cours de normalisation

3 Code 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

4 Structure dun fichier SVG 1. version de xml 2. Référence à la DTD, informations sur la structure du document 3. Structure dun fichier SVG 1. version de xml 2. Référence à la DTD, informations sur la structure du document 3. <svg xmlns=

5 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) "300" height="200"> Attribut : viewBox permet de définir les coordonnées utilisateur 0 x utilisateur 3000, y utilisateur -1000

6 Le point (0,0) sera en dehors de la fenêtre donc pas affiché Redéfinition du viewport: svg imbriquéssvg imbriqués P 2 =(3050,400) 300 pixels x y 200 pixels P 1 =(50,100)

7 Objets graphiques line : polyline et polygone : rectangle: coins arrondis rx="5" ry="3" cercle : ellipse : chemin coordoonées absolues (L) ou relatives (l)

8 Objets graphiques (suite) Affichage de texte :

9 Path chemin : ligne brisée coordoonées absolues (L) ou relatives ( l ) (point précédent) Bézier quadratiquequadratique M x 0 y 0 Q x 1 y 1 x 2 y 2 ou q en relatif par rapport à P 0 Bézier cubiquecubique M x 0 y 0 C x 1 y 1 x 2 y 2 x 3 y 3 ou c en relatif Courbe compositecomposite M x 0 y 0 C... C... Q... L... ou M x 0 y 0 c... c... q... l...

10 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 On empile les transformations –transform="translate(0,10)scale(3)translate(20,5)" 1. translate(20,5) 2. scale(3) 3. translate(0,10)

11 Balise définition dobjet identifié par son nom pas directement utilisé, mais pouvant être référencé on peut définir un ensemble dobjets:

12 divers Définition dun 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

13 Animation balise animate


Télécharger ppt "SVG: Scalable Vector Graphics. Dialecte dXML pour la représentation de graphique vectoriel 2D Tracés de base en vectoriel (courbes, lignes, rectangles,…)"

Présentations similaires


Annonces Google