HTML

Vous pouvez utiliser le code HTML le plus simple :

<img width=634" height="557" src="octocat.svg" alt="Octocat, la mascotte de GitHub" />

Tout en gardant à l’esprit que seul le fallback textuel sera fourni sous IE < 9.

L’indication de taille n’est présente que pour aider le navigateur à réserver la place lors du rendu de la page.

Dans l’article de CSS-Tricks, le fallback bitmap est effectué via JavaScript soit en utilisant Modernizr et jQuery, soit avec du JavaScript en ligne (!). Il y a une façon plus simple :

<object width="634" height="557" data="octocat.svg" type="image/xml+svg">
	<img width="634" height="557" src="octocat.png" alt="Octocat, la mascotte de GitHub" />
</object>

Cette fois, le SVG s’affichera sur les plateformes supportant le type MIME image/xml+svg, sinon la balise <img> s’occupera d’afficher le fallback bitmap. Cependant, je ne sais pas comment un lecteur d’écran va réagir en rencontrant ce type de code.

Webkit semble télécharger le fallback bitmap avant le SVG, ce qui est assez problématique pour les performances.

CSS

Côté CSS, vous avez deux solutions. Soit vous utilisez la détection de fonctionnalité (Modernizr ou autre) :

document.body.className += (document.createElementNS && document.createElementNS(’http://www.w3.org/2000/svg’, ’svg’).createSVGRect ? "" : "no-svg");

        #element { background-image: url(octocat.svg); }
.no-svg #element { background-image: url(octocat.png); }

Soit vous bidouillez en CSS :

#element {
	background-image: url(octocat.png); /* 1) Supporté partout */
	background-image: none, url(octocat.svg); /* 2) Multiple background */
}

Dans cet exemple on fournit le bitmap en premier (1). Puis on définit un multiple background (2) qui ne sera retenu que sur les plateformes supportant cette fonctionnalité. Heureusement, le support de multiple background est assez similaire à celui de SVG.

Sprites SVG ?

Pour réduire le nombre de requête HTTP nous utilisons des sprites ; une image en contenant d’autres. À y réfléchir, c’est également possible en SVG.

Ne vous emballez pas trop vite, le support des fragments identifiers (la fonctionnalité permettant d’utiliser des sprites SVG) n’est pas bon.

Le fragment identifier vous permet d’afficher une zone ou un élément du SVG .

Prenons ce sprite :

Si on essaye d’accéder à ce SVG on obtient un premier « état » :

Maintenant, si dans l’URL de cette ressource on spécifie un fragment décrivant une autre zone à afficher (un autre viewBox) :

Il existe une autre méthode, plus souple à utiliser, mais qui requiert un sprite différent.

Plutôt que de spécifier une zone à afficher, nous allons indiquer un élément du SVG. Par défaut, nous allons cacher toutes les images et n’afficher que celle qui correspond au fragment en cours, grâce à du CSS embarqué dans notre SVG :

<svg …>
	<style>…</style>
	<g id="color">…</g>
	<g id="gray">…</g>

svg > g        { display: none; }
svg > g:target { display: block; }

Ensuite, pour s’en servir :

Si vous souhaitez utiliser cette méthode il faudra revoir votre façon de concevoir vos sprites. Cette fois, toutes les images seront placées les unes par dessus les autres. Cela veut également dire que votre viewBox doit être fixe et que chaque image doit avoir la même taille.