Accueil » Développement » SVG

Sommaire
  1. SVG c'est quoi ?
  2. Commencer avec SVG ?
  3. Structure d'un document SVG
  4. Eléments de base
  5. SVG et CSS
  6. Les formes de base
    1. Les rectangles et les carrés
    2. Les cercles et les ellipses
    3. Les lignes simples et multiples
    4. Les lignes polygonales et les polygones
  7. Texte avec SVG
  8. Les animations SVG
    1. Animation avec SMIL
      1. Elément Animate
      2. Elément set
      3. Elément animateTransform
      4. Elément animateMotion
    2. Animation avec CSS (Bientôt disponible)
    3. Animation avec JavaScript (Bientôt disponible)
  9. Les filtres SVG
  10. SVG Tiny 1.2 (Bientôt disponible)
  11. Présentation SVG 2 (Bientôt disponible)
  12. Aller plus loin

SVG c'est quoi ?

SVG pour "Scalable Vector Graphics" permet la création de dessins vectoriels à l'intérieur d'un document web.

Le principe du dessin vectoriel est de pouvoir l'agrandir à l'infini sans perte de qualité. Il est d'ailleurs possible d'utiliser Illustrator ou un autre programme comme Inkscape pour éviter de coder directement à la main, puisque l'on peut exporter un projet SVG en document web.

Ceci dit, à coeur vaillant rien d'impossible. En effet, l'apprentissage du SVG peut se révéler moins laborieux qu'on pourrait le penser. Basé sur XML, il peut être combiné avec JavaScript et CSS.

Commencer avec SVG ?

Avant de se lancer dans le SVG, il est impératif d'avoir des notions en XML, ainsi que des connaissances en CSS.

La syntaxe du SVG est donc le XML. Il peut aisément être traité grâce à XSLT ou d’autres langages de programmation via DOM ou SAX et inclu dans d’autres documents XML, XHTML ou XUL. SVG peut lui même inclure en son sein différents langages XML.

Pour bien commencer en SVG, il est important de comprendre les bases. Ainsi allons-nous débuter en découvrant comment est composée la structure d'un document SVG.

Structure d'un document SVG

Pour écrire du SVG, nous allons commencer par déclarer le prologue XML, puisque SVG est basé sur ce langage.


<?xml version="1.0" encoding="utf-8" standalone="no"?>

Ici, on indique la version de XML utilisée (version 1.0, la plus utilisée) et l’encodage qui, par défaut est UTF-8 (il est donc possible de ne pas le spécifier). L'attribut standalone permet de déterminer si la page XML est autonome ou si elle fait appel à un fichier externe. Par défaut, si cet attribut n'est pas renseigné, la valeur est yes. Attention : les attributs version, encoding et standalone doivent se suivre dans cet ordre.

Au final, seule la version du langage est obligatoire. Passons la syntaxe XML, et intéressons-nous au SVG.

Nous allons commencer par inclure l'élément <svg> et de conclure par la même balise fermée :


<svg>

//code ici

</svg>

Ensuite, il va falloir renseigner des attributs (ici l'ordre n'a pas d'importance) :


<svg width="" height="" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="x y L H">

</svg>

  1. xmlns : il s'agit de l'espace de nom du SVG.
  2. version : correspond à la version du langage (la plus utilisée)
  3. width : la largeur du document exprimée en pixels
  4. height : la hauteur du document exprimée en pixels.
  5. viewBox : avec un B majuscule. Permet de définir le système de coordonnées (x,y), gère l'aspect ratio et donc le redimensionnement (surtout sur Internet Explorer).

Et voici le même code réduit à sa plus simple expression, puisque HTML5 le permet :


<svg viewBox="x y L H">

</svg>

Vous pouvez omettre la hauteur et la largeur mais si vous souhaitez que le document soit responsive, il est préférable de renseigner ces deux attributs. Par ailleurs, sachez qu'il est tout à fait possible de mettre la hauteur et la largeur du SVG dans le code CSS.


svg {

height:2rem;
width:2rem

}

Eléments de base :

Les éléments SVG :

<title> : sert à indiquer le titre du document SVG. Il ne s'affichera pas sur la page mais dans la barre d'état du navigateur ou encore au survol de la souris.

<desc> : il s'agit de la description du dessin.


<svg>
<title>Mon titre<title>
<desc>Mon titre</desc>
</svg>

L'élément <g>

Cet élément permet de regrouper plusieurs formes (rectangle, cercle...) ou chemins (path) dans le but d'appliquer des styles aux éléments en son sein mais également afin de pouvoir les réutiliser ensemble par la suite avec l'élément <use>.


<g>
<path/>
<rect />
<circle />
</g>

Exemple simple avec l'élément <g> qui regroupe donc plusieurs formes. Vous pouvez remarquer que l'ensemble des formes prennent le style défini dans l'élément <g>.


<svg height="60" width="310" viewBox="0 0 310 50">
<g style="stroke:#000;stroke-width:3;fill:#7A5FFF">
<rect x="10" y="0" width="100" height="50" />
<rect x="120" y="0" width="50" height="50" />
<circle cx="210" cy="25" r="25" />
<circle cx="270" cy="25" r="25"/>
</g>   
</svg>

Les éléments <defs> et <use>

Comme on peut le deviner, l'élément <defs> va servir à définir ce que l'on souhaite dessiner dans le document SVG. Le contenu se trouvant à l'intérieur de l'élément ne sera pas affiché. Il doit être appelé avec une ancre rattachée à un id.

Exemple d'utilisation de l'élément <defs> (nous allons dessiner un cercle avec un dégradé linéaire) :


<svg width="112" height="112" viewBox="0 0 112 112">
<defs>
<linearGradient id="votreid">
<stop offset="20%" stop-color="#7A5FFF" />
<stop offset="90%" stop-color="#01FF89" />
</linearGradient>
</defs>
<circle cx="56" cy="56" r="56" fill="url(#votreid)"  />
</svg>

L'élement <use> permet de dupliquer des éléments à l'intérieur de la balise <defs>. Ceux-ci ne seront pas affichés s'ils ne sont pas reliés avec une ancre correspondant à l'id qui se trouve dans l'élément que l'on souhaite reproduire (par exemple l'élément <rect> ou l'élément <symbol>).

Dans l'exemple ci-dessous, nous allons utiliser les éléments <g>, <use> et <defs> :

Nous n'avons dessiné qu'un seul cercle avec l'élément <circle> qui se répète deux fois. Nous observons donc trois cercles qui s'affichent et que nous avons positionnés avec les coordonnées (on peut également utiliser l'attribut transform). Vous l'aurez compris, l'utilité de l'élément <use> est d'éviter la répétition du code.


<svg width="200" height="80" viewBox="0 0 200 80"> 
<defs>
<g id="nom_id">
<circle r="20"/>
</g>
</defs>
<use x="50" y="40" href="#nom_id" />
<use x="100" y="40" href="#nom_id" fill="var(--theme-couleur)"/>
<use x="150" y="40" href="#nom_id" fill="var(--theme-couleur1)"/>
</svg>

Inclure du SVG dans du xHTML (pour navigateurs modernes) :

Il existe différentes manières d'inclure un fichier SVG dans un document HTML, chacune ayant ses avantages et ses inconvénients.

Comme une image :


<img src="image.svg" alt="description de votre image">

Comme un arrière-plan (background-image) :


.class {

background-image: url(image.svg);

}

Directement dans le document (inline). Ci-dessous le logo du site en SVG :


<rect x="valeur" y="valeur" width="valeur" height="valeur"/>

Je ne m'attarde pas sur les balises <embed>, <object> et <iframe> qui ne sont plus ni d'actualité ni recommandées.

SVG et CSS :

Il y a plusieurs façons d'intégrer du CSS dans un document SVG.

Le style CSS en ligne :

Il s'agit simplement d'utiliser l'attribut style du SVG.


<rect style="fill:red;stroke:#000;stroke-width:5" />

Le style CSS interne :

On peut, comme en HTML, déclarer une feuille de style à l'intérieur du document SVG, comme suit :


<svg width="100" height="100" viewBox="0 0 100 100">  
<style>
<![CDATA[ #cercle{ fill : red;
stroke:#000;
stroke-width:5px } ]]> 
</style> 
<circle id=cercle r="25" cx="50" cy="50"/>
</svg>  

On prendra soin d'inclure l'attribut XML CDATA. Celui-ci permet d'éviter de devoir échapper les caractères spéciaux.

Le style CSS externe

Il n'existe pas de balise <link> en SVG, ce qui signifie qu'on ne peut faire un lien vers un fichier externe. Cependant, il est possible de passer par une PI (Processing-instruction), propre au langage XML. Elle se présente sous cette forme :


<?xml-stylesheet type="text/css" href="votre_style.css"?>

Nous venons de voir trois méthodes pour insérer du CSS dans un document SVG. Vous vous demanderez, à juste titre, laquelle choisir. Je vous répondrai que cela dépend de plusieurs facteurs, à savoir le type de projet et ce que vous souhaitez en faire. Dans tous les cas, vous pouvez utiliser chaque méthode, et même les trois à la fois.

Les formes de base :

-Les rectangles et les carrés

En SVG, un rectangle (ou un carré) se présente comme ceci :


<rect x="valeur" y="valeur" width="valeur" height="valeur"/>

Pour l'exemple, nous allons dessiner un carré bleu :


<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
<rect x=".625em" y=".625em" width="6.25em" height="6.25em"/>
</svg>

Pour dessiner ce carré, on utilise la balise <rect/> dans laquelle on renseigne les attributs tels que :

  1. x : détermine l’abscisse de départ
  2. y : détermine l’ordonnée de départ
  3. width : détermine la longueur
  4. height : détermine la hauteur

Dans cet exemple, nous avons donc dessiné un carré de 100px de hauteur et de largeur. Par défaut, il s'agit de l'unité pixel. Mais vous pouvez utiliser d'autres unités :

  1. Le millimètre : mm
  2. Le centimètre : cm
  3. Le pouce : in
  4. Le pica : pc
  5. Le point : pt
  6. em
  7. ex
  8. Le pourcentage %

Après avoir créer ce carré, nous allons le styliser. C'est là que le CSS entre en jeu, puisque nous utiliserons des propriétés CSS.


rect{fill:hsl(203,77%,61%)}

Ici, nous avons utilisé la propriété fill (à ne pas confondre avec l'attribut fill du SVG). Il en existe d'autres que nous verrons plus bas.

A titre de comparaison, en CSS, il suffirait de faire quelque chose comme ceci :


div{
margin:auto;
height:100px;
background:hsl(203,77%,61%);
width:100px}

A retenir à propos des rectangles et des carrés en SVG

  1. Si les attributs width et height ne sont pas renseignés, dans ce cas, ceux-ci seront définis à 100%.
  2. Les rectangles sont dessinés à partir de leur coin supérieur gauche (en haut à gauche).
  3. Par défaut, les rectangles sont noirs si aucun remplissage n’est indiqué.
  4. L’élément rectangle est "auto-fermant".
  5. Les rectangles qui apparaissent après dans le code seront positionnés au dessus des éléments qui les précèdent s’il y a chevauchement.
-Les cercles et les ellipses

En SVG, un cercle se présente comme ceci :


<circle cx="valeur" cy="valeur" r="valeur"/>

A titre de comparaison, en CSS, il suffirait de faire quelque chose comme ceci :


div{
margin:auto;
height:100px;
border-radius:50%;
background:hsl(203,77%,61%);
width:100px}

En SVG, une ellipse se présente comme ceci :


<ellipse cx="valeur" cy="valeur" rx="valeur" ry="valeur"/>

Ici, nous avons deux rayons représentant le demi-grand-axe (semi-major) et le demi-petit-axe (semi-minor) de l’ellipse.

A titre de comparaison, en CSS, il suffirait de faire quelque chose comme ceci :


div{
display:inline-block;
height:50px;
border-radius:50%;
background:hsl(203,77%,61%);
width:100px}

A retenir à propos des cercles et des ellipses en SVG

  1. L’élément circle est "auto-fermant".
  2. Le cercle est positionné à partir de son centre.
  3. La position du centre se calcule à partir du coin en haut à gauche.
  4. Comme chaque forme en SVG, la couleur par défaut est noire.
  5. Si l’un des attributs n’est pas renseigné, par défaut il équivaut à zéro.
-Les lignes simples et multiples

En SVG, une ligne se présente comme ceci :


<line x1="valeur" y1="valeur" x2="valeur" y2="valeur"/>

Une ligne consiste en une portion de droite délimitée par deux points, et chaque point est spécifié par deux coordonnées (x et y).

Contrairement aux autres formes, une ligne est invisible par défaut. Il faut ajouter une couleur pour que celle-ci apparaisse (ainsi qu'une largeur avec la propriété stroke-width).

Dans l'exemple ci-dessus, il nous faut rajouter la propriété stroke-linecap, sinon l'extrémité des coins sera coupée par le cadre SVG (viewBox).

A propos de cette propriété, sachez qu'elle possède trois valeurs :

  1. butt : par défaut
  2. round : l’extrémité est arrondie
  3. square : l’extrémité est un carré

A titre de comparaison, en CSS, il suffirait de faire quelque chose comme ceci :


div{
margin:auto;
height:5px;
background:hsl(203,77%,61%);
width:300px}

-Les lignes polygonales et les polygones

Une ligne polygonale est tout simplement un ensemble de lignes, ayant pour attribut points, comme ceci :

    
<svg width="400px" height="200px" viewBox="0 0 400 200">
<polyline points="20,60 40,80 60,60 80,80 100,60 120,80 140,60 160,80 180,60 200,80 220,60 240,80 260,60 280,80 300,60 320,80 340,60 360,80 380,60" style="fill:none;stroke:black;stroke-width:2px"/>
</svg>   

Sans remplissage Avec remplissage

En SVG, un polygone se présente comme ceci (ici un triangle équilatéral, trois côtés égaux) :


<polygon points="50 15, 100 100, 0 100"/>

A titre de comparaison, en CSS, il suffirait de faire quelque chose comme ceci :


div{
margin:auto;
width:0;
height:0;
border-style:solid;
border-width: 0 100px 173.2px 100px;
border-color:transparent transparent hsl(203,77%,61%) transparent} 

A retenir à propos des lignes polygonales et des polygones en SVG

  1. L’élément polygone est "auto-fermant".
  2. On construit un polygone en utilisant les coordonnées x et y, à partir du coin en haut à gauche. Celles-ci fonctionnent par paires, séparées par une virgule.
  3. Il n'y a pas de direction établie dans l'ordre des points. Par exemple, concernant le triangle plus haut, on aurait pu écrire points:0 100, 50 15, 100 100 au lieu de points:50 15, 100 100, 0 100.
  4. Vous pouvez vous passer de reprendre la première paire de coordonnées, la fermeture de la forme se fait automatiquement.

Voici une liste de polygones

Carré

Rectangle

Losange

Triangle équilatéral

Triangle isocèle

Hexagone

Etoile

Texte avec SVG :

S'il est assez aisé d'écrire (ou plutôt dessiner, puisqu'il s'agit non pas de texte à proprement parler, mais d'un élément graphique) du texte en SVG, il est important de prendre conscience que le SVG ne gère pas les blocs de texte (début du support avec la version 1.2, voir plus bas).

Texte simple avec SVG

<svg 
style="background:hsl(203,77%,61%);
margin:1rem auto" 
width="200" height="50" viewBox="0 0 200 50"> 
<text style="text-anchor:middle" fill="white" x="100" y="30">Texte simple avec SVG</text> 
</svg>

Contrairement au xHTML qui propose l'élément <p> afin de permettre d'y insérer un long paragraphe avec un retour à la ligne automatique, le SVG (dans sa version 1.1) quant à lui, ne gère le texte que ligne par ligne. Il faudra alors avoir recours à l'élément <tspan>.

Nouvel exemple de texte simple avec SVG

<svg 
style="background:hsl(203,77%,61%);
margin:1rem auto" 
width="200" height="50" viewBox="0 0 200 50"> 
<text 
style="text-anchor:middle" fill="white" x="100" y="30">Nouvel exemple de texte simple avec SVG</text> 
</svg>

Aïe ! Le texte est coupé. Il sort de la boite SVG et n'effectue donc pas de retour à la ligne. C'est embêtant. Pour la comparaison, voici la même chose en xHTML :

Exemple de texte simple en XHTML par rapport au texte SVG

L'élément <tspan> :

Dans un premier temps, utilisons cette balise dans un exemple simple, puis dans un second exemple, nous allons construire un paragraphe.

Un exemple classique Exemple d'un paragraphe SVG Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500.

<svg width="300" height="100" viewBox="0 0 300 100">  
<text style="text-anchor:middle;font-size:1.25rem" x="150" y="55">Un exemple <tspan style="fill:red">classique</tspan>
</text> 
</svg>

<svg style="border:1px solid #ddd;background:#e6e6e6" width="320" height="200" viewBox="0 0 320 200"> 
<text style="text-anchor:start;font-size:1.25rem" x="10" y="30"><tspan>Exemple d'un paragraphe SVG</tspan></text>
<line x1="0" y1="0" x2="0" y2="200" stroke="hsl(203,77%,61%)" stroke-width="8"/>
<text x="10" y="80">Le Lorem Ipsum est simplement du faux texte  
<tspan x="10" y="100">employé dans la composition et la mise en page.</tspan> 
<tspan x="10" y="120">Le Lorem Ipsum est le faux texte standard</tspan> 
<tspan x="10" y="140">de l'imprimerie depuis les années 1500.</tspan> 
</text> 
</svg>

Intéressons-nous au second exemple.

Mis à part cet inconvénient (qui sera donc corrigé dans la version 1.2 avec l'apparition de l'élément <textArea>), il est très simple de styliser un texte en SVG. Nous allons, pour ce faire, utiliser le langage CSS.

Mise en forme :

Il est ainsi possible de styliser les couleurs de trait et de remplissage, la taille, le style de font, la graisse, la police elle-même... Notez cependant que certaines propriétés ne fonctionnent pas, en particulier sous Firefox comme par exemple les propriétés word-spacing et letter-spacing.

Vous pouvez appliquer bon nombre de propriétés CSS.

Texte en SVG et CSS

<svg style="margin:2rem auto" width="600" height="80" viewBox="0 0 600 80"> 
<text x="50%" y="80%" 
tyle="text-anchor:middle;
fill:hsl(203,77%,61%);
stroke:hsl(203,50%,39%);
stroke-width:2;
font-size:3rem;
font-family:'Lobster',cursive;">Texte en SVG et CSS</text>
</svg>

Autre exemple de mise en forme CSS avec un dégradé :

Dégradé
Alignement :

Nous allons évoquer maintenant le centrage du texte. Pour un centrage horizontal simple et efficace, nous allons utiliser la propriété CSS text-anchor (sinon, vous pouvez centrer votre texte en utilisant les coordonnées x et y)

Il existe trois valeurs à cette propriété :

  1. Start : par défaut
  2. Middle : milieu
  3. End : fin

Regardez l'exemple ci-dessous :

Mon texte en SVG Mon texte en SVG Mon texte en SVG

NB : les cercles bleus indiquent la position du texte. Vous constatez bien que le premier texte est centré par rapport à la première lettre. Le deuxième texte est bien aligné en son centre. Enfin le dernier texte est centré par rapport à la dernière lettre.

Le centrage vertical est un peu plus complexe. Il existe trois propriétés pour le gérer.

Dominant-baseline comprend les valeurs suivantes :


<svg width="800" height="220" viewBox="0 0 800 220">  
<text x="0" y="0">SVG</text>  
<text x="100" y="0" dominant-baseline="hanging">SVG (hanging)</text>  
<text x="300" y="0" dominant-baseline="mathematical">SVG (mathematical)</text>  
<text x="0" y="220" dominant-baseline="central">SVG (central)</text>  
<text x="200" y="220" dominant-baseline="middle">SVG (middle)</text>  
<text x="400" y="220" dominant-baseline="text-before-edge">SVG (text-before-edge)</text>  
</svg>

On doit utiliser la propriété baseline-shift qui comprend les mots-clefs suivant :

  1. baseline : valeur par défaut.
  2. sub : permet de mettre le texte en indice.
  3. super : permet de mettre le texte en exposant.

Cette propriété permet de décaler la ligne de base du texte sur lequel il est appliqué par rapport au parent. Sachez que la propriété baseline-shift ne s’applique pas directement à l’élément text. Utilisez les unités relatives : em (ou rem) et ex.

Il faut donc envelopper le texte que l’on souhaite dans un tspan qui sera décalé par rapport au texte parent.

Texte avec l'unité rem Texte avec l'unité ex e = mc 2
Décalage et rotation :

En utilisant les attributs dx et dy sur les éléments <text> et <tspan>, nous allons pouvoir effectuer un décalage sur les axes x et y. Et combinés à l'élément <rotate>, nous pourrons faire pencher tout ou partie d'un élément graphique.

Dans l'exemple ci-dessous, nous allons décaler les lettres de l'acronyme SVG :

Texte en S V G
TEXTE

Vous pouvez appliquer une transformation sur chaque lettre, comme sur l'exemple ci-dessus, ou indiquer une rotation à l'ensemble du texte comme ci-dessous :

Texte SVG

Une autre façon d'obtenir un texte en position verticale :

Texte vertical

Les animations SVG

Animation avec SMIL

Il est possible d'animer du SVG à partir d'éléments du langage SMIL (Synchronized Multimedia Integration Language). Pour faire simple, SMIL (qui repose sur XML) permet de réaliser ce que ne peut faire CSS, à savoir contrôler les animations, créer des intéractions... Et c'est là tout son intérêt.

Mais avant de nous pencher plus en détails sur ce langage, il est important de préciser que la compatibilité des navigateurs est assez bonne. Sachez également que tous les attributs SVG ne peuvent pas être animés.

Enfin, ce langage a été déprécié sur Chrome et Opera (edit : la restriction a été levée) et n'est pas à l'étude pour Edge.

Parmi les éléments pouvant être animés, on trouve notamment :

  1. <svg>
  2. <g>
  3. <a>
  4. <path>
  5. <image>

La liste complète des éléments pouvant être animés

Il existe 4 balises (Il en existait cinq, mais <animatecolor> a été dépréciée depuis. On utilisera alors <animate>.) pour créer une animation SMIL :

  1. <animate>
  2. <set>
  3. <animateTransform>
  4. <animateMotion>

Détaillons ci-dessous chacun de ces quatre éléments :

L’élément <animate> :

Pour créer une animation, nous aurons besoin de spécifier les attributs suivants :

  1. attributName : spécifie l'attribut ou la propriété CSS à animer
  2. attributType : spécifie le type de noeud à traiter
  3. fill : permet de geler l'animation arrivée à sa fin
  4. from : la valeur de départ de l'animation
  5. to : la valeur finale à atteindre
  6. begin : l'instant de départ de notre animation
  7. dur : la durée de notre animation

Cliquez sur le carré ci-dessous :

Vous pouvez remarquer que le carré se déplace de gauche à droite, puis s'arrête. Pour ce faire, on utilise l'attribut fill auquel on ajoute la valeur freeze.


<svg width="100%" height="100"> 
<rect id="votreid" width="50" height="50" x="25" y="0" fill="#0099cc" />
<animate 
href="#votreid"
attributeName="x"
from="0"
to="450" 
dur="1s"
begin="click"
fill="freeze" />
</svg>

Cliquez sur le carré ci-dessous :

Vous pouvez remarquer que le carré se déplace de gauche à droite puis revient à son état initial. Ici, nous avons utilisé la valeur remove.


<svg> 
<circle id="votreid" r="30" cx="50" cy="50" fill="orange" />
<animate 
href="#votreid"
attributeName="cx"
from="0"
to="450" 
dur="1s"
begin="click"
fill="remove" />
</svg>

Répétition d’animation :

L'exemple ci-dessous vous montre l'utilisation de l’attribut repeatCount sur un dégradé lineaire :


<svg> 
<circle r="256" cy="256" cx="256" fill="url(#lgrad3)"/>
<defs>
<linearGradient id="lgrad3" x1="0%" y1="100%" x2="100%" y2="0%">
<stop offset="0%" 
style="stop-color:hsl(136,70%,41%)">
<animate 
attributeName="stop-color" 
values="hsl(136,70%,41%);
hsl(60,100%,50%);hsl(136,70%,41%)" 
dur="6s" 
repeatCount="indefinite"></animate>
</stop>
<stop offset="100%" 
style="stop-color:hsl(60,100%,50%)">
<animate attributeName="stop-color" 
values="hsl(60,100%,50%);
hsl(136,70%,41%);
hsl(60,100%,50%)" 
dur="6s" 
repeatCount="indefinite"></animate>
</stop>
</linearGradient>
</defs>
</svg>

Cet attribut peut se définir soit avec un nombre entier supérieur à zéro (qui va indiquer le nombre de fois où l'animation va se répéter), soit avec la valeur indefinite (indéfiniment).

L’élément <set> :

Il s'agit d'un raccourci de l'élément <animate>. Il définit simplement un attribut sur une certaine valeur après qu'un intervalle de temps spécifique est passé. On utilisera cet élément lorsque l'on souhaite indiquer des attributs et ou des propriétés qui ne soient pas numériques.

cliquez Réessayer

<svg width="200" height="120" viewBox="0 0 200 120">
<rect style="cursor:pointer" id="anim" x="10" y="10" width="80" height="80" fill="#01FF89" >
<set begin="click" attributeName="fill" to="#7A5FFF" />
</rect>
<text x="50" y="90%" text-anchor="middle">cliquez</text>
<set begin="reset.click" attributeName="fill" to="#01FF89" href="#anim" />
<text style="cursor:pointer" id="reset" x="80%" y="90%" text-anchor="middle">Reset</text>
</svg>

L’élément <animateTransform> :

Cet élément permet d’animer des objets grâce à l’attribut de transformation SVG <transform>. Les valeurs pour cet élément sont :

  1. translate
  2. rotate
  3. scale
  4. skewX
  5. skewY
rotate translate scale skewx skewy
L’élément <animateMotion> :

L'élément animateMotion permet de faire se déplacer un objet le long d'un chemin (attribut path). Il existe deux façons pour dessiner un chemin avec cet attribut.

Soit on renseigne les coordonnées dans l'attribut path comme dans l'exemple ci-dessous :


<svg width="600" height="300" viewBox="0 0 600 300">
<circle r="20" fill="var(--theme-couleur)" >
<animateMotion begin="0" dur="5s" repeatCount="indefinite" path="M 0,0 S 100,500 500,0"/>
</circle>
</svg>

Soit on renseigne les coordonnées dans l'attribut mpath comme dans l'exemple ci-dessous :


<svg width="600" height="300" viewBox="0 0 600 300">
<path id="exemple" d="M 0,0 S 100,500 500,0" style="fill:none"/>
<g>
<circle r="20" fill="var(--theme-couleur)"/>
<animateMotion begin="0" dur="5s" repeatCount="indefinite">
<mpath href="#exemple"/>
</animateMotion>
</g>
</svg> 

Les filtres SVG

Les filtres SVG permettent de changer, très simplement, la couleur ou l'apparence d'une image/photographie avec du code.

Exemple d'un filtre effet drop shadow (ombre portée) sur une image en png :

Exemple filtre drop shadow

<svg width="0" height="0">
<filter id="drop-shadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="5"/>
<feOffset dx="5" dy="15" result="offsetblur"/>
<feFlood flood-color="#000" flood-opacity="0.5"/>
<feComposite in2="offsetblur" operator="in"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</svg> 

Voir aussi sur ce blog les filtres CSS.

Aller plus loin :

Quelques développeurs spécialisés dans le SVG à suivre :
  1. Amelia Bellamy-Royds
  2. Chris Lilley
  3. Sara Soueidan
Articles à lire :

Guide des animations SVG (FR)

Article sur alsacreations (FR)

Autre article sur SMIL (EN)

Infos sur l'élément use (EN)

Animations avec SVG (FR)

A voir sur ce blog : Ressources SVG.

Icônes svg à télécharger gratuitement sur ce blog.

Il est possible d'appliquer les mêmes genres d'effets avec canvas.

En savoir plus sur les filtres svg (EN)

Le svg sur texte par css-tricks (EN)

Expérience effet sur texte svg (EN)

Expérience effet images svg (EN)

Quelques infos intéressantes sur le svg et le responsive design.

Un bel exemple de l'utilisation du svg avec cet ordinateur ou encore avec cet avion en SVG.

Pour ceux qui se posent la question : svg ou canvas ? (FR)

Essayez l'application mondrian.io ou sta.sh/muro , qui vous permettra de créer et d'éditer des fichiers vectoriels.

Générateur de background svg