Le SVG c’est quoi?

Le SVG (Scalable Vector Graphics) est un format de dessin vectoriel.

De plus en plus utilisé. En effet, contrairement aux autres formats d’image habituels (JPG, PNG, etc..) le SVG represente une image vectorielle et donc sans perte de qualité.

Mais attention, le SVG est basé sur le langage de balisage XML, c’est a dire que plus votre image est complexe, plus le fichier sera lourd. Il est donc préférable d’utiliser le SVG uniquement pour des formes simples.

svg-vs-jpg

Les avantages du SVG

Comment intégrer le SVG sur votre page web?

Plusieurs techniques sont disponibles pour intégrer du SVG sur une page HTML.

Utiliser la balise <object>

[html]<object width="320" height="240" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="src" value="image.svg" /><embed width="320" height="240" type="application/x-shockwave-flash" src="image.svg" />Texte alternatif</object>[/html]

Utiliser la balise <embed>

[html]<object width="320" height="240" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="src" value="image.svg" /><embed width="320" height="240" type="application/x-shockwave-flash" src="image.svg" /></object>[/html]

Utiliser la balise <iframe>

[html]<iframe src="image.svg" height="240" width="320"></iframe>[/html]

Utiliser la balise <svg>

[html]<svg>Mon SVG</svg>[/html]

Utiliser la balise <img>

[html]<img alt="" src="image.svg" />[/html]

Utiliser CSS background-image

[html]background-image: url(image.svg);[/html]

Je vous invite a consulter le site www.caniuse.com pour la compatibilité du SVG sur les différents navigateurs web et mobile.


Laisser un commentaire