GENIE MULTIMEDIA Eléments graphiques

GENIE MULTIMEDIA Eléments graphiques
Christine Vanoirbeek EPFL – IC – CGC Bâtiment BC (Station 14) 1015 LAUSANNE

GENIE MULTIMEDIA - Eléments grahiques - 14.12.2006
Introduction Approches « XML » pour le traitement des éléments graphiques Graphiques structurés Tableaux Formules mathématiques (MATHML) Formules chimiques (CML) Schémas Diagrammes … Graphique vectoriel (SVG) GENIE MULTIMEDIA - Eléments grahiques

SVG SVG (Scalable Vector Graphics) est une application XML qui permet de décrire du graphique vectoriel incluant texte et images avec des couleurs dégradées, des filtres, une grande richesse de styles,etc. des animations et des objets d'interaction GENIE MULTIMEDIA - Eléments grahiques

SVG: Historique Groupe de travail constitué par le W3C en 1998 (avec des représentants de Microsoft, Autodesk, Adobe, IBM, Sun, Netscape, Xerox, Apple, Corel, HP, …) Recommandation SVG 1.0 publiée en septembre 2001 Recommandation SVG 1.1 publiée en janvier 2003 comprend aussi une version SVG Mobile pour téléphones portables et PDAs SVG 1.2 draft GENIE MULTIMEDIA - Eléments grahiques

Structure globale d'un document SVG
Un fichier SVG a la forme suivante <?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" " <svg xmlns=" ... > <desc> ... une description libre (optionnel) </desc> <defs> ... des définitions </defs> <g> ... le contenu graphique (<g> est optionnel) </g> </svg> GENIE MULTIMEDIA - Eléments grahiques

Système de coordonnées
Le système de coordonnée utilisateur est fixé par des attributs de l'élément racine <svg …> width, height fixent la dimension de la fenêtre en pixels px (par défaut) en millimètres (mm), centimètres (cm), en pouces (in) en grandeurs typographiques (em, ex, pt, pc) viewport="x y w h" fixent la portion visible GENIE MULTIMEDIA - Eléments grahiques

Objets graphiques élémentaires
SVG est basé sur les objets graphiques suivants un ensemble de formes élémentaires lignes rectangles cercles ellipses polygones lignes polygonales des formes quelconques définis par un contour du texte Positionnement des objets Les objets SVG se positionnent dans un système de coordonnées qui commence en haut et à gauche Il est possible de travailler avec des coordonnées locales GENIE MULTIMEDIA - Eléments grahiques

Lignes Une ligne est représentée par un élément <line x1=… y1=… x2=… y2=…/> Sa présentation est caractérisée par les attributs stroke="color" où color a la forme d'un nom: black, red, blue, ... d'une valeur #rrggbb ou rgb(r%,g%,b%) stroke-width="val" pour l'épaisseur du trait stroke-dasharray="lst" pour le motif des pointillés où lst a la forme "s1 b1 s2 b2 … " stroke-opacity="val" avec "val" entre 0 et 1 GENIE MULTIMEDIA - Eléments grahiques

Rectangles Un rectangle (parallèle aux axes) est représenté par <rect x=… y=… width=… height=…/> Sa présentation est caractérisée par les attributs fill="color" avec une spécification de couleur fill-opacity="val" avec "val" entre 0 et 1 rx="val" et ry="val" pour définir des angles arrondis stroke… pour la présentation des contours GENIE MULTIMEDIA - Eléments grahiques

Exemple <svg ...> <rect x="10" y="10" width="140" height="40"/> <rect x="10" y="60" ... fill="red"/> <rect x="10" y="110" ... fill="none" stroke="blue" stroke-width="2"/> <rect x="10" y="160" ... fill="#9999FF" stroke="black" stroke-width="2" stroke-dasharray="10 10"/> <rect x="10" y="210" ... fill="yellow" stroke="red" stroke-width="2" stroke-dasharray=" " rx="10" ry="10"/> <rect x="10" y="260" ... stroke="red" stroke-opacity="0.8" stroke-width="10"/> </svg> GENIE MULTIMEDIA - Eléments grahiques

Cercles et ellipses Un cercle est représenté par <circle cx=… cy=… r=…/> Une ellipse est représenté par <ellipse cx=… cy=… rx=… ry=…/> Leur présentation est régi par les mêmes attributs que les rectangles GENIE MULTIMEDIA - Eléments grahiques

Polygones et lignes polygonales
Un polygone (courbe fermé) est représenté par <polygon points="x1,y1 x2,y2 …"/> Une ligne polygonale (ouverte) est représentée par <polyline points="x1,y1 x2,y2 …"/> normalement, on utilise polyline avec l'attribut fill="none« Les attributs suivants contrôlent la présentation stroke-linecap avec les valeurs butt, round, square définit la forme des extrémités stroke-linejoin avec les valeurs miter, round, bevel définit la forme des angles GENIE MULTIMEDIA - Eléments grahiques

Formes quelconques SVG permet de définir des formes quelconques <path d="data"/> où data contient les codes M x y : aller à (x,y) L x y : dessiner ligne vers (x,y) H x : dessiner une ligne horizontale jusqu'à x V y : dessiner une ligne verticale de longueur y Z : fermer le chemin A … : dessiner un arc d'ellipse Q … , T … . dessiner une courbe de Bézier quadratique C … , S … : dessiner une courbe de Bézier cubique les codes minuscules (m,l,h,v,…) sont utilisés avec des coordonnées relatives GENIE MULTIMEDIA - Eléments grahiques

Arcs elliptiques Dans un chemin un arc elliptique est représenté par A rx ry x-rot large-arc sweep x y où rx ry représentent les rayons en x et y x-rot représente l'angle de rotation par rapport à l'axe des x large-arc et sweep définissent le segment x y représentent le point final de l'arc GENIE MULTIMEDIA - Eléments grahiques

Exemples: courbes de Bézier
Exemple de courbes de Bézier quadratiques ... et cubiques GENIE MULTIMEDIA - Eléments grahiques

Texte Une chaîne de caractères (texte) est représentée par <text x=… y=… >content</text> Sa présentation est caractérisée par les attributs font-family, font-size, font-weight et font-style, text-decoration, letter-spacing, ... (comme dans CSS) text-anchor avec les valeurs start, middle et end pour l'alignement fill="color" pour la couleur L'élément <tspan …> permet de redéfinir les attributs d'une sous-chaîne SVG supporte les caractère Unicode et il est possible d'écrire verticalement (caractères droits ou inclinés) selon une orientation quelconque en suivant une courbe GENIE MULTIMEDIA - Eléments grahiques

Images Avec l'élément <image xlink:href="url" …>, il est possible d'importer des images en format JPEG, PNG ou un autre fichier SVG x=…, y=…, permettent de positionner l'image width=… et height=… permettent de dimensionner l'image Il est également possible d'appliquer des filtres <image x="10" y="50" width="200" height="100" xlink:href="cathedrale_ge.jpg"> <title>Eglise large</title> </image> <image x="250" y="50" width="50" height="100" xlink:href="cathedrale_ge.jpg"> <title>Eglise longue</title> </image> <image x="310" y="50" width="100" height="100" xlink:href="cathedrale_ge.jpg preserveAspectRatio="xMinYMin meet"> <title>Eglise juste</title> </image> GENIE MULTIMEDIA - Eléments grahiques

Déformations et coupures
preserveAspectRatio="alignment mode" permet de conserver l'isométrie mode vaut meet ou slice alignment est de la forme xM……yM…… GENIE MULTIMEDIA - Eléments grahiques

Transformations Avant d'être affiché, un objet graphique peut subir une transformation définie par transform="…" translate(tx,ty) rotate(a) ou rotate(a,cx,cy) scale(f) ou scale(fx,fy) skewX(a), skewY(a) où les angle sont exprimés en degrés Les transformations peuvent être combinées GENIE MULTIMEDIA - Eléments grahiques

Transformations Toutes ces transformations peuvent être représentées mathématiquement par une matrice carrée 3 x 3 du type: où seules 6 valeurs a,b,c,d,e,f sont différentes de 0 ou 1. On peut ainsi employer une notation vectorielle du type [ a b c d e f ] . Les transformations transposent les coordonnées et les longueurs d'un système à l'autre par une relation: GENIE MULTIMEDIA - Eléments grahiques

Inclinaison des coordonnées x Inclinaison des coordonnées y
Transformations Transformation Paramètres Matrice Translation tx et ty sont les distances de translation des coordonnées x et y Scaling sx et sy sont les facteurs d'échelle en x et y Rotation a est l'angle de rotation Inclinaison des coordonnées x a est l'angle d'inclinaison en x Inclinaison des coordonnées y a est l'angle d'inclinaison en y GENIE MULTIMEDIA - Eléments grahiques

Regroupement d’éléments
SVG possède plusieurs constructions pour regrouper des objets dans des blocs. Les objets SVG (comme les objets HTML) héritent le style de leurs parents GENIE MULTIMEDIA - Eléments grahiques

Dégradés Les dégradés de couleurs sont réalisés par <linearGradient …> et <radialGradient …> <svg ... viewBox=" "> <defs> <linearGradient id="lgrad" x1="0%" y1="100%" x2="0%" y2="0%"> <stop offset="0%" stop-color="#333" /> <stop offset="30%" stop-color="#FFC" /> <stop offset="100%" stop-color="#99F" /> </linearGradient> <radialGradient id="rgrad" fx="0.3" fy="0.3" r="0.5"> <stop offset="0%" stop-color="#FFF" /> <stop offset="20%" stop-color="#FF0" /> <stop offset="100%" stop-color="#F90" /> </radialGradient > </defs> <rect fill="url(#lgrad)" x="50" y="50" width="200" height="500"/> <circle fill="url(#rgrad)" cx="150" cy="200" r="60"/> </svg> GENIE MULTIMEDIA - Eléments grahiques

Découpe (clipping) L'élément <clipPath> avec des objets 2D permet de restreindre le champ d'affichage selon une découpe <svg width="300" height="600"> <defs>... <clipPath id="triangleClip"> <path d="M L L Z"/> </clipPath> <clipPath id="textClip"> <text x="150" y="220" font-size="80" text-anchor="middle">SUN</text> </defs> <g clip-path="url(#triangleClip)"> <rect fill="url(#lingrad)" .../> <circle fill="url(#radgrad)" clip-path="url(#textClip)"/> </g> </svg> GENIE MULTIMEDIA - Eléments grahiques

Styles SVG peut être utilisé par les feuilles de styles CSS <svg ...> <defs><style type="text/css"><![CDATA[ polygon { fill:white; stroke:black; stroke-width:2 } .green { fill:#66FF66 } .yellow { fill:yellow } ]]></style></defs> <polygon class="yellow" points=" "/> <polygon points=" "/> <polygon class="green" points=" "/> </svg> GENIE MULTIMEDIA - Eléments grahiques

Animation SVG offre un mécanisme pour créer des animations Le principe consiste à inclure des éléments d'animation à l'intérieur des éléments graphiques Les animations permettent de déplacer ou déformer (pivoter, étirer, rétrécir, ...) changer sa couleur déplacer sur une trajectoire Les fonctions d'animation sont reprises de SMIL2 (Synchronized Multimedia Integration Language, level 2) GENIE MULTIMEDIA - Eléments grahiques

Animation d'un attribut
L'élément <animate …> spécifie un attribut et comment sa valeur évolue au cours du temps attributeName="…" spécifie le nom de l'attribut from="…" et to="…" fixent les bornes des valeurs begin="…" et end="…" (ou dur="…") déterminent le début et la fin (resp. la durée) de l'animation fill="freeze" permet à la fin de geler l'animation <animateColor …> permet de d'animer les couleurs <animateTranform …> et <animateMotion …> permettent des mouvements complexes GENIE MULTIMEDIA - Eléments grahiques

Animation avec les transformations
L'élément <animateTranform …> avec attributeName="transform" type="…" permet l'application d'une transformation géométrique <svg width="600" height="400"> <text x="300" y="240" text-anchor="middle" font-size="20" fill="blue"> HELLO <animate attributeName="font-size" from="5" to="100" dur="2s" fill="freeze"/> <animateTransform attributeName="transform" type="rotate" from=" " to=" " dur="2s"/> </text> </svg> GENIE MULTIMEDIA - Eléments grahiques

Mouvement le long d'un chemin
L'élément <animateMotion …> permettent un déplacement le long d'un chemin défini par path="…" Par contre, il est pratiquement impossible d'animer une courbe définie par un élément <path> ! <svg width="600" height="400"> <text text-anchor="middle" font-size="60" ...> HELLO <animateMotion path="M Q Q " dur="4s" fill="freeze"/> </text> </svg> GENIE MULTIMEDIA - Eléments grahiques

Avantages du graphisme vectoriel:
Compressibilité élevée Taille et style adaptable Capacité d’indexation Les éléments graphiques sont des objets hiérarchiques GENIE MULTIMEDIA - Eléments grahiques

Graphiques structurés: formules mathématiques
MathML: structure typoraphique et mathématique Formule ‘ A =’ Intégrale ‘ f(x) dx’ Borne sup Borne inf ‘ 1’ ‘ 0’ GENIE MULTIMEDIA - Eléments grahiques

MathML: structure typographique et mathématique Formule Egalité Intégrale Variable Var intég. Intégrande Borne sup Borne inf ‘ A’ ‘ dx ’ ‘ f(x) ’ ‘ 1 ’ ‘ 0 ’ GENIE MULTIMEDIA - Eléments grahiques

MathML, exemple de structure de présentation <msup> <mfenced> <mrow> <mi>a</mi> <mo>+</mo> <mi>b</mi> </mrow> </mfenced> <mn>2</mn> </msup> GENIE MULTIMEDIA - Eléments grahiques

MathML, exemple de structure de contenu <apply> <power/> <plus/> <ci>a</ci> <ci>b</ci> </apply> <cn>2</cn> GENIE MULTIMEDIA - Eléments grahiques

GENIE MULTIMEDIA Eléments graphiques

Présentations similaires

Présentation au sujet: "GENIE MULTIMEDIA Eléments graphiques"— Transcription de la présentation:

Présentations similaires

Notre projet

Feed-back

Entrer

S'autoriser via un réseau social:

GENIE MULTIMEDIA Eléments graphiques

Présentations similaires

Présentation au sujet: "GENIE MULTIMEDIA Eléments graphiques"— Transcription de la présentation:

Présentations similaires

Notre projet

Feed-back