Blog
Aller au contenu

Guillaume Duverger

Développement & graphisme


Accueil » Développement » Apprendre SVG

Sommaire
  1. SVG c'est quoi ?
  2. Commencer avec SVG
  3. Structure d'un document SVG
  4. Les formes SVG
  5. Les éléments et attributs SVG
  6. Texte avec SVG
    1. L'élément tspan
    2. Mise en forme du texte SVG
    3. Positionnement du texte SVG
  7. SVG et CSS
    1. Le style CSS en ligne
    2. Le style CSS interne
    3. Le style CSS externe
    4. Piorité des styles
  8. SVG et JavaScript
  9. Dégradés et motifs avec SVG
  10. Masque et découpage avec SVG
  11. Les filtres SVG
  12. Les animations SVG
  13. SVG Morphing
  14. SVG Tiny 1.2
  15. Présentation SVG 2
  16. Aller plus loin
Télécharger ce cours en pdf

SVG c'est quoi ?

SVG 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/ou CSS.

👉 Commencer avec SVG

Avant de se lancer dans le SVG, il est donc impératif d'avoir des notions en XML, ainsi que des connaissances en CSS. En effet, les langages SVG et CSS sont étroitement liés.

La syntaxe du SVG 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, comme nous l'avons déjà dit, SVG est basé sur ce langage.



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


Dans le code ci-dessus, 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 la balise <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>


  • xmlns : il s'agit de l'espace de nom du SVG.
  • version : correspond à la version du langage.
  • width : la largeur du document exprimée en pixels.
  • height : la hauteur du document exprimée en pixels.
  • 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 le navigateur 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 (H) et la largeur (L) 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

}


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 avec l'élément remplacé HTML img :



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


Comme un arrière-plan (propriété CSS background-image) :



.class {

background-image: url(image.svg);

}


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

Exemple svg inline

Le code ci-dessous :



<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 64 64">
<path d="M32.268 60.913L7.096 46.69l-.268-28.912 24.904-14.69L56.904 17.31l.268 28.913z" fill="none" stroke-width=3 stroke="url(#grad2)"/>
<path d="M38.336 27.87c-2.278-2.274-5.254-3.426-8.23-3.426-7.82 0-11.714 5.828-11.714 12.135.002 5.89 3.39 11.43 11.714 11.43 3.893 0 6.648-1.506 8.832-4.035V34.53H29.44v3.778h5.668v3.97c-1.742 1.41-3.26 1.794-5.002 1.794-5.508 0-7.63-3.81-7.63-7.493 0-4.612 2.88-8.262 7.63-8.262 1.93 0 4.145.8 5.633 2.242l2.595-2.692z" fill="url(#grad)"/>
<path d="M34.4 15.992h-8.802v22.412H34.4c7.845 0 11.3-5.732 11.206-11.398-.096-5.54-3.522-11.015-11.205-11.015zm-4.61 4.002h4.61c4.87 0 6.918 3.49 7.014 6.98.096 3.65-1.92 7.363-7.01 7.363h-4.61V19.994z" fill="url(#grad1)"/>
<path d="M25.597 34.348h9.605v4.056h-9.605z" fill="none"/>
<defs>
<linearGradient id="grad" x1="0%" y1="100%" x2="100%" y2="0%">
<stop offset="50%" stop-color="#7A5FFF"/>
<stop offset="100%" stop-color="#01FF89"/>
</linearGradient>
</defs>
<defs>
<linearGradient id="grad1" x1="0%" y1="100%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#7A5FFF"/>
<stop offset="100%" stop-color="#01FF89"/>
</linearGradient>
</defs>
<defs>
<linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="50%" stop-color="#7A5FFF"/>
<stop offset="50%" stop-color="#01FF89"/>
</linearGradient>
</defs>
</svg> 


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

👉 Les formes SVG

Dans ce chapitre, vous pourrez découvrir les formes de base en SVG : rectangles, cercles, lignes... ainsi que des formes plus complexes avec les chemins.

Lire le chapitre

👉 Les éléments et attributs SVG

Nous aborderons dans ce chapitre les éléments de base en SVG ainsi que les principaux attributs.

Lire le chapitre

👉 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).

Exemple Texte avec SVG


<svg style="background: #7A5FFF;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.

Dans l'exemple ci-dessous, le texte est tronqué. Il sort de la boite SVG et n'effectue donc pas de retour à la ligne. C'est embêtant.

Exemple Texte 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>


Pour la comparaison, voici la même chose en xHTML :

Exemple Texte avec HTML


<div>
<p>Exemple de texte simple en XHTML par rapport au texte SVG</p>
</div>


Il faudra alors avoir recours à l'élément tspan.


L'élément tspan :

Dans un premier temps, utilisons cet élément dans un exemple simple, puis dans un second exemple, nous allons construire un paragraphe.

Exemple Texte SVG tspan


<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>


Vous pouvez remarquer que l'élément tspan s'apparente à l'élément span en CSS.

Intéressons-nous maintenant au second exemple où il s'agit de construire un paragraphe.

Exemple paragraphe SVG tspan


<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="#7A5FFF" 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>


Mis à part l'inconvénient du tronquage (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 du texte SVG :

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.

Ci-dessous un exemple basique. Ici, nous avons changé la couleur du texte, ajouté une bordure colorée, souligné le texte et changé la police de caractère :

Exemple texte SVG CSS


<svg width="600" height="80" viewBox="0 0 600 80"> 
<text x="300" y="60" 
style="
text-anchor:middle;
fill:#01FF89;
stroke:#7A5FFF;
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é :

Exemple texte dégradé SVG


<svg height="100" width="600" viewBox="0 0 600 100">
<defs>
<linearGradient id="rainbow" x1="0" x2="0%" y1="0" y2="100%">
<stop stop-color="hsl(203,77%,61%)" offset="0%"/>
<stop stop-color="hsl(318, 58%, 56%)" offset="80%"/>
</linearGradient>
</defs>
<text style="text-anchor:middle;font-family:'Archivo Black';text-transform:uppercase" fill="url(#rainbow)" font-size="80" x="50%" y="80">Dégradé</text>
</svg>



Positionnement du texte SVG :

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 attributs SVG x et y)

Il existe trois valeurs à cette propriété :

  • start : par défaut
  • middle : milieu
  • end : fin

Regardez l'exemple ci-dessous :

Centrer un texte 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.



<svg width="600" height="200" viewBox="0 0 600 200">
<text x="300" y="50">Mon texte en SVG</text>
<text x="300" y="110">Mon texte en SVG</text>
<text x="300" y="170">Mon texte en SVG</text>
<circle cx="300" cy="50" r="5" fill="blue"/>
<circle cx="300" cy="110" r="5" fill="blue"/>
<circle cx="300" cy="170" r="5" fill="blue"/>
</svg>




text:nth-child(2){

text-anchor:middle

}

text:nth-child(3){

text-anchor:end

}



Le centrage vertical est un peu plus complexe. Il existe trois attributs SVG pour le gérer.

L'attribut dominant-baseline comprend les valeurs suivantes :

  • hanging
  • mathematical
  • central
  • middle
  • text-before-edge
Exemple centrage vertical SVG

💡 NB : La bordure noire sert à montrer comment se comporte les différentes valeurs de l'attribut dominant-baseline.

L'attribut baseline-shift permet de décaler la ligne de base du texte sur lequel il est appliqué par rapport au parent.

Elle comprend les mots-clefs suivant :

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

Sachez que l'attribut baseline-shift ne semble fonctionner ni sur Firefox ni sur IE/Edge.

Exemple baseline-shift SVG


<svg height="100" width="100" viewBox="0 0 100 100">
<text x="10" y="25" font-size="20">
<tspan>e = mc 
<tspan baseline-shift="super">2</tspan>
</tspan>
</text>
</svg>


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'attribut 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 :

Exemple espacement texte SVG


<svg width="400" height="100" viewBox="0 0 400 100"> 
<text style="font-size:32px" x="30" y="60">Texte en
<tspan dx="20">S</tspan> 
<tspan dx="20">V</tspan> 
<tspan dx="20">G</tspan> 
</text> 
</svg>


Vous pouvez appliquer une transformation sur chaque lettre, comme sur l'exemple ci-dessous :

Exemple transformation texte SVG


<svg style="margin:1rem auto" width="300" height="100" viewBox="0 0 300 100"> 
<text style="font-size:32px" x="100" y="50" rotate="5 10 15 20 25 30">TEXTE</text> 
</svg>


Ou indiquer une rotation à l'ensemble du texte comme ci-dessous avec l'attribut transform :

Exemple transformation texte SVG


<svg style="margin:1rem auto" width="300" height="300" viewBox="0 0 300 300"> 
<text x="100" y="40" transform="rotate(45)">Texte SVG</text>
</svg>


Une autre façon d'obtenir un texte en position verticale (avec la propriété writing-mode) :

Exemple transformation texte SVG


<svg viewBox="0 0 300 240"> 
<text x="50%" y="20" style="writing-mode: tb">Texte vertical</text>
</svg>


👉 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> 


Exemple svg css interne

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

Dans un document HTML5, il est possible de styliser du SVG dans un style en ligne de cette manière :



<style>

#cercle{ 
fill : red;
stroke: #000;
stroke-width: 5px 

}

</style>

<svg width="100" height="100" viewBox="0 0 100 100">  
<circle id=cercle r="25" cx="50" cy="50"/>
</svg> 



Le style CSS externe :

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



<?xml-stylesheet type="text/css" href="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. Dans tous les cas, vous pouvez utiliser chaque méthode, et même les trois à la fois.


Priorité des styles :

En SVG, certaines propriétés CSS peuvent être définies à l’aide d’attributs SVG et inversement. Vous pouvez voir la liste des propriétés dans cet article (EN).

Les attributs de présentation en SVG sont considérés comme de bas niveau, c'est-à-dire qu'ils vont être écrasés par le style CSS (que ce soit en ligne ou externe).

Dans le code ci-dessous, nous avons défini une couleur en CSS, une autre avec l'attribut fill. C'est le style CSS qui sera appliqué.



<svg height=100 width=100>
<rect x="0" y="0" height=100 width=100 style="fill:blue" fill=red />
</svg>


👉 SVG et JavaScript

Il est tout à fait possible de manipuler des éléments SVG grâce au langage JavaScript (ou plutôt EcmaScript) lorsque le SVG est intégré sur une page HTML. Vous pouvez utiliser, soit du pur JavaScript, soit une bibliothèque JavaScript.

Dessinons un carré en SVG et appliquons une couleur via l'attribut fill en pur JavaScript :

Exemple svg js carré


<svg width="120" height="120">
<rect id="ex-rect" x="10" y="10" width="100" height="100"/>
<script>
<![CDATA[
var svgElement = document.getElementById("ex-rect");
svgElement.style.fill = "#7A5FFF";
]]>
</script>
</svg>


Dans l'exemple ci-dessus, nous avons utilisé la fonction document.getElementById(). Celle-ci permet de rattacher un élément par un identifiant unique afin de pouvoir le manipuler.

Pour inclure du JavaScript au sein d'un fichier SVG, vous pouvez soit le mettre entre deux balises <script></script>, soit faire appel au fichier via l'attribut href.

Maintenant nous allons changer la couleur en cliquant sur un bouton (grâce à l'évènement JS onclick) :

Exemple change couleur SVG JS


<svg width="120" height="120">
<rect fill="#7A5FFF" id="ex-rect1" x="10" y="10" width="100" height="100"/>
<script>
<![CDATA[
function changeCouleur() {

document.getElementById("ex-rect1").setAttribute("fill", "red");
  
}
]]>
</script>
</svg>   
<input type="button" value="Changer couleur" onclick="changeCouleur()" />


Reprenons l'exemple du carré auquel on ajoute une couleur avec une bibliothèque JS (SVG.js) :



<svg id="drawing">
<script href="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.3/svg.js"></script>
<script>
<![CDATA[
var draw = SVG('drawing')
draw.rect(100,100).fill('#7A5FFF')
]]>
</script>
</svg>


👉 Les dégradés et motifs SVG

Il sera question dans ce chapitre des différents types de dégradés en SVG ainsi que les motifs (pattern).

Lire le chapitre

👉 Masque et découpage en SVG :

Tout comme avec CSS, le découpage et le masquage sont réalisables avec le langage SVG grâce aux éléments clipPath et mask.

Lire le chapitre

👉 Les filtres SVG

Les filtres SVG permettent de changer la couleur ou l'apparence d'une image/photographie avec du code. Pour cela, on utilisera l'élément filter.

Lire le chapitre

Voir aussi sur ce blog un article à propos des filtres CSS.

👉 Les animations SVG

Il existe différentes manières d'animer des éléments SVG : avec le langage SMIL, le langage JavaScript ou encore le langage CSS.

Lire le chapitre

👉 SVG Morphing

Le morphing SVG consiste à animer des formes afin d'obtenir une transformation en manipulant les coordonnées des points constituant des éléments graphique SVG.

Lire l'article

👉 SVG Tiny 1.2

A l'origine, SVG Tiny, était destinée aux terminaux mobiles afin de pouvoir afficher des graphiques vectoriels en 2D interactifs et animés. Puis avec la version 1.1, cela s'est étendu aux ordinateurs de bureau.

En recommandation W3C, la version Tiny 1.2 est une mise à jour de la précédente version proposant principalement une meilleure gestion du texte et du multimédia (audio et vidéo pour une alternative à Flash, mort depuis). Elle intègre également des méta-données afin de prendre en compte les objectifs du Web sémantique et met l'accent sur les scripts intégrés orientés objet ainsi que les feuilles de style XSL.

SVG Tiny se veut moins gourmand en ressources car basé sur un DOM simplifié (micro DOM), amputé de certaines fonctionnalités comme l'écrêtage, les masques, les symboles ou les effets de filtre. Par ailleurs, dans la version 1.1, l'opacité ainsi que les dégradés ont été retirés puis introduits de nouveau dans la version 1.2.

👉 Présentation SVG 2

Petit tour d'horizon pour vous présenter quelques nouvelles fonctionnalités qui font leur apparition dans la nouvelle version SVG.

Lire l'article

👉 Aller plus loin :

Quelques développeurs spécialisés dans le SVG :
Animations SVG :

Guide des animations SVG (FR)

Autre article sur SMIL (EN)

Eléments SVG :

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

SVG 2 :

Nouveautés (EN) SVG2.

Support navigateurs (EN) nouveautés SVG2.

Démonstrations SVG :

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

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

Outils en ligne, générateurs, éditeurs, bibliothèques... :

svg-graphics

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

Convertissez vos images au format png ou gif en SVG.

Génération de pattern en SVG.

Minifiez vos codes svg

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

A voir sur ce blog : Ressources SVG.

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