Vous êtes sur la page 1sur 50

| | 

  

Réalisé par Ahmed Yassin SABIRI


Proposé par M.Lazerek
Plan
ï SVG
ï Pourquoi SVG ?
ï Édition et Visualisation de SVG
ï Comment utiliser SVG
ï SVG²Bases : Structure et Imbrication d·un fichier SVG
dans HTML
ï Éléments de base: les balises, les attributs, et les Figures
géométriques
ï Structuration: éléments de groupage et références
ï Insertion d'images: l'élément image
ï Transformations
ï L·Animation
ï Conclusion
SVG
ï SVG signifie Scalable Vector Graphics. Ce langage permet
d'écrire des graphiques vectoriels 2D en XML.

ï Il a été inventé en 1998 par un groupe de travail (comprenant


Microsoft, Autodesk, Adobe, IBM, Sun, Netscape, Xerox, Apple,
, HP, ...) pour répondre à un besoin de graphiques légers,
dynamiques et interactifs.

ï Le SVG s'est très vite placé comme un concurrent de Flash et à


ce titre, Adobe a intégré ce langage dans la plupart de ses
éditeurs (dont les principaux sont Illustrator et Golive).
SVG

ï Les éléments SVG sont situés dans l·espace de noms


http://www.w3.org/2000/svg.

ï On sauvegarde généralement ce type de document avec


l·extension .svg.

ï Les éléments de rendu sont soit des figures géométriques


(rectangle, cercle«), soit du texte.
SVG
ï SVG admet trois types d'objets graphiques :

´ des contours graphiques vectoriels (par exemple, des


tracés consistant en lignes droites et courbes),
´ Des images
´ Du texte.

ï Les objets graphiques peuvent être regroupés,


stylés, transformés et composés dans des objets
précédemment rendus.
Pourquoi SVG ?
ï Les raisons pouvant pousser à l'adoption d'un format comme
SVG sont nombreuses :

´ Liées aux avantages du graphisme vectoriel .

´ Liées aux avantages particuliers du format SVG .


Pourquoi SVG ?
ï Les raisons Liées aux avantages du graphisme vectoriel :

´ Adaptation de l'affichage à des media variés et à des


tailles différentes .

´ Taille plus petits et plus compressible que les images JPEG


et GIF.

´ Possibilité d'appliquer des styles .

´ Possibilité d'indexer le texte qui fait partie du graphisme .


Pourquoi SVG ?
Les raisons Liées aux avantages particuliers du format SVG:
ï Insertion dans le monde XML/XHTML :

´ Génération de SVG avec XSLT à partir de données XML


avec une intégration totale dans XHTML, viewers SMIL, etc.

´ Utilisation de CSS .

´ Possibilité de mélanger des grammaires XML entre elles : un


document HTML peut contenir des graphiques SVG, des
expressions mathématiques en MathML, «
Pourquoi SVG ?
Les raisons Liées aux avantages particuliers du format SVG:

ï Modèle de couleurs sophistiqué, filtres graphiques (comme


dans PhotoShop) .

ï Possibilité d'indexage par les moteurs de recherche (c'est un


fichier texte !) .

ï Possibilité de partager du code (format texte non


propriétaire) .
Édition de SVG
ï Comme SVG est un format XML, n'importe quel éditeur de
texte fait en théorie l'affaire.

ï Il est néanmoins recommandé d'utiliser de préférence un


éditeur dédié à XML si l'on choisit cette option, comme
WebDraw , ou InkScape..

ï Adobe Illustrator, Corel Draw permettent aussi d'exporter au


format SVG et cela pour ne parler que des logiciels les plus
connus.

ï Google a lancé en 2010 un éditeur SVG en ligne.


Visualisation de SVG
ï SVG n'est actuellement pas supporté en natif par tous
les navigateurs.

´ Internet Explorer ne le supporte pas en natif. Il est donc


nécessaire d'installer soi-même un plugin.

´ FireFox , à partir de sa version 1.5, a entrepris de supporter en


natif le format SVG, mais son support reste partiel. Mais il donne
néanmoins un aperçu des fonctionnalités de ce format.

´ Opera a commencé à prendre en charge le SVG dans sa version


8.0. Le support SVG d'Opera inclut maintenant des animations.
Comment utiliser SVG?
ï Un fichier SVG est un document XML avec des balises
graphiques; il s' affiche par un navigateur commun avec un
plugiciel (plug-in), ou un lecteur spécial.

ï SVG peut être utilisé:

´ En tant que page web autonome.

´ Intégré aux balises: "img" src "objet", "applet", "iframe".

´ Inclus par un CSS ou en propriété XSL ou en XHTML.


SVG²Bases :Structure d'une simple page SVG
ï R 



ï C·est un fichier XML


<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>

ï Il faut alors ajouter le DocType correspondant à la version SVG utilisée :

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"


"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

ï Il est cependant préférable, en cours de développement, de copier


localement la DTD de SVG, et d'y accéder en local :
<!DOCTYPE svg SYSTEM "svg10.dtd">
SVG²Bases :Structure d'une simple page SVG
ï O   

ï La racine d'un fichier SVG est un élément svg. Mais il est nécessaire de
définir deux espaces de noms, un par défaut et un second permettant
d'avoir accès à d'autres fonctionnalités que nous verrons par la suite,
comme suit :
<svg xmlns="http://www.w3.org/2000/svg" xmlns:link="http:// www.w3.org
/1999/xlink">
(..)
</svg>
ï La taille de la fenêtre SVG est définie par les attributs width et height de
l'élément <svg> :

<svg width="400" height="250" xmlns="http://www.w3.org/2000/svg">


SVG²Bases: Imbrication d'un fichier SVG dans HTML

j  
  | 
ï $ moyen terme on devrait pouvoir insérer directement du code
SVG dans du code XHTML.
ï Certaines variantes de Mozilla possèdent cette fonctionnalité
avec un sous-ensemble de SVG.
ï La version canonique demande d'utiliser la balise <object>.
ï La solution la plus souple d'emploi reste d'utiliser un
environnement <iframe> :

<iframe src="monde.svg" height="540" width="95%" frameborder ="0">


<p>(Contenu alternatif: image+texte, texte seulement...)</p>
</iframe>
ï Exemple: iframe1.htm
Éléments graphiques de base: les balises

ï SVG dispose de quelques éléments de forme prédéfinis:


     

Texte ! " #

Rectangles !  #

Cercle ! #

Ellipse ! #

Line !#

Poly-lignes !
$#

Polygones !
$
#

Formes Arbitraires !  #
Éléments graphiques de base: les attributs

ï La plupart des éléments se partagent un nombre commun


d'attributs comme par exemple l'attribut id (identificateur) ou
encore style (les propriétés de style reprend la syntaxe et le
style de CSS2 )«

ï On trouve aussi :
´ X et y : pour le positionnement .
´ Width et height :pour la largeur et la hauteur .
´ stroke : qui définit la forme du bord d'un objet ;
´ fill : qui définit comment le contenu d'un objet est rempli
Éléments graphiques de base: les attributs

!  "%&'(&$%&)(&* %&+(&  %&,(&%& &


-%&&
-.* %
&,/0#

ï Ces deux codes, ils ont le même effet.

!  "%&'((&$%&)((&* %&+(&  %&,(& $%& 1


-1
-
* ,& 0#
Éléments graphiques de base: les attributs

ï 
 
ï fill permet de gérer le remplissage de l'élément.
ï Ses propriétés sont :
´ la couleur, avec les mêmes conventions de représentation
qu'en CSS (exemple précédent : fill="red").
´ une valeur d'opacité (opacity), comprise entre 0 et 1.

ï Voir l'exemple opacite.xml.


Éléments graphiques de base: les attributs


 
-
ï stroke permet de gérer l'entourage d'un élément de dessin.
ï Ses propriétés sont :

´ la couleur, avec les mêmes conventions de représentation


qu'en CSS.
´ une valeur d'opacité (opacity), comprise entre 0 et 1.

´ l'épaisseur (width) du trait.


Éléments graphiques de base: les attributs


 
-
ï stroke permet de gérer l'entourage d'un élément de dessin. Ses
propriétés sont :

ï la jonction de ligne (linejoin), qui peut prendre les valeurs miter,


round ou bevel.
´ Voir l'exemple stroke2.xml.

ï la forme des angles (linecap) qui peut être butt( les lignes
s'arrêtent brutalement à leur fin), round ou square (des carrés
sont tracés en bout de chaque ligne).
´ Voir l'exemple stroke1.xml.
Éléments graphiques de base: les Figures
géométriques
ï  2 
ï L'élément rect permet de définir des rectangles, y compris
avec des coins arrondis sans passer par une modification de
l'attribut stroke-linejoin.
ï Les attributs de base sont :
´ x et y, pour le positionnement du coin supérieur gauche.
´ width et height, pour définir respectivement largeur et hauteur.
´ rx et ry, qui sont les axes x et y de l'ellipse utilisée pour arrondir .
ï les nombres négatifs sont interdits, et on ne peut dépasser
la moitié de la largeur (longueur) du rectangle.
ï Voir l'exemple rectangle.xml.
Éléments graphiques de base: les Figures
géométriques
ï h   
ï Un cercle est créé par l'élément circle et une ellipse par l'élément
ellipse.
ï Leurs attributs sont :

´ cx et cy qui définissent les coordonnées du centre.


´ r qui définit le rayon du cercle.
´ rx et ry qui définissent les demi-axes x et y de l'ellipse.

ï Voir l'exemple cercleellipse.xml.


Éléments graphiques de base: les Figures
géométriques
ï   
$.
ï Une ligne est définie avec l'élément line, une poly-ligne par l'élément
polyline.
ï Les attributs de line sont :

´ x1 et y1, qui définissent les coordonnées du point de départ.


´ x2 et y2, qui définissent les coordonnées du point d'arrivée.

ï L'attribut de base de polyline :

´ points, qui prend comme valeur une suite de coordonnées.

ï Voir l'exemple lignes.xml.


Éléments graphiques de base: les Figures
géométriques
ï  
$

ï Un polygone est une courbe fermée, une poly-ligne une courbe
ouverte.

ï L'élément permettant de définir un polygone est polygon.

ï L'attribut de base de cet élément est points, qui s'utilise de la


même manière qu'avec une poly-ligne.

ï Voir des exemples dans le fichier polygones.xml.


Éléments graphiques de base: les Figures
géométriques
ï  3
   
ï L'élément path permet de définir des formes arbitraires. Ces
formes peuvent avoir un contour et servir de support pour
d'autres éléments (voir plus loin un exemple avec du texte).

ï les attributs de base sont :


´ d sert à définir les path data, autrement dit la liste de commande
permettant de tracer le chemin.

´ nominalLength, facultatif, permet de définir éventuellement la longueur


totale du chemin.
Éléments graphiques de base: les Figures
géométriques
ï  3
   
ï Les path data suivent les règles suivantes :

´ Toutes les instructions peuvent être abrégées en un seul caractère

´ Les espaces peuvent être éliminés

´ On peut omettre de répéter une commande

´ Il existe toujours deux versions des commandes :

— en majuscules : coordonnées absolues

— en minuscules : coordonnées relatives


Éléments graphiques de base: les Figures
géométriques
ï  3
   
ï Ces règles visent à diminuer au maximum la taille requise par la
description des chemins. Les commandes sont :
ï M ou m (moveto) x,y démarre un nouveau sous-chemin
ï Z ou z (closepath) ferme un sous-chemin en traçant une ligne
droite entre le point courant et le dernier moveto
ï lineto
´ L ou l (lineto) x , y trace une ligne droite entre le point courant et le
point (x,y).
´ H ou h (horizontal lineto) x trace une ligne horizontale entre le point
courant et le point (x,y0).
´ V ou v : (vertical lineto) y trace une ligne verticale entre le point
courant et le point ( x0,y ).
Éléments graphiques de base: les Figures
géométriques
ï  3
   
Éléments graphiques de base: les Figures
géométriques
ï  3
   

ï Un exemple de tracé de courbes est visible dans le fichier path.xml.


Éléments graphiques de base: les Figures
géométriques
ï  " 
ï L'élément balise text est considérée comme un objet graphique,
et est donc gérée comme tel.
ï Il possède deux attributs :

´ x et y, qui donnent les coordonnées du point de départ du texte. La mise


en forme est réalisée par des propriétés de style CSS.

ï $ l'intérieur d'un élément text, on peut ajuster la position du


texte, sa valeur ou la police grâce à l'élément tspan
Éléments graphiques de base: les Figures
géométriques
ï  " 
ï Le tspan possède, outre les attributs x et y:
´ des attributs dx et dy permettant de spécifier les —  à apporter
dans l'écriture du texte par rapport à la position par défaut.
´ Voir par exemple le fichier texte.xml.

ï Il est possible d'écrire un texte le long d'un chemin (path) défini


par ailleurs, par un élément path en appelant un élément
textPath.
´ Voir l'exemple textpath.svg.
Structuration: éléments de groupage et
références
ï SVG comme tout langage informatique de haut niveau ,définit
des éléments permettant de regrouper des objets, de les nommer
et de les réutiliser.
ï Il faut noter également que les objets SVG (comme les objets
HTML) héritent le style de leurs parents. Autrement dit, les styles
cascadent » le long de l'arborescence.
ï Voici la liste des éléments les plus importants:
´ Le fragment d'un document SVG : svg ;
´ Groupage d'éléments avec g ;
´ Objets abstraits (chablons) symbol ;
´ Section de définition def ;
´ Utilisation d'éléments use ;
´ Titre title et description desc.
Structuration: éléments de groupage et
références
ï R  
 |  4

ï svg est la racine d'un graphisme SVG.

ï Mais on peut aussi imbriquer des éléments svg parmi d'autres et


les positionner.

ï Chaque svg crée un nouveau système de coordonnées.

ï Ainsi on peut facilement réutiliser des fragments graphiques sans


devoir modifier des coordonnées.
Structuration: éléments de groupage et
références
ï O
  4

ï Cet élément sert à regrouper les éléments graphiques, ainsi que


vous avez pu le constater en regardant le code source des
exemples précédents.

ï Notez l'héritage des propriétés, mais aussi leur redéfinition


locale possible.
Structuration: éléments de groupage et
références
ï h|$
5 $
6

ï Cet élément permet de définir des objets graphiques


réutilisables en plusieurs endroits, avec l'élément use.

ï symbol ressemble à g, sauf que l'objet lui-même n'est pas


dessiné.

ï È È 
5 6

ï Cet élément ressemble un peu à symbol, mais est plus simple. De


même, l'objet défini n'est pas dessiné.
Structuration: éléments de groupage et
références
ï ù 7  

8  
ï use permet de réutiliser les objets suivants : svg, symbol, g, les
éléments graphiques et use.
ï Il s'agit donc d'un instrument de base pour éviter de répéter du
code.
ï Les objets réutilisés doivent avoir un identificateur XML.
ï Les attributs x, y, width et height permettent de redéfinir la taille
et la position de l'élément appelé.
ï xlink:href permet de renvoyer à l'élément défini. Voir par
exemple les fichiers use.svg.
Insertion d'images: l'élément image

ï Les formats supportés sont jpeg et png.


ï L'élément image permet également d'insérer un autre
fichier SVG.

ï Les attributs sont :

´ x et y, qui définissent la position de l'image ;

´ width et height, qui définissent la taille de l'image ;

´ xlink:href indique l'URI de l'image (équivalent de l'attribut src de


l'élément img en HTML.
Transformations

ï Jusqu'à présent, nous avons vu comment avec du SVG on peut


placer des éléments graphiques dans un cadre donné.

ï Il faut aussi savoir que le format SVG gère les systèmes de


coordonnées, et de faire une étude détaillée des
transformations et changements de repère.
Transformations
ï R  
 
4   


ï Cet attribut est disponible pour l'ensemble des éléments de


groupement (par exemple <g>), aussi bien que pour tous les
éléments graphiques (figures géométriques, texte, etc.).

ï Il accepte un certain nombre de paramètres permettant


d'opérer translations, rotations,...
Transformations
ï R  
 
4   


ï On peut l·utiliser avec translate

ï Exemple : <g transform="translate(50, 40)">, permet


d'opérer un déplacement du groupe de 50 pixels vers la
droite, et 40 pixels vers le bas.
Transformations
ï R  
 
4   


ï Ou l·utilisé avec scale:


ï Exemple: <rect width="100" height="50" x="10" y="50"
transform="scale(2)" /> ,
ï Elle va déclaré un rectangle de 100 pixels de large et 50 pixels
de haut, placé initialement au point de coordonnées (10,50). Une
fois mis à l'échelle, ici augmenté d'un facteur 2 dans les deux
directions, il devient un rectangle de 200 pixels de large et 100
pixels de haut, placé au point de coordonnées (20,100).
Transformations
ï O 2
 
4  9 
 

ï La syntaxe est rotate(<rotate-angle> [<cx>,<cy>]).

ï L'angle de rotation est indiqué en degrés.

ï cx et cy définissent le centre de rotation.

ï R   ! Par défaut, il s'agit de l'origine du système de


coordonnées locales,  du centre de l'objet !

ï Exemple: transformation.svg
L·Animation
ï On peut évidemment appliquer des effets d'animation sur les
éléments graphiques, grâce à un jeu d'éléments et d'attributs.

ï Elle se fait en utilisant un ensemble de balises et elle est basée


sur le temps (time-based)

ï Les graphiques SVG peuvent être animés par les éléments


d'animation SVG, mais aussi directement par l'interface du
DOM.
L·Animation
Il existe plusieurs balises, comme :

ï   


s'utilise pour animer un seul attribut, ou une seule propriété, au
cours du temps.

ï   
offre un moyen simple pour le paramétrage d·une seule valeur
d'attribut pour une durée spécifiée.

ï   


entraîne le déplacement d'un élément le long d'un tracé de
mouvement.
L·Animation
Il existe plusieurs balises, comme :

ï   h


spécifie une transformation de couleur au cours du temps.

ï    



anime un attribut de transformation sur un élément cible,
permettant de ce fait aux animations de contrôler translation,
changement d'échelle, rotation et/ou inclinaison.
Conclusion

ï SVG est un langage graphique extrêmement riche, dont il


est impossible de faire le tour en si peu de temps.
ï SVG est un langage de dessin vectoriel, normalisé de
XML.
ï SVG n·est pas un langage propriétaire et n·est pas encore
beaucoup employé
ï Je vous engage -une fois n'est pas coutume- à explorer la
spécification du W3C, qui fourmille d'exemples
particulièrement parlants des possibilités de ce langage.
Références
ï http://www.gchagnon.fr/cours/xml/svg.html

ï : h
  " R" O 

ï h
    ;4 h

ë   
 

Vous aimerez peut-être aussi