Docstoc

Le langage SVG

Document Sample
Le langage SVG Powered By Docstoc
					                         Le langage SVG

             Noms des étudiants travaillant sur ce projet :
                          Deheul Julien
                       Kasmi Sahli Mouad


M1 Informatique et document
                 SOMMAIRE
 Introduction
 Outils de visualisation de SVG
 Macromedia Flash vs. SVG
 La structure de base
 Les outils graphiques de bases
 Les textes et chemins
 Les images
 Animation et écriture de scripts
 Un éditeur SVG : webdraw1 (JascSoftware)
 Conclusion
              Introduction

•   Définition
•   Systèmes de représentation graphique
        1) Graphiques bitmap
        2) Graphiques vectoriels
•   Historique de la technologie (SVG)
•   Les avantages de SVG
                         Définition


SVG, qui signifie Scalable Vector Graphics (soit Graphiques Vectoriels
Adaptables) est une application de XML qui permet de représenter l'information
graphique sous une forme compacte et portable.

L'intérêt dans SVG croît rapidement et de nombreux outils de création et de
visualisation de fichiers SVG sont déjà disponibles auprès de grand éditeurs.
  Graphiques bitmap

•Une image est consituée par un tableau rectangulaire d'éléments appelés pixels.

•Chaque pixel représente une couleur par ses composantes Rouge-Verte-Bleue.

•Cette série de pixels, aussi appelée bitmap est souvent stockée sous une forme
compressée.

•Leurs usage est plus approprié dans le cas de photographies, qui sont rarement
composées de lignes droites ou de courbes.

•Les principaux formats d'images bitmaps sont JPEG, GIF, PNG et TIFF
  Graphiques vectoriels

•Une image est décrite par un ensemble de formes géometriques.

•Au lieu de recevoir l'image dejà construite sous forme de pixels, le programme de
visualisation reçoit des commandes qui vont lui permettre de tracer des formes avec des
coordonnées précises.

•Ils sont très répandus dans les applications suivantes :
           - les programmes de Conception Assistée par Ordinateur (CAO)
           - les programmes de dessin comme Adobe Illustrator
           - le langage de description de page Adobe PostScript dans lequel chaque
           caractère est représenté sous forme de lignes et de courbes.
           - le système d'animation de présentation et de création de sites Web Flash de la
           société Macromedia, qui s'appuie sur une technologie vectorielle.
             Historique de SVG


•Groupe de travail constitué par le W3C en 1998 (comprenant des représentants
de: Microsoft, Autodesk, Adobe, IBM,
Sun,Netscape, Xerox, Apple, Corel, HP,ILOG, …)
•Premier draft : 5 Février 1999
•Spécification stable en 2000, avec quelques implémentations
•Recommandation W3C en septembre 2001 : SVG 1.0
•Profils mobiles en janvier 2003 : SVG 1.1, http://www.w3.org/TR/SVG11
•SVG 1.2 à l’état de working draft (29.04.2003): http://www.w3.org/TR/SVG12
          Les avantages de SVG
•Langage libre de droit
•Langage de description de graphiques 2D
•Compatible XML
•Prise en compte de CSS2, XSL et XLINK
•Langage supporté par : HTML, GIF, JPEG, PNG, SMIL, ASP, JSP, PHP,
Javascript
•Nombreux effets graphiques
•Possibilité de zoomer et de retailler une zone de vision
•Logiciels exportant le SVG (CorelDraw, ILOG Views, Narcisse, ...)
•Des convertisseurs vers SVG (Postscript, Flash, ...)
•Permet les graphiques suivants : formes vectorielles (traits, courbes, ...),
•images, textes
•Le SVG peut être intégré dans une page HTML en utilisant EMBED ou
OBJECT
                 Visualiseur SVG:
    Nom            Plateforme             Download
 Adobe SVG
                     Toutes       http://www.adobe.com/svg/
   viewer
  Apache                          http://xml.apache.org/batik/
Squiggle SVG         Java 2
  browser                                svgviewer.html
 Corel SVG                         http://www.corel.com/svgvi
                    Windows
   viewer                                     ewer
SVG in Mozilla
                   Implémente du SVG natif (pas de plugin)
   project
    Macromedia Flash vs. SVG :

  Propriété          SWF                  SVG
XML – Std W3C         Non                  Oui
  Metadata      Oui, propriétaire   Oui, compatible RDF
   Format           Binaire                Texte
                                    >SWF, mais bonne
    Taille          < SVG
                                     compressibilité
   Plugin         Oui (200K)           Oui (2,3MB)
   Source             Non                  Oui
                  La structure de base

<?xml version="1.0"?> :déclaration XML standard

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/PR-SVG-20010719/DTD/svg10.dtd"> : indication du DTD


<svg width="400" height="250"> : déclaration des dimensions du document SVG.
On est ici à la racine du contenu SVG.

</svg>
    Les outils graphiques de base
•   le systeme de coordonnees
•   les lignes
•   les rectangles
•   les cercles
•   les ellipses
•   les polygones


    Et leurs transformations
•   les translations
•   les rotations et inclinaisons
       Le système de coordonnées:



Ce sont comme les coordonnées (x,y) dans un repere orthonormé, sauf que le
point (0,0) est le coin en haut a gauche.

la syntaxe : x="coord" y="coord" .
              Les lignes [segments]
Permet de faire une ligne à l'aide des coordonnées des deux points qui forment
le segment.

Syntaxe : <line x1="coord1" y1="coord1" x2="coord2" y2="coord2" />

Un exemple simple: un segment horizontal




      <line x1="10" y1="10" x2="300" y2="10"
      style="fill:white;stroke:black;stroke-width:1"/>
                         Les rectangles
Permet de faire des rectangles grace aux coordonnées du repere dans lequel nous
travaillons.

Syntaxe : <rect x="coord" y="coord" width="largeur" height="hauteur" rx="raccordx"
ry="raccordy" />
Avec x=abscisse la plus petite correspondante a un coté du carré, y=ordonnée la plus
petite correspondante a un coté du carré, rx et ry=permet de faire des carré avec des
coins arrondis (pas obligatoire), ca correspond au rayon de l'ellipse qui assure le raccord.

Un exemple simple: un rectangle aux coins arrondis



                                    <rect x="100" y="100" width="200" height="100"
                                    rx="25"
                                    style="fill:white;stroke:black;stroke-width:1"/>
                             Les cercles
Permet de faire des cercles grace aux coordonnées du repere dans lequel nous
travaillons.

Syntaxe : <circle cx="coordnoyau" cy="coordnoyau" r="rayon" />
avec cx et cy=coordonnées du centre du cercle , r=rayon du cercle.

Un exemple simple: un cercle tres classique.




                                  <circle cx="200" cy="200" r="100"
                                  style="fill:white;stroke:black;stroke-width:1"/>
                            Les ellipses
Permet de faire des ellipses grace aux coordonnées du repere dans lequel nous
travaillons.

Syntaxe : <ellipse cx="coordnoyau" cy="coordnoyau" rx="rayon" ry="rayon" />
avec cx et cy=coordonnées du centre du cercle, rx=rayon de l'ellipse sur l'axe des x,
ry=rayon de l'ellipse sur l'axe des y.

Un exemple simple: une ellipse etirée sur la largeur.




                                    <ellipse cx="150" cy="100" rx="100" ry="50"
                                    style="fill:white;stroke:black;stroke-width:1"/>
                          les polygones
Permet de faire des polygones avec autant de cotés que voulu (du triangle a l'octogone
etc).

Syntaxe : <polyline points="tout les points du polygone"/>

Les points du polygone=la liste des coordonnées x, y des points du polygone séparés par
des virgules.

Un exemple simple: un triangle




                             <polyline points="218,135 372,324 122,322 218,135"
                             style="fill:white;stroke:black;stroke-width:1"/>
                          les polygones
Permet de faire des polygones avec autant de cotés que voulu (du triangle a l'octogone
etc).

Syntaxe : <polyline points="tout les points du polygone"/>

Les points du polygone=la liste des coordonnées x, y des points du polygone séparés par
des virgules.

Un exemple simple: un octogone




                             <polyline points="232,53 364,102 399,214 340,285
                             244,322 133,277 76,204 116,94 232,53"
                             style="fill:white;stroke:black;stroke-width:1"/>
                   les translations :
Permet de faire une translation du repere dans lequel on selectionne les coordonnées.

La syntaxe : <transform="translate(coordX,coordY)">

Un exemple simple: faire une translation de deux lignes formant un angle droit.

                                   <g style="fill:none; stroke:blue; stroke-width:5">
                                   <line x1="50" y1="50" x2="150" y2="50" />
                                   <line x1="50" y1="50" x2="50" y2="150" />
                                   </g>
                                   <g transform="translate(60,40)">
                                   <g style="fill:none; stroke:green; stroke-width:3">
                                   <line x1="50" y1="50" x2="150" y2="50" />
                                   <line x1="50" y1="50" x2="50" y2="150" />
                                   </g>
                                   </g>
                            les rotations
La rotation permet d'effectuer une rotation au repere dans lequel on selectionne les
coordonnées.

La syntaxe : <g transform="rotate(angle)">
avec l'angle qui peut etre en degrés (deg) ou radiant (rad).

Un exemple simple: faire une rotation de deux lignes formant un angle droit.

                                <g style="fill:none; stroke:blue; stroke-width:5">
                                <line x1="50" y1="50" x2="150" y2="50" />
                                <line x1="50" y1="50" x2="50" y2="150" /></g>
                                <g transform="translate(60,20)">
                                <g transform="rotate(20deg)">
                                <g style="fill:none; stroke:green; stroke-width:3">
                                <line x1="50" y1="50" x2="150" y2="50" />
                                <line x1="50" y1="50" x2="50" y2="150" />
                                </g></g></g>
                       Les inclinaisons
L'inclinaison permet d'effectuer une inclinaison en x ou y au repere dans lequel on
travaille.

La syntaxe : <g transform="skewX[ouY](angle)">
Avec l'angle qui peut etre en degrés (deg) ou radiant (rad) .

Un exemple simple: faire une inclinaison de deux lignes formant un angle droit.

                                <g style="fill:none; stroke:black; stroke-width:3">
                                <line x1="50" y1="50" x2="150" y2="50" />
                                <line x1="50" y1="50" x2="50" y2="150" /></g>
                                <g transform="translate(50,50)">
                                <g transform="skewX(20deg)">
                                <g style="fill:none; stroke:red; stroke-width:3">
                                <line x1="50" y1="50" x2="150" y2="50"/>
                                <line x1="50" y1="50" x2="50" y2="150" />
                                </g></g></g>
        Les textes et chemins


•   Les textes
        1) Tspan
        2) tref
•   Les chemins
•   Un texte suivant un chemin
                      Les textes :


Le texte en SVG est traité comme un objet graphique a travers la balise <text>.
Donc on peut lui affecter des changements de coordonnées, le mode de rendu
et le clipping.

La syntaxe : <texte x="coord" y="coord" />

Avec x et y les coordonnées de depart du texte.
                                      tspan
Il existe aussi une balise <tspan> qui permet de changer la position ou encore le style
dans un texte.

La syntaxe : <text> ... <tspan x="coorden+" y="coorden+" dx="coorden+" dy="coorden+"
rotate="angle" style="font,color,etc" > le texte </tspan></text>

Un exemple simple : texte avec modification de style et de position grace a tspan.




  <text x="1cm" y="1cm" style=" fill:black; font-size:10pt; font-family:sans-serif;
  font-style:italic;"> le texte de depart
  <tspan dx="1cm" dy="2cm" style="fill:green; font-size:15pt;">et celui modifie !
  </tspan>c'est bien non ?</text>
                                        tref
La balise <tref> permet de réferencer le texte d'un autre element. Cela peut être utile
lorsque qu'une phrase est redondante dans votre fichier svg.

La syntaxe : <tref xlink:href="#larefdutxtvoulu"/>

Un exemple simple : une partie de phrase referencée et utilisée deux fois.




  <defs><text id="nosprenoms">julien et mouad</text></defs>
  <text x="1cm" y="1cm" style="font-size:10pt;fill:black;">
  bienvenue sur le site de svg de
  <tref xlink:href="#nosprenoms" style="font-size:12pt; fill:green;"/></text>
  <text x="1cm" y="3cm"> page de
  <tref xlink:href="#nosprenoms" style="font-size:12pt; fill:green;"/></text>
                                     les chemins
Permet de créer un chemin, c'est à dire une liaison de courbes, de droites, …

La syntaxe : <path id="identifduchemin" d="le coordonnes faisant le chemin" />

Les coordonnées faisant le chemin se font de cette maniere:
     •M(ou m)x,y=moveto (demarre un nouveau sous-chemin)
     •Z(ou z)=closepath (ferme un sous chemin en tracant une ligne droite entre le point courant et le dernier
     moveto)
     •L(ou l)x,y=lineto (trace une ligne droite entre le point courant et le point saisi)
     •H(ou h)x=horizontal lineto (trace une ligne horizontale entre le point courant et le point saisie avec le x)
     •V(ou v)y=vertical lineto (trace une ligne verticale entre le point courant et le point saisie avec le y)
     •C(ou c), S(ou s)=Courbes de Bézier cubiques (On spécifie un point de départ, un point d'arrivée et 2 points
     de contrôle)
     •Q (u q), T(ou t)=Courbes de Bézier quadratiques (On spécifie un point de départ, un point d'arrivée et 1
     point de contrôle)
     •A(ou a)=Arc elliptique (On spécifie un morceau d'ellipse par 2 rayons et un sens de parcours)

Un exemple simple : un chemin constitué d'un lineto et d'une courbe de bezier cubique.
                             les chemins
Un exemple simple : un chemin constitué d'un lineto et d'une courbe de bezier cubique.




   <path d="M77 56 L223 195 C223 195 54 32 275 48"
   style="fill:none;strokeblack;stroke-width:1"/>
        Un texte suivant un chemin
Vous pouvez grâce aux deux éléments vu avant (c'est à dire les textes et les chemins)
faire un texte qui se positionne le long d'un chemin.

La syntaxe : <textPath starOffset="longueur|pourcentage" xlink:href="idduchemin" />

Avec starOffset=c'est le décalage par rapport au début du texte.

Un exemple simple : un texte qui suit un chemin constitué d'une courbe de bezier cubique
                                    <defs><path id="lechemin"
                                    d="M62 236 C149 17 259 578 366 3262"
                                    style="fill:none;stroke:black;stroke-width:0"/>
                                    </defs>
                                    <use xlink:href="#lechemin"/>
                                    <text style="font-family:sans-serif; font-size:30pt;
                                    fill:green">
                                    <textPath xlink:href="#lechemin">
                                    ce texte suit un chemin :-)
                                    </textPath></text>
                          Les images en svg
     Insertion d'images dans un document svg


Il est possible d'insérer des images dans un document svg, les formats bitmap supportés
(jpeg, png). Pour cela on utilise <image> qui contient les éléments x, y, width, height et
xlink:href.

La syntaxe : <image x="coord" y="coord" width="largeur" height="hauteur"
xlink:href="image.jpg">

Avec x et y=les coordonnées de l'image (la plus petite ordonnée et la plus petite absisce)
width, height=respectivement la largeur et la hauteur de l'image
xlink:href=lien de l'image souhaitée.

Un exemple simple : l'insertion d'une image dans un document svg.
               Les images en svg
Insertion d'images dans un document svg




       <image x="108" y="125" width="280" height="187"
       xlink:href="C:\images/image.jpg" / >
                          Les images en svg
    Les chemins de découpe
Il est possible de faire un chemin de découpe sur une image. C'est à dire créer un chemin
qui coupera l'image et lui fera donc prendre un bord de la forme voulu.

La syntaxe : <image x="coord" y="coord" width="largeur" height="hauteur"
xlink:href="limage.jpg" style="clip-path:URL(#lechemindedecoupe)"/>

Un exemple simple :une image avec un chemin de decoupe qui est un cercle.
                                    <defs> <clipPath>
                                    <circle id="chemindecoupe" cx="248" cy="220"
                                    r="136" /> </clipPath> </defs>
                                    <circle id="chemindecoupe" cx="248" cy="220"
                                    r="136"
                                    style="fill:black;stroke:black;stroke-width:1"/>
                                    <image x="108" y="125" width="280" height="187"
                                    xlink:href="C:\images/image.jpg"/ style="clip-
                                    path:url(#chemindecoupe)" />
                                L’animation
 Concept de base
Les capacités d'animation de SVG sont basées sur une spécification du World Wide Web
Consortium, Synchronized Multimedia Integration Language Level 2 (SMIL 2).

Avec ce système on spécifie les valeurs de :
•début
•fin
•Couleur
•mouvement
•transformation
•moment où l'animation doit commencer
•la durée de cette animation
                              L’animation
<rect x="10" y="10" width="150" height="20"        1)   Un élément <rect> sans le />.
stroke="black" fill="red"> 1                            L’animation y est décrite.
   <animate 2                                      2)   Début de la spécification de
         attributeName="width" 3                        l’animation.
         attributeType="XML" 4                     3)   Spécification de l’attribut dont
         from="150" to="20" 5                           on veut faire changer la valeur.
         begin="0s" dur="5s" repeatCount="3"   6   4)   La largeur est un attribut XML.
<rect /> 7                                         5)   La valeur de debut et de fin de.
                                                        l’attribut.
                                                   6)   La date de debut, la durée et la
                                                        répétition de l’animation.
                                                   7)   Balise fermante de l’élément
                                                        <rect> qui est maintenant un
                                                        conteneur.
Un éditeur svg : webdraw1 (jascsoftware)



  •   Présentation
  •   Exemples
                     Présentation :
Il existe 3 modes d’utilisation:
      •canvas (on y crée sans codage des outils graphiques, images, etc..)
      •source (on y retrouve la source du document svg)
      •preview (on y voit ce que donne le fichier svg)
                        Mode canvas:
On y trouve une barre des taches pour tous les outils graphiques et une partie où on peut
sélectionner un élément et voir l’arborescence du document svg.
                        Mode source:
On y trouve le code source de votre document svg (avec les outils graphiques realisés
dans la partie canvas).
                      Mode preview:
C’est là que l’on peut voir une représentation du document svg (outils graphiques et
textes).
                                 Exemples
Exemple de l'image de la page d'accueil du site Web.

•1ère étape : On va créer le cercle autour duquel le texte va être "mis".
                               Exemples
Exemple de l'image de la page d'accueil du site Web.
•2ème étape : On va maintenant transformer ce cercle en un chemin et lui donner un ID
pour pouvoir lui faire "suivre" un texte par la suite.
                               Exemples
Exemple de l'image de la page d'accueil du site Web.
3ème étape : on va changer le style de ce chemin de tel sorte que l’on ne puisse plus le
voir.
                                Exemples
Exemple de l'image de la page d'accueil du site Web.
•4ème étape : il ne reste plus qu’à écrire le code permettant au texte de suivre ce chemin.
    <text style="font-family:Verdana;font-size:42.3333;fill:black">
    <textPath xlink:href="#chemincercle">Scalable Vector Graphics </textPath>
    </text>
                               Exemples
Exemple de l'image de la page d'accueil du site Web.
5ème étape : on va juste vérifier ce que donne ce fichier SVG pour éventuellement
modifier quelques choses pour un meilleur rendu.
Conclusion

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:18
posted:12/11/2011
language:Latin
pages:45