Introduction

Le SVG est un format d’image qui permet d’utiliser les atouts du vectoriel sur le web. C’est un format proche du « .ai » d’Illustrator, mais lisible dans tous les navigateurs et compatibles avec de nombreux logiciels.
Illustrator peut importer et exporter dans ce format, néanmoins certains réglages spécifiques au logiciel peuvent disparaitre.

Même si votre logiciel de dessin vectoriel possède une multitude de fonctions, savoir lire le code d’un SVG permet d’aller beaucoup plus loin, d’aborder le génératif, des expérimentations, la data visualisation ou le hasard.

Usages

Si vous avez besoin d’un dessin simple dans votre page, supposons juste un cercle, quelques balises SVG vont suffire à faire l’image, le fichier SVG contiendra ces quelques signes et le poids sera très faible (ici, c’est plus léger que le texte de cette page).

  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle fill="red" cx="50" cy="50" r="50"/></svg>

Autre avantage, qu’importe la résolution de l’écran, le lissage sera optimum, un atout pour les pictogrammes, icônes et autres éléments « décoratifs ».

Un site comme SVGOMG permet d’aller plus loin dans l’optimisation du poids du SVG.
Après ce premier échantillon de SVG, vous remarquerez que les similitudes avec le HTML sont fortes, cela vient de la structuration XML commune aux deux langages. Ainsi nous retrouverons des balises, des attributs et même du CSS (avec quelques différences).

Insertion dans une page

Trois méthodes permettent d’afficher du SVG.

En source

Votre fichier peut être utilisé comme n’importe quel format d’image web (jpg, png, gif, webp…).

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

En fond

De même en CSS.

body{
  background:url('cercle.svg');
}

Directement dans le HTML

<h1>Le SVG est mon ami</h1>
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle fill="red" cx="50" cy="50" r="50"/>
</svg>
Le SVG directement dans le HTML peut compliquer les mises à jour, mais permet d’interagir avec les éléments du SVG (calques, positions, couleurs…) via CSS, JavaScript ou les deux.

Astuce

Si vous dessinez un cercle (ou des formes plus complexes) sous Illustrator CC, vous pouvez le copier (la forme) et coller (le code) dans un fichier ou dans une page HTML.

<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In -->
<svg version="1.1"
	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
	 x="0px" y="0px" width="138px" height="138px" viewBox="0 0 138 138" enable-background="new 0 0 138 138" xml:space="preserve">
<defs>
</defs>
<circle fill="#0066FF" cx="69" cy="69" r="69"/>
<!--un cercle de rayon 69 et de centre 69,69 -->
</svg>
• <!-- Adobe ajoute un caractère WTF à supprimer -->

See the Pen svg by Benoît Wimart (@benoitwimart) on CodePen.dark

Dans cet exemple permet d’obtenir un cercle, pour aller plus loin la liste complète des éléments se trouvent sur le MDN.