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

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