Scalable Vector Graphics

• Standard W3C (compatible avec HTML 5) pour les graphiques vectoriels
• Utilisable dans les navigateurs récents (Firefox, Chrome... et IE9)

La notion de graphisme vectoriel

• "Vectoriel" s'oppose à "bitmap" (matriciel)
• Une image "bitmap" : une mosaïque de points
• "Zoom" sur le bitmap problématique (d'où problèmes d'impressions, etc...)
• Bitmap bien adapté au photographies, et aux graphismes non zoomables (jeux 2D)
• Une image vectorielle est une liste de formes
• une forme est décrite par ses coordonnées.

  un cercle : un centre et un rayon

• on zoome sans problème
• on peut attacher des propriétés aux formes
• plus de calculs que pour le dessin bitmap

Quelques formats vectoriels

• Postscript : développé par Adobe, pour les imprimantes laser.
• WMF/EMF : formats Microsoft
• MacPict : ancien format Apple
• PDF : format vectoriel d'Adobe
• Adobe Illustrator
• SVG

Pendant longtemps, pas de standard. Raisons commerciales

Les formats sont plus ou moins développés :

• formats orientés lignes, sans transparence : MacPict et WMF
• formats avec courbes, sans transparence : Postscript, EMF
• formats avec courbes et transparence : AI, PDF, SVG...

Inclusion de SVG dans un document HTML

(Attention, dépend du navigateur)

• Comme image externe :

  	    <object data="fichier.svg" type="image/svg+xml" width="200" height="200"/>
  	  

  ou simplement :

  	    <img src="fichier.svg" alt=""/>
  	  

  Dans le code HTML :

Principes de SVG

(transposables à la plupart des formats vectoriels)

• On a un "style courant", qui indique comment les éléments seront dessinés.
• Le style précise la couleur, le remplissage, etc... des formes
• Les formes à dessiner sont représentées par des balises : <line>, <rect>, <circle>... <path>
• Par défaut, le système de coordonnées a son origine en haut à gauche et l'axe des y pointe vers le bas :
• Les coordonnées sont données par rapport à l'origine de l'image svg (pas dans le repaire du navigateur web

Formes géométriques simples

• Lignes :

  	    <line x1="10" y1="10" x2="200" y2="10"/>
  	  

• Rectangles :

• Cercles :

Styles

• Une forme peut être remplie :

  ou dessinée : voire même remplie et dessinée :
• Les propriétés qui définissent le style sont indiquées, comme en CSS, dans l'attribut style des balises.
• On peut associer une classe à une balise SVG, et donner le style dans les CSS

Couleur et remplissage

la propriété fill indique le remplissage. Elle peut valoir :

• none: la forme n'est pas remplie
• une couleur (même forme que dans les CSS)
• un gradient (voir par exemple http://www.w3schools.com/svg/svg_grad_linear.asp

Les propriétés définissant le contour :

• stroke : couleur du trait
• stroke-width: épaisseur du trait (avec ou sans unité)
• stroke-linecap : forme des extrémités des lignes (butt, round, square)
• stroke-dasharray : pointillés

Formes complexes : Chemins

• On décrit en gros le parcours d'un crayon qui dessinerait la forme
• Le dessin est décrit par le contenu de l'attribut "d"
• Exemple:

  	<svg xmlns="http://www.w3.org/2000/svg"  style="fill: none; stroke: red; stroke-width: 10px;">
  	  <path d="M10,10 L100,10 L100,100 L10,100 Z"/>
  	</svg>
  	

  1. M10,10 : on se place en 10,10 (sans dessiner)
  2. L100,10: on trace un trait de la position actuelle (10,10) vers la position 100,10 ;
  3. L100,100: on trace un trait de la position actuelle (100,10) vers 100,100 ;
  4. L10,100: on trace un trait de la position vers 10,100 ;
  5. Z: on ferme la forme (par une nouvelle ligne si nécessaire)

Courbes de bézier

Outre les commandes M, L, Z vues précédemment, les chemins peuvent comporter des courbes. Le système le plus général est celui des courbes de bézier cubique (commande C).

	  <path d="M100,100 C120,20 170,210 200,100"/>
      

Groupes

La balise <g> permet de créer un groupe. Les groupes permettent de partager des styles, et de déplacer plusieurs éléments en leur associant une transformation.

	  <svg xmlns="http://www.w3.org/2000/svg">
	    <g style="fill: red;" transform="translate(30, 30)">
	      <circle cx="10" cy="10" r="10"/>
	      <circle cx="30" cy="10" r="10"/>
	    </g>
	    <g style="fill: green;" transform="translate(100,60), rotate(30)">
	      <circle cx="10" cy="10" r="10"/>
	      <circle cx="30" cy="10" r="10"/>
	    </g>
	  </svg>
      

Le groupe vert est tourné de 30°, puis translaté en 100, 60.

SVG et Javascript

Rappel : quand un événement se produit (onclick, etc...) sur un élément HTML, on peut le passer au script qui le traite en nommant la variable event.

mais... quand un événement se produit sur un élément SVG, la variable à utiliser est evt

Exemple : un mouvement sur le grand cercle déclenchera l'affichage des coordonnées ; un clic sur ce même cercle fera passer le second cercle en bleu.

	<svg xmlns="http://www.w3.org/2000/svg">
	<circle cx="40" cy="40" r="40" onmousemove="montrerEvenement(evt)" onclick="mettreEnBleu(evt)"/>
	<circle id="cercle2" cx="100" cy="40" r="10"/>
	<text x="10" y="100" id="t1">un texte</text>
      </svg>
      <script>
	
	function mettreEnBleu(e) {
		document.getElementById('cercle2').setAttributeNS(null, "fill", "blue");
	}

	function montrerEvenement(e) {
		t=document.getElementById('t1');
		// innerHTML ne fonctionne pas ici
		t.removeChild(t.firstChild);
	        var evInfo = "click : "+ e.clientX+","+e.clientY;
	        t.appendChild(document.createTextNode("événement"+ e+  " " + evInfo));
	}
      </script>

      

Créer du SVG en javascript

• Pour créer du SVG à partir de Javascript, on utilise le DOM comme pour HTML
• Cependant, il faut préciser dans quel "namespace" (précisé par xmlns dans le code HTML/SVG) se trouvent les éléments
• On utilise les méthodes : createElementNS et createAttributeNS :

  	    var svgNS= ="http://www.w3.org/2000/svg";
  	    // Création d'une zone svg...
  	    var svgElement= document.createElementNS(svgNS, "svg");
  	    // Création d'un cercle dans la zone :
  	    var cercle= document.createElementNS(svgNS, "cercle");
  	    // pas de namespace sur les attributs...
  	    cercle.setAttributeNS(null, "cx", 10);
  	    cercle.setAttributeNS(null, "cy", 10);
  	    cercle.setAttributeNS(null, "r", 10);
  	  

Animation

Svg permet aussi des animations fluides sans utiliser javascript (ne fonctionne pas partout). On trouvera des exemples sur http://www.w3schools.com/svg/svg_examples.asp

Outils

• Inkscape
• Adobe Illustrator