larlet-fr-david-cache/cache/5a64a81a55d0b585485a573bbfd8a01c/index.md

title: SVG, le dessin vectoriel pour le web
url: http://www.alsacreations.com/tuto/lire/1421-svg-initiation-syntaxe-outils.html
hash_url: 5a64a81a55d0b585485a573bbfd8a01c

<p class="doc-abstract">SVG est un format d'images vectorielles basé sur le langage de balisage XML. Il répond parfaitement à des besoins graphiques légers, qu'ils soient statiques, dynamiques ou interactifs.</p>

<div class="doc-content"><p>
	<img alt="Logo SVG" class="right" src="http://www.alsacreations.com/xmedia/doc/large/svglogo.jpg"/><strong>SVG (Scalable Vector Graphics)</strong> est un format de dessin vectoriel, élaboré à partir de 1998 par un groupe de travail comprenant entre autre IBM, Apple, Microsoft, Xerox.</p>
<p>
	Il a mis du temps à être estimé à sa juste valeur sur le Web, notamment à cause de sa lente adoption par les navigateurs. En effet, Internet Explorer ne l'a pris en charge qu'a partir de sa version 9. Il était possible, au moyen d'extensions propriétaires, de parvenir à un rendu similaire mais leur installation était contraignante et paradoxale vis-à-vis de ce format ouvert. Pour ce qui est des autres acteurs majeurs, <a href="http://www.w3.org/TR/SVG11/">SVG dans sa version 1.1</a> est reconnu et interprété, à partir de Firefox 4+, Chrome 16+, Safari 5+ et Opera 9.5+ (voir <a href="http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28Scalable_Vector_Graphics%29#SVG_1.1_support">détail des moteurs de rendu</a> sur Wikipedia).</p>
<h3>
	Avantages</h3>
<p>
	<img alt="" class="right" src="http://www.alsacreations.com/xmedia/doc/full/avantagesvg1.png"/>SVG est un <strong>format d'image léger</strong> lorsqu'il s'agit de représenter des formes simples, car seules les informations décrivant ces formes sont stockées (coordonnées, couleurs, effets) contrairement aux images bitmap (JPG, PNG, GIF) qui doivent mémoriser le contenu pixel par pixel. Ce principe rend les images SVG étirables <strong>sans perte de qualité</strong>. Il est également une alternative à Flash pour les petites animations lorsqu'il est combiné à <abbr title="Synchronized Multimedia Integration Language">SMIL</abbr>, ou pour présenter des données qui doivent être dynamiques.</p>
<ul>
	<li>
		Son apprentissage est facile car basé sur une syntaxe simple et intuitive</li>
	<li>
		Il peut être édité par un éditeur de texte basique car c'est du <abbr title="eXtended Markup Language">XML</abbr></li>
	<li>
		Il peut être manipulé via JavaScript, car présent dans le <abbr title="Document Object Model">DOM</abbr></li>
	<li>
		Il peut être stylé grâce à <abbr title="Cascading Style Sheets">CSS</abbr></li>
</ul>
<p>
	SVG est dans la lignée de HTML : spécifié par le <abbr title="World Wide Web Consortium">W3C</abbr>, ouvert, libre, simple d'utilisation. Il interagit avec les différents langages qui composent nos pages web.</p>
<h3>
	Outils</h3>
<p>
	<img alt="Inkscape" class="right" src="http://www.alsacreations.com/xmedia/doc/medium/inkscape-logo.png"/></p>
<p>
	En tant que format vectoriel, SVG est éditable dans un logiciel tel qu'Illustrator ou Inkscape, pour ne citer que les deux plus célèbres protagonistes, ce qui rend triviale la création de formes complexes. Il existe d'autres outils pour manipuler ce format.</p>

<p class="center">
	<img alt="Inkscape" src="http://www.alsacreations.com/xmedia/doc/full/svg-inkscape.png"/></p>
<p class="center">
	Exemple de dessin dans Inkscape<br/>
	(sans écrire une seule ligne de code)</p>
<h3>
	Intégrer SVG à sa page web</h3>
<p>
	Il y a différentes possibilités plus ou moins pratiques et plus ou moins supportées, afin d'intégrer du SVG dans une page web.</p>
<h4>
	La balise <code>&lt;embed&gt;</code></h4>
<p>
	Cet élément non standard a été créé pour combler un manque du côté des spécifications du W3C. Employé en des temps obscurs, nous éviterons donc son utilisation.</p>
<h4>
	La balise <code>&lt;object&gt;</code></h4>
<p>
	Introduite en HTML4 la balise fourre-tout <code>&lt;object&gt;</code> peut également être utilisée pour importer du contenu SVG dans une page web.</p>
<pre class="code">
<code class="html">&lt;object type="image/svg+xml" data="kiwi.svg" width="200" height="100"&gt;
    Le navigateur ne peut lire ce kiwi
&lt;/object&gt;</code></pre>
<h4>
	La balise <code>&lt;svg&gt;</code></h4>
<p>
	HTML5 introduit un nouvel élément afin d'embarquer du contenu SVG dans une page web. L'élément <code>&lt;svg&gt;</code> permet de ne plus ce soucier du <a href="http://fr.wikipedia.org/wiki/Espace_de_noms">namespace</a> et d'intérargir avec les nœuds de SVG directement au sein du document HTML.</p>
<pre class="code">
<code class="css">&lt;svg width="200" height="100"&gt;
    ...
&lt;/svg&gt;</code></pre>
<h4>
	La balise <code>&lt;img&gt;</code></h4>
<p>
	Même s'il est possible d'inclure du SVG dans la balise <code>&lt;img&gt;</code>, c'est à éviter dans la mesure où cette balise n'a pas été faite pour accueillir des éventuels comportements scriptés. À partir du moment où vous utilisez Javascript avec SVG, il vaudra mieux éviter de l'inclure via la balise <code class="html">&lt;img&gt;</code>, pour une utilisation plus basique cette balise sera totalement appropriée. À noter que cette partie de la spécifications est toujours en brouillon.</p>
<pre class="code">
<code class="html">&lt;img src="kiwi.svg" alt="Un kiwi en SVG"&gt;</code></pre>
<h4>
	Par CSS</h4>
<p>
	Fonctionnant en synergie avec SVG, ont peut également inclure ce format comme ressource pour un background CSS. De plus, quand vous utilisez <code class="css">@font-face</code> vous  êtes également susceptible d'employer des fontes SVG.</p>
<pre class="code">
<code class="css">.kiwi {
    background : url("kiwi.svg") no-repeat left left ;
}</code></pre>
<p>
	<a class="demo" href="/xmedia/tuto/svg/integrationsvg.html">Voir les exemples</a></p>
<h4>
	État des lieux de l'implémentation d'SVG</h4>
<p>
	L'incontournable référence "When can I use..." permet de voir un état des lieu exhaustif au sujet de l'<a href="http://caniuse.com/#cats=SVG">implémentation de SVG</a> sur les différents navigateurs.</p>
<table class="pagetable">
	<caption>
		Support de SVG (versions minimales)</caption>
	<thead>
		<tr>
			<th scope="row">
				Navigateurs</th>
			<th scope="col">
				Versions</th>
			<th scope="col">
				Support basique</th>
			<th scope="col">
				Dans &lt;img&gt;</th>
			<th scope="col">
				CSS background</th>
			<th scope="col">
				Élément SVG inline</th>
			<th scope="col">
				Effet SVG</th>
			<th scope="col">
				SMIL</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td scope="row">
				<img alt="Firefox" height="40" src="http://www.alsacreations.com/xmedia/doc/small/Firefox_Transparent.png" width="40"/></td>
			<td>
				<strong>Firefox</strong></td>
			<td>
				3.6</td>
			<td>
				4</td>
			<td>
				4</td>
			<td>
				4</td>
			<td>
				3.6</td>
			<td>
				8</td>
		</tr>
		<tr>
			<td scope="row">
				<img alt="Chrome" height="40" src="http://www.alsacreations.com/xmedia/doc/small/Chrome_Transparent.png" width="40"/></td>
			<td>
				<strong>Chrome</strong></td>
			<td>
				16</td>
			<td>
				4</td>
			<td>
				5</td>
			<td>
				7</td>
			<td>
				16 (partiel)</td>
			<td>
				16</td>
		</tr>
		<tr>
			<td scope="row">
				<img alt="Internet Explorer" height="40" src="http://www.alsacreations.com/xmedia/doc/small/IExplorer_Transparent.png" width="40"/></td>
			<td>
				<strong>Internet Explorer</strong></td>
			<td>
				9</td>
			<td>
				9</td>
			<td>
				9</td>
			<td>
				9</td>
			<td>
				9 (partiel)</td>
			<td>
				/</td>
		</tr>
		<tr>
			<td scope="row">
				<img alt="Opera" height="40" src="http://www.alsacreations.com/xmedia/doc/small/Opera_Transparent.png" width="40"/></td>
			<td>
				<strong>Opera</strong></td>
			<td>
				11.6</td>
			<td>
				9</td>
			<td>
				9.5</td>
			<td>
				11.6</td>
			<td>
				11.6 (partiel)</td>
			<td>
				11.6</td>
		</tr>
		<tr>
			<td scope="row">
				<img alt="Safari" height="40" src="http://www.alsacreations.com/xmedia/doc/small/Safari_Transparent.png" width="40"/></td>
			<td>
				<strong>Safari</strong></td>
			<td>
				3.2</td>
			<td>
				4</td>
			<td>
				5</td>
			<td>
				5.1</td>
			<td>
				4 (partiel)</td>
			<td>
				4 (partiel)</td>
		</tr>
	</tbody>
</table>
<p class="info">
	<a href="http://fr.wikipedia.org/wiki/Synchronized_Multimedia_Integration_Language">SMIL </a>est une spécification du W3C qui <em>décrit le déroulement temporel et spatial des différents composants intégrés</em>, autrement dit les animations</p>
<p>
	Comme on peut le voir SVG et son système d'animation est plutôt bien implémenté dans les navigateurs actuels. On regrettera Internet Explorer qui traîne à implémenter la spécification SMIL même sous la version 10. On notera aussi le retard de Chrome au niveau des possibilités plus avancées de SVG telles que les masques, les filtres, les transformations, etc.</p>
<h3>
	Un fichier SVG, c'est quoi ?</h3>
<p>
	Voici la structure de base d'un fichier type SVG :</p>
<pre class="code">
<code class="html">&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"&gt;
&lt;svg width="300px" height="200px" xml:lang="fr"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
   &lt;title&gt;La kiwiParty, le web pulpeux&lt;/title&gt;
   &lt;desc&gt;Un logo animé en SVG&lt;/desc&gt;
&lt;/svg&gt;
</code></pre>
<p class="remarque">
	Si cette syntaxe vous semble familière c'est tout à fait normal : SVG s'appuie sur XML, famille sur laquelle est construite d'autres langages de balisage tels que XHTML.</p>
<p>
	Décomposons les différentes parties :</p>
<pre class="code">
<code class="html">&lt;?xml version="1.0" encoding="utf-8"?&gt;</code></pre>
<p>
	Tout document XML commence par ce que l'on appelle un prologue XML qui va indiquer la version utilisée ainsi que l'encodage, de préférence UTF-8 (il faut donc veiller à ce que l'éditeur utilise bien cette page de code pour le fichier).</p>
<pre class="code">
<code class="html">&lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"&gt;</code></pre>
<p>
	Vient ensuite le fameux <em>doctype</em> qui va spécifier aux navigateurs qu'ici on <em>parle</em> le SVG.</p>
<pre class="code">
<code class="html">&lt;svg width="400px" height="300px" xml:lang="fr"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
&lt;/svg&gt;</code></pre>
<p>
	À l'instar de l'élément <code class="html">html</code>, <code class="html">&lt;svg&gt;</code> représente la racine de notre document. C'est elle qui va contenir toutes les descriptions des formes graphiques affichées à l'écran.</p>
<pre class="code">
<code class="html">&lt;title&gt;La kiwiParty, le web pulpeux&lt;/title&gt;
&lt;desc&gt;Un logo animé en SVG&lt;/desc&gt;</code></pre>
<p>
	On peut également spécifier <code>&lt;title&gt;</code> et <code>&lt;desc&gt;</code> qui permettront de donner un titre et une description au document. Ces balises sont notamment utiles pour le référencement et certains agents utilisateurs.</p>
<h3>
	Les formes</h3>
<p>
	SVG propose plusieurs moyens de créer des formes, simples ou plus complexes. Chaque forme et plus généralement chaque élément SVG peut être accompagné d'attributs qui vont en décrire les propriétés.</p>
<h4>
	Le rectangle</h4>
<p>
	Pour dessiner un rectangle, on utilise la balise <code class="html">&lt;rect&gt;</code> en spécifiant sa longueur et sa largeur avec les attributs <code>width</code> et <code>height</code>. Les attributs <code>x</code> et <code>y</code> indiquent la position (horizontale et verticale) au sein de notre élément <code class="html">svg</code>.</p>
<pre class="code">
<code class="html">&lt;rect x="25px" y="25px" width="150" height="100"/&gt;
&lt;rect x="200px" y="75px" width="150" height="100"/&gt;</code></pre>
<p class="center">
	<img alt="SVG Rectangle" src="http://www.alsacreations.com/xmedia/doc/full/svg-rect.png"/></p>
<p>
	L'unité utilisée ici est le <code class="css">px</code> (pixel). Il est possible de ne pas la préciser, le <a href="http://dictionnaire.phpmyvisites.net/definition-PARSER-4876.htm">parseur </a>l'aurait compris ainsi par défaut. D'autres unités sont envisageables, principalement les mêmes qu'en CSS. Étant donné qu'aucune couleur n'a été précisée, le rectangle se retrouve noir.</p>
<p>
	<a class="demo" href="/xmedia/tuto/svg/rect.html">Exemple</a></p>
<h4>
	Le cercle et l’ellipse</h4>
<p>
	Pour dessiner un cercle rien de plus simple avec la balise <code class="html">circle</code>. L'attribut <code class="html">r</code> spécifie le rayon du cercle, et les attributs <code>cx</code> et <code>cy</code> les coordonnées du centre.</p>
<pre class="code">
<code class="html">&lt;circle cx="110" cy="110" r="50" /&gt;</code></pre>
<p class="center">
	<img alt="SVG Circle" src="http://www.alsacreations.com/xmedia/doc/full/svg-circle.png"/></p>
<p>
	<a class="demo" href="/xmedia/tuto/svg/circle.html">Exemple</a></p>
<h4>
	Les lignes</h4>
<p>
	Pour créer une ligne on utilise l'élément <code class="html">line</code> qui nécessite quatre paramètres obligatoirement.</p>
<ul>
	<li>
		<code class="html">x1</code> : spécifie la position du premier point sur l'axe des abscisses ;</li>
	<li>
		<code class="html">x2</code> : spécifie la position du second  point sur l'axe des abscisses ;</li>
	<li>
		<code class="html">y1</code> : spécifie la position du premier sur l'axe des ordonnées ;</li>
	<li>
		<code class="html">y2</code> : spécifie la position du second  point sur l'axe des ordonnées ;</li>
</ul>
<pre class="code">
<code class="html">&lt;line x1="50" y1="50" x2="150" y2="150" stroke="black" stroke-width="2" /&gt;
&lt;line x1="100" y1="50" x2="200" y2="150" stroke="red" stroke-width="10" /&gt;
&lt;line x1="150" y1="50" x2="250" y2="150" stroke="blue" stroke-width="5" stroke-dasharray="5,3,2" /&gt;</code></pre>
<p class="center">
	<img alt="SVG Ligne" src="http://www.alsacreations.com/xmedia/doc/full/svg-line.png"/></p>
<p>
	L'apparence du trait est définie par les attributs de couleur (<code>stroke</code>), de largeur (<code>stroke-width</code>) ou de pointillés (<code>stroke-dasharray</code>).</p>
<p>
	Notez que l'écriture avec l'attribut <code>style</code> est équivalente :</p>
<pre class="code">
<code class="html">&lt;line x1="50" y1="50" x2="150" y2="150" style="stroke:black;stroke-width:2px;" /&gt;
&lt;line x1="100" y1="50" x2="200" y2="150" style="stroke:red;stroke-width:10px;" /&gt;
&lt;line x1="150" y1="50" x2="250" y2="150" style="stroke:blue;stroke-width:5px;stroke-dasharray: 5,3,2" /&gt;</code></pre>
<h4>
	Fin de ligne</h4>
<p>
	Lorsqu'un trait mesure 1 pixel de large, son style de fin n'a que peu d'importance car il ne se visualise pas. En revanche dès qu'il est plus épais, il sera intéressant de pouvoir définir un style grâce à l'attribut <code>stroke-linecap</code> : coupé (<code>butt</code>), carré (<code>square</code>) ou arrondi (<code>round</code>).</p>
<pre class="code">
<code class="html">&lt;line x1="50" y1="50" x2="300" y2="50" stroke="#5a3434" stroke-width="20" <strong>stroke-linecap="butt"</strong> /&gt;
&lt;line x1="50" y1="100" x2="300" y2="100" stroke="#0a989a" stroke-width="20" <strong>stroke-linecap="round"</strong> /&gt;
&lt;line x1="50" y1="150" x2="300" y2="150" stroke="#933c8e" stroke-width="20" <strong>stroke-linecap="square"</strong> /&gt;</code></pre>
<p class="center">
	<img alt="SVG Stroke linecap" src="http://www.alsacreations.com/xmedia/doc/full/svg-stroke-linecap.png"/></p>
<p>
	<a class="demo" href="/xmedia/tuto/svg/stroke-linecap.html">Exemple</a></p>
<h4>
	Les chemins</h4>
<p>
	Les éléments précédents sont des formes simples qui ne permettent pas de créer des dessins plus complexes. Heureusement SVG a prévu l'élément <code class="html">path</code> pouvant correspondre à tout type de tracé (chemin). Cet élément n'a qu'un attribut obligatoire : <code class="css">d</code> (comme <em>data</em>).</p>
<pre class="code">
<code class="html">&lt;path d="M 100,180 L 140,0 L 180,180 L 220,0 L 260,180 L 300,0 L 330,180" style="fill:none; stroke:black"/&gt;</code></pre>
<p class="center">
	<img alt="" src="http://www.alsacreations.com/xmedia/doc/full/path1.JPG"/></p>
<h5>
	Les commandes de l'attribut d</h5>
<ul>
	<li>
		<code>Moveto</code> : noté <strong>M</strong>, prend comme paramètre les coordonnées du premier point du tracé ;</li>
	<li>
		<code>Lineto</code> : noté <strong>L</strong>, trace une ligne entre les dernières coordonnées mentionnés ;</li>
	<li>
		<code>ClosePath</code> : noté <strong>Z</strong>, ferme le tracé ;</li>
	<li>
		<code>Lineto horizontal</code> : noté <strong>H</strong>, raccourci pour noter des lingne horizontales ;</li>
	<li>
		<code>Lineto vertical</code> : noté <strong>V</strong>, raccourci pour noter des lignes verticales ;</li>
</ul>
<p>
	Afin de simplifier la tâche il est possible de rendre ces coordonnées <strong>relatives</strong>. Pour ce faire, il faudra veiller à indiquer les noms de commande en <strong>minuscules</strong>.</p>
<p>
	Sachez que l'on peut faire bien plus avec cet élément. Y compris des formes plus fluides notamment grâce aux arcs elliptiques et aux <a href="http://fr.wikipedia.org/wiki/Courbe_de_B%C3%A9zier">courbes de Bézier</a>, quadratiques et cubiques. La rédaction de telles formes géométriques fait appel à de fortes notions de mathématiques. Si vous avez besoin de formes de ce type, il est plus intéressent de passer par un logiciel de création vectorielle pour ensuite l'enregistrer en SVG. Si vous ouvrez le fichier avec votre éditeur de texte vous pourrez constater qu'un élément <code class="html">path</code> a été généré.</p>
<h3>
	Les remplissages</h3>
<p>
	À toutes ces formes s'appliquent des couleurs de remplissage ou de contours. Les attributs suivants en définissent l'apparence :</p>
<ul>
	<li>
		<code>stroke</code> : couleur du contour</li>
	<li>
		<code>fill</code> : couleur de remplissage</li>
	<li>
		<code>stroke-opacity</code> : opacité du contour (de 0 à 1)</li>
	<li>
		<code>fill-opacity</code> : opacité du remplissage (de 9 à 1)</li>
</ul>
<p>
	Dans toutes les situations, on peut utiliser des valeurs de couleurs sous forme de noms (<code>blue</code>, <code>red</code>, <code>black</code>) ou de codes couleurs héxadécimaux (<code>#xxxxxx</code>).</p>
<pre class="code">
<code class="html">&lt;circle cx="100" cy="100" r="80" stroke="#4b6c0b" fill="#9dcc41" /&gt;
&lt;circle cx="150" cy="100" r="80" stroke="#ff6000" fill="orange" fill-opacity="0.5" /&gt;

&lt;circle cx="300" cy="100" r="40" stroke="#4b6c0b" stroke-width="20" fill="transparent" stroke-opacity="0.5" /&gt;
&lt;circle cx="340" cy="100" r="40" stroke="#4b6c0b" stroke-width="20" fill="transparent" stroke-opacity="0.5" /&gt;</code></pre>
<p>
	Dans le cas présent, les deux premiers cercles disposent par défaut d'un contour de 1 pixel. L'un <em>recouvre </em>l'autre car son opacité de remplissage est de 50% grâce à <code>fill-opacity</code>. Les deux autres cercles se recouvrent également mais avec une opacité sur le contour (beaucoup plus large, sans remplissage).</p>
<p class="center">
	<img alt="SVG Stroke fill" src="http://www.alsacreations.com/xmedia/doc/full/svg-stroke-fill.png"/></p>
<p>
	<a class="demo" href="/xmedia/tuto/svg/stroke-fill.html">Exemple</a></p>
<h3>
	Les balises et attributs de base</h3>
<h4>
	Les attributs <code>id</code> et <code>class</code></h4>
<p>
	Comme en HTML, il est possible d'identifier un élément et un groupe d'élément de façon unique avec un <code>id</code>, ou de façon groupée avec un attribut <code>class</code>, cela servira notamment lors des événements (début et fin d'une animation), appliquer des masques, des styles CSS, des dégradés, réutiliser des éléments génériques, etc.</p>
<h4>
	L'élément <code class="html">g</code></h4>
<p>
	Permet de regrouper plusieurs formes dans un seul élément afin de pouvoir les réutiliser ensemble par la suite. L'élément <code class="html">g</code> (<em>group</em>) est souvent accompagné d'un identifiant <code>id</code> pour le désigner de manière unique.</p>
<h4>
	Les éléments <code class="html">defs</code> et <code class="html">use</code></h4>
<p>
	Dans certaines situations, il sera utile de déclarer (<em>définir</em>) un ensemble de formes ou d'autres informations en tant que modèles. Ceci évite de répliquer plusieurs fois les mêmes tracés et d'aboutir à une lourde redondance du code source. Par défaut, ces formes sont cachées, et regroupées entre les balises <code class="html">&lt;defs&gt;</code> et <code class="html">&lt;/defs&gt;</code>. Grâce à <code class="html">use</code> il est ensuite possible de réutiliser ces ensembles, par exemple en les affichant à des coordonnées différentes.</p>
<pre class="code">
<code class="html">  &lt;defs&gt;
      &lt;g id="tete"&gt;
         &lt;circle cx="40" cy="30" r="40" style="stroke:black; stroke-width: 1px;fill: #F4F4F4;" /&gt;
         &lt;rect width="100" height="75" x="-10" y="-20" style="fill:#F4F4F4"/&gt;
         &lt;circle cx="40" cy="30" r="50" style="stroke:black; stroke-width: 1px;fill: none;" /&gt;
         &lt;circle cx="20" cy="20" r="20" /&gt;
         &lt;circle cx="60" cy="20" r="15" /&gt;
         &lt;circle cx="35" cy="20" r="5" style="fill:white"/&gt;
         &lt;circle cx="50" cy="20" r="4" style="fill:white" /&gt;
     &lt;/g&gt;
  &lt;/defs&gt;
  &lt;use xlink:href="#tete" x="0" y="30" /&gt;
  &lt;use xlink:href="#tete" x="0" y="140" /&gt;
  &lt;use xlink:href="#tete" x="-100" y="80" /&gt;
  &lt;use xlink:href="#tete" x="100" y="80" /&gt;</code></pre>

<p class="center">
	<img alt="SVG Defs Use" src="http://www.alsacreations.com/xmedia/doc/full/svg-defs-use.png"/></p>
<p>
	<a class="demo" href="/xmedia/tuto/svg/1.html">Exemple</a></p>
<h3>
	Styles CSS applicables</h3>
<p>
	L'attribut style est applicable aux objets SVG. Il y a trois façons d'intégrer du style, comme en HTML.</p>
<p class="warning">
	Attention, cette pratique n'est <a href="https://jwatt.org/svg/authoring/#the-style-attribute">pas toujours recommandée</a>, les créateurs SVG préconisent plutôt de passer par les attributs SVG plutôt que d'embarquer tout le style dans l'attribut du même nom.</p>
<h4>
	Le style CSS en ligne</h4>
<p>
	Le style en ligne permet de déclarer grâce à l'attribut <code class="html">style</code> d'un élément une série de déclarations de style.</p>
<pre class="code">
<code class="html">&lt;rect x="25px" y="25px" width="200" height="100" <strong>style="fill:pink"</strong> /&gt;</code></pre>
<h4>
	Le style CSS interne</h4>
<p>
	Avec la balise <code class="html">style </code>nous pouvons, comme en HTML déclarer une feuille de style interne qui devra être nécéssairement enfant direct de l'élement <code class="html">svg</code>. Il faudra veiller également à baliser le contenu grâce à une section <code class="html">CDATA</code>. On précisera également son type MIME.</p>
<p class="remarque">
	Rappel : <a href="http://en.wikipedia.org/wiki/CDATA en">CDATA </a>fait partie de la syntaxe XML et permet d'éviter de devoir échapper les caractères spéciaux.</p>
<pre class="code">
<code class="html">&lt;svg&gt;
&lt;title&gt;Le web pulpeux&lt;/title&gt;
&lt;style type="text/css"&gt;
&lt;![CDATA[
#rect {
    fill : pink;
}
]]&gt;
&lt;rect x="25px" y="25px" width="100" height="50" id="rect" /&gt;
&lt;/svg&gt;</code></pre>
<h4>
	Le style CSS externe</h4>
<p>
	Avec SVG, pas de balise <code class="html">link</code> comme HTML pour faire le lien vers le fichier externe, mais on utilise, ce qu'on appel dans le jargon XML, une <abbr title="processing instruction">PI</abbr>. Tout ce que vous devez savoir c'est qu'elle possède deux attributs obligatoires, <code class="html">href</code> et <code class="html">type</code>.</p>
<pre class="code">
<code class="html">&lt;?xml-stylesheet type="text/css" href="styleSVG.css"?&gt;</code></pre>
<p>
	Cette dernière méthode, à l'instar des feuilles de styles CSS est la plus souple. Si vous souhaitez avoir une approche modulaire c'est avec cette méthode qu'il faudra travailler.</p>
<p>
	Les exemples suivants feront néanmoins appel aux styles en ligne dans un souci de lisibilité du code proposé.</p>
<p>
	Une fois le fichier CSS lié à SVG, il faut faire appel à des propriétés. Celles-ci sont spécifiques et ne sont pas transposables directement depuis ce que l'on connaît déjà du côté de HTML. L'exemple suivant utilise un fond vert avec une bordure noire de 2 pixels.</p>
<pre class="code">
<code class="html">&lt;rect x="25px" y="25px" width="100" height="50" id="rect" /&gt;
</code></pre>
<pre class="code">
<code class="css">#rect {
   fill: #B5CC45;
   stroke: black;
   stroke-width: 2px;
}</code></pre>
<p>
	Cet article est une introduction à SVG, si vous souhaitez découvrir les autres propriétés de style utilisables, consultez la <a href="http://www.w3.org/TR/SVG/styling.html">documentation officielle du W3C au sujet des styles SVG</a> ou encore la <a href="http://www.yoyodesign.org/doc/w3c/svg1/styling.html">version française</a>.</p>
<h3>
	L'animation SVG</h3>
<p>
	SVG propose plusieurs solutions afin de créer des animations :</p>
<ul>
	<li>
		Les animations des attributs de présentation par CSS via les propriétés <code class="css">transition</code> et <code class="css">animation</code>.</li>
	<li>
		Les animations des noeuds du DOM via <a href="http://fr.wikipedia.org/wiki/ECMAScript">ECMAScript</a> (<a href="http://fr.wikipedia.org/wiki/Javascript">Javascript</a>)</li>
	<li>
		Les éléments d'animations basés sur le language <a href="http://fr.wikipedia.org/wiki/SMIL)">SMIL</a></li>
</ul>
<p>
	Dans cet article consacré à SVG seront abordées les animations SMIL.</p>
<p>
	Développé par le W3C, le langage SMIL permet de changer les données graphiques vectorielles dans le temps. Il représente un jeu de fonctions d'animations XML. Concrètement, ses balises sont placées comme enfants directs de l'élément sur lequel on souhaite agir. Une propriété n'a pas besoin d'être déclarée pour pouvoir être animée.</p>
<h4>
	L'élément <code class="html">animate</code></h4>
<p>
	Utilisé pour animer un seul attribut ou une seule propriété au cours du temps.</p>
<pre class="code">
<code class="html">&lt;rect width="100" height="50"&gt;
    &lt;animate attributeName="width" attributeType="XML"
    fill="freeze"
    from="0" to="300"
    begin="0s" dur="3s"/&gt;
&lt;/rect&gt;</code></pre>
<p>
	<a class="demo" href="/xmedia/tuto/svg/2.html">Voir la démonstration</a></p>
<p>
	Un zeste de JavaScript et l'on peut obtenir une magnifique barre de chargement. SI vous êtes vigilants, vous aurez remarqué que <code class="html">rect</code> n'est plus une balise auto-fermante. En effet maintenant elle est devenue une balise ouvrante/fermante pour contenir <code class="html">animate</code>.</p>
<p>
	Voici les attributs utilisés :</p>
<ul>
	<li>
		<code class="html">attributName</code> : spécifie l'attribut ou la propriété CSS à animer ;</li>
	<li>
		<code class="html">attributType</code> : spécifie le type de nœud à traiter ;</li>
	<li>
		<code class="html">fill</code> : permet de geler l'animation arrivée à sa fin ;</li>
	<li>
		<code class="html">from</code> : la valeur de départ de l'animation ;</li>
	<li>
		<code class="html">to</code> : la valeur finale à atteindre ;</li>
	<li>
		<code class="html">begin</code> : l'instant de départ de notre animation;</li>
	<li>
		<code class="html">dur</code> : la durée de notre animation;</li>
</ul>
<p>
	On peut également commencer et finir une animation en fonction du début ou de la fin d'une autre animation, pour les faire de succéder. Afin d'obtenir cet effet, il faut renseigner l'animation incriminée par un <code>id</code>, pour ensuite passer cet <code>id</code> comme valeur de la propriété <code class="html">begin</code> de l'animation que l'on souhaite démarrer. On utilise également un pseudo « écouteur d'évènement » pour déclencher l'action.</p>
<p>
	Un exemple vaut mieux qu'un long discours :</p>
<pre class="code">
<code class="html">&lt;rect width="100" height="50"&gt;
    &lt;animate attributeName="width" attributeType="XML" id="rect1"
    fill="freeze"
    from="0" to="150"
    begin="0s" dur="1s"/&gt;
&lt;/rect&gt;
&lt;rect y="50" x="150" width="0" height="50" &gt;
    &lt;animate attributeName="width" attributeType="XML" id="rect2"
    fill="freeze"
    from="0" to="150"
    begin="rect1.end" dur="1s"/&gt;
&lt;/rect&gt;
&lt;rect y="100" x="0" width="0" height="50" &gt;
    &lt;animate attributeName="width" attributeType="XML" id="rect3"
    fill="freeze"
    from="0" to="150"
    begin="rect2.end" dur="1s"/&gt;
&lt;/rect&gt;
&lt;rect y="150" x="150" width="0" height="50"&gt;
    &lt;animate attributeName="width" attributeType="XML"
    fill="freeze"
    from="0" to="150"
    begin="rect3.end" dur="1s"/&gt;
&lt;/rect&gt;</code></pre>
<p>
	<a class="demo" href="/xmedia/tuto/svg/3.html">Voir la démonstration</a></p>
<h4>
	L'élément <code class="html">animateColor</code></h4>
<p>
	Comme son nom le suggère, cet élément est dédié à l'animation de la couleur. Fonctionnant de la même façon que <code class="html">animate</code> à cela près que les valeurs de <code>from</code> et <code>to</code> doivent être… des couleurs ! Cependant il semblerait qu'il ne soit pas encore totalement bien interpreté par Firefox.</p>
<pre class="code">
<code class="html">&lt;rect x="15" y="0" width="80" height="200" rx="20" ry="20" style="fill:black;"/&gt;
&lt;circle cx="55" cy="40" r="25" style="stroke:black; stroke-width: 1px;fill: #F4F4F4;"&gt;
    &lt;animateColor attributeName="fill" id="rect1"
    repeatDur="3"
    from="green" to="yellow"
    dur="3s"/&gt;
&lt;/circle&gt;
&lt;circle cx="55" cy="100" r="25" style="stroke:black; stroke-width: 1px;fill: #F4F4F4;" &gt;
    &lt;animateColor attributeName="fill" id="rect2"
    repeatDur="3"
    from="yellow" to="orange"
    begin="rect1.end" dur="3s"/&gt;
&lt;/circle&gt;
&lt;circle cx="55" cy="160" r="25" style="stroke:black; stroke-width: 1px;fill: #F4F4F4;" &gt;
    &lt;animateColor attributeName="fill" id="rect3"
    repeatDur="3"
    from="orange" to="red"
    begin="rect2.end" dur="3s"/&gt;
&lt;/circle&gt;</code></pre>
<p class="center">
	<img alt="" src="http://www.alsacreations.com/xmedia/doc/full/demo.JPG"/></p>
<p>
	<a class="demo" href="/xmedia/tuto/svg/4.html">Voir la démonstration</a></p>
<p>
	Il faut ajouter à cela deux nouveaux attributs :</p>
<ul>
	<li>
		<code class="html">repeatCount</code> : Spécifie le nombre de répétitions de l'action, prend comme paramètre soit un entier soit le mot clé <em>indefinite </em>;</li>
	<li>
		<code class="html">repeatDur</code>: Spécifie la durée durant laquelle se répète l'action, prend comme paramètre soit un entier soit le mot clé <em>indefinite </em>;</li>
</ul>
<h4>
	L'élément <code class="html">set</code></h4>
<p>
	Cet élément permet de fixer une valeur pendant une certaine durée de temps. Dans cet exemple le rectangle rose est affiché pendant 3 secondes. L'attribut CSS <code class="html">visibility</code> est modifié pendant ce laps de temps, ensuite il récupère sa valeur initiale déclarée dans l'élément <code class="html">g</code>.</p>
<pre class="code">
<code class="html">&lt;g style="visibility: hidden"&gt;
    &lt;rect x="25px" y="25px" width="200" height="100" style="fill :pink" /&gt;
    &lt;set attributeName="visibility" attributeType="CSS"
    to="visible"
    begin="0" dur="3s"/&gt;
&lt;/g&gt;</code></pre>
<h4>
	L'élément <code class="html">animateTransform</code></h4>
<p>
	Avant de vous parler de l'animation des transformations, il faut une brève introduction sur le concept de transformations en SVG. Il y a cinq valeurs possibles de transformations pour l'attribut <code class="html">transform</code> d'un élément SVG :</p>
<ul>
	<li>
		La translation (<code class="html">translate</code>);</li>
	<li>
		La rotation (<code class="html">rotate</code>);</li>
	<li>
		Le mise à l'échelle (<code class="html">scale</code>);</li>
	<li>
		L'inclinaison (<code class="html">skewX</code>, <code class="html">skewY</code>);</li>
</ul>
<p>
	Ces transformations telles quelles ne sont pas extraordinairement utiles. Mais les transformations peuvent être animées grâce à l'élément <code class="html">animateTransform</code> et là cela devient utile ! Pour la mise en œuvre, c'est similaire aux exemples précédents.</p>
<pre class="code">
<code class="html">&lt;rect width="200" height="100" style="fill:pink" &gt;
    &lt;animateTransform attributeName="transform" attributeType="XML" type="translate"
    from="-0,0" to="100,0"
    begin="0s" dur="2s"
    repeatCount="1"
    fill="freeze"
    /&gt;
&lt;/rect&gt;</code></pre>
<h4>
	L'élément <code class="html">animatemotion</code></h4>
<p>
	L'élément <code>animateMotion</code> permet de faire défiler un objet sur un <code class="html">path</code>. Il y a deux façons de faire. La première consiste à utiliser un attribut <code class="html">path<span> </span></code>dans l'élément <code class="html">animateMotion<span> </span></code>dans lequel on renseignera les coordonées du <code class="html">path</code>. La deuxieme à utiliser la balise <code class="html">mpath</code> comme enfant direct d'<code class="html">animateMotion</code> avec l'attribut <code>xlink:href</code> qui sera lié à l'<code>id</code> d'un <code class="html">path</code> existant.<code class="html"> </code></p>
<pre class="code">
<code class="html">&lt;path id="chemin" d="M 20,20 h 30 v 30 h 30 v 30 h 30 v 30 h 30 v 30 h 30 v 30 h 30 v 30 h 30 v 30" style="fill:none"/&gt;
&lt;g&gt;
    &lt;circle r="10" /&gt;
    &lt;animateMotion begin="0s" dur="10s" repeatCount="indefinite"&gt;
        &lt;mpath xlink:href="#chemin"/&gt;
    &lt;/animateMotion&gt;
&lt;/g&gt;</code></pre>
<h4>
	Aller plus loin avec le DOM</h4>
<p>
	SVG est un langage de dessin vectoriel qui offre quelque possibilités d'animation cependant il lui manque de l’interactivité. Le DOM de SVG est conforme aux aspect de la spécifications DOM2. Chaque paramétrage d'attribut et de style est accessible au moyen de JavaScript. On peut donc obtenir toute sorte d'animation et avoir un contrôle très précis sur celles-ci. Afin de s'y adresser on fait souvent appel à des frameworks complets.</p>
<h3>
	Et pour IE ?</h3>
<p>
	Malheureusement, SVG n'est pas directement utilisable sur IE8 et inférieurs. Heureusement des personnes bien intentionnées on réalisé des librairies pour combler ce manque. C'est notamment le cas du célèbre <a href="http://raphaeljs.com/">RaphaëlJs</a> qui rend pratiquable SVG sur IE6 et supérieur via JavaScript et l'utilisation de VML. D'autres librairies existent pour les navigateurs n'interprétant pas SMIL (ce qui est de plus en plus rare) notamment <a href="http://leunen.me/fakesmile/">FakeSmile.js</a>.</p>
<h3>
	Aller plus loin</h3>
<h4>
	Sources</h4>

<h4>
	Polyfills (alternatives)</h4>
<ul>
	<li>
		<a href="http://raphaeljs.com/">RaphaëlJS</a> : librairie Javascript pour tracer du SVG sur tous les navigateurs et du VML sur IE&lt;9</li>
	<li>
		<a href="http://code.google.com/p/svgweb/">SVGweb</a> : librairie offrant un repli vers Flash si nécessaire (beta)</li>
	<li>
		<a href="http://leunen.me/fakesmile/">Fakesmile</a> : produit des animations en JavaScript pour les navigateurs ne reconnaissant pas SMIL</li>
</ul>
<p>
<em>Tutoriel complété par Dew</em></p></div>