Blog développement & graphisme-Apprendre SVG-Guillaume Duverger

Vous êtes ici : Accueil > Cours > SVG

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 (ou réduire) à l'infini sans perte de qualité. Il est d'ailleurs possible d'utiliser Illustrator ou un autre programme comme Inkscape (open source) 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 le langage XML, il peut être combiné avec JavaScript et/ou CSS.

Commencer avec SVG

Avant de se lancer dans le SVG, il est donc préférable (mais pas indispensable) 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.
height : la hauteur du document.
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 une feuille de style CSS.



svg {

height: 2rem;
width: 2rem

}

Inclure du SVG dans du HTML (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.

1- Comme une image avec l'élément remplacé HTML img :



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

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



.class {

background-image: url(image.svg);

}

3- Directement dans le document HTML (inline). Ci-dessous une icône en SVG :

Le code ci-dessous :


<!DOCTYPE html>
<html>
<body>
<svg height="50" width="50" viewBox="0 0 478.2 478.2">
<path d="..."/>
</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

Le texte en SVG est élément graphique au même titre que les formes. On peut le styliser avec SVG bien entendu mais également avec CSS, sachant que les propriétés sont plus ou moins les mêmes dans l'ensemble et produisent les mêmes effets.

Lire le chapitre

SVG et CSS

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

1- Le style CSS en ligne :

Il s'agit simplement d'utiliser l'attribut style du SVG comme ceci :



<svg height="100" width="100" viewBox="0 0 100 100">
<rect height="100%" width="100%" style="fill:#614ad3;stroke:#000;stroke-width:5" />
</svg>

💡 NB : Le pixel étant l'unité de longueur par défaut en SVG, il n'est pas utile de renseigné cette unité, seulement le nombre.

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

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>

3- 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é, peu importe la position dans le code.



<svg height=100 width=100>
<rect x="0" y="0" height=100 width=100 style="fill:#614ad3" 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 :



<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 JavaScript 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 src dans la balise <script>.

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



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

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 : Démonstrations SVG.

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

SVG c'est quoi ?

Commencer avec SVG

Structure d'un document SVG

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

Les formes SVG

Les éléments et attributs SVG

Texte avec SVG

SVG et CSS

1- Le style CSS en ligne :

2- Le style CSS interne :

3- Le style CSS externe :

Priorité des styles :

SVG et JavaScript

Les dégradés et motifs SVG

Masque et découpage en SVG :

Les filtres SVG

Les animations SVG

SVG Morphing

SVG Tiny 1.2

Présentation SVG 2

Aller plus loin :

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

Animations SVG :

Eléments SVG :

SVG 2 :