Dois-je utiliser " ", " <object>
", ou "
Quel est le code pour chacun d'entre eux afin de s'assurer qu'il fonctionne aussi bien que possible ? (Je vois des références à l'inclusion du mimetype ou à l'indication de systèmes de rendu SVG de secours dans mes recherches, mais je ne vois pas de bonne référence de l'état de l'art).
Supposons que je vérifie la prise en charge de SVG avec [Modernizr][1] et que je me rabatste (probablement en remplaçant la balise par une balise simple <img>
) sur les navigateurs non compatibles avec SVG.
Je peux vous recommander le SVG Primer (publié par le W3C), qui couvre ce sujet : http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#SVG_in_HTML.
Si vous utilisez <object>
, vous bénéficiez gratuitement de la récupération des données matricielles* :
<object data="your.svg" type="image/svg+xml">
<img src="yourfallback.jpg" />
</object>
*) Enfin, pas tout à fait gratuitement, car certains navigateurs téléchargent les deux ressources, voir la suggestion de Larry ci-dessous pour contourner ce problème.
Mise à jour 2014:
<img>
avec des fallbacks de script
vers la version png (pour les anciens IE et android < 3). Un moyen simple et propre
simple pour le faire :<img src="your.svg" ; onerror="this.src='your.png'">
.
Cela se comportera comme une image GIF, et si votre navigateur prend en charge les animations déclaratives (SMIL), elles seront jouées.
Si vous voulez un svg interactif, utilisez soit <iframe>
ou <object>
.
Si vous devez offrir aux anciens navigateurs la possibilité d'utiliser un plugin svg, utilisez <embed>
.
Pour les svg dans les propriétés css background-image
et similaires, [modernizr][1] est un choix pour passer à des images de repli, un autre dépend de plusieurs arrière-plans pour le faire automatiquement :
div {
background-image : url(fallback.png) ;
background-image : url(your.svg), none ;
}
*Note : la stratégie d'arrière-plan multiple ne fonctionne pas sur Android 2.3 car il prend en charge les arrière-plans multiples mais pas les svg.
Vous pouvez également lire [ce billet de blog][2] sur les replis svg.
[1] : http://modernizr.com [2] : http://css-tricks.com/svg-fallbacks/
A partir d'IE9 et plus, vous pouvez utiliser SVG dans une balise IMG ordinaire...
<img src="/static/image.svg">
<object>
et <embed>
ont une propriété intéressante : ils permettent d'obtenir une référence au document SVG à partir d'un document externe (en tenant compte de la politique same-origin). Cette référence peut ensuite être utilisée pour animer le SVG, modifier ses feuilles de style, etc.
Étant donné
<object id="svg1" data="/static/image.svg" type="image/svg+xml"></object>
Vous pouvez alors faire des choses comme
document.getElementById("svg1").addEventListener("load", function() {
var doc = this.getSVGDocument();
var rect = doc.querySelector("rect"); // suppose our image contains a <rect>
rect.setAttribute("fill", "green");
});