Le SVG permet d’utiliser les atouts du vectoriel sur le web. Sa structure est basée sur le XML, ce qui lui donne de nombreux points communs avec le HTML.

Insertion inline

Si vous dessiner un cercle (ou des formes plus complexes) sous Illustrator CC, vous pouvez le copier/coller dans un fichier ou dans une page HTML (exporter avec Illustrator et ouvrir avec Brackets marchent aussi). Vous obtiendrez ce genre de code, lisible dans Brackets et interprétable directement par votre navigateur et de nombreux logiciels (Illustrator, Inkscape, logiciel pour découpeuse laser…).

Ce n’est pas interdit de mettre son svg directement dans le html, mais cela peu compliquer les mises à jour. Généralement, on utilise le svg en image de fond via le CSS. Une autre possibilité consiste à le mettre en source (src) sur une balise image.
<!-- 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">
<circle fill="#0066FF" cx="69" cy="69" r="69"/><!--un cercle de rayon 69 et de centre 69,69 -->
</svg>

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

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

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, la data visualisation ou le hasard.