Dois-je utiliser <img>, <object>, ou <embed> pour les fichiers SVG ?

Question

Dois-je utiliser <img> , <object> o <embed> pour charger des fichiers SVG dans une page de manière similaire au chargement d'un fichier de type jpg , gif o png ?

Quel est le code pour chacun d'entre eux afin de s'assurer qu'il fonctionne aussi bien que possible ? (Dans le cadre de mes recherches, je vois des références à l'inclusion du mimetype ou à l'indication de générateurs de rendu SVG de secours, mais je ne vois pas de bonne référence sur l'état de l'art).

Supposons que je vérifie la prise en charge de SVG avec Modernizr et de revenir en arrière (probablement en remplaçant par une simple <img> ) pour les navigateurs non compatibles SVG.

Answer 1

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> Dans ce cas, vous bénéficiez gratuitement d'un retour au format raster* :

<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 de 2014 :

• Si vous voulez un svg non interactif, utilisez <img> avec script fallbacks à la version png (pour les anciens IE et Android < 3). Une façon simple et propre propre et simple pour le faire :

  <img src="your.svg" onerror="this.src='your.png'"> .

  Elle se comportera comme une image GIF et si votre navigateur prend en charge les animations déclaratives (SMIL), celles-ci seront jouées.

• Si vous voulez un svg interactif, utilisez soit <iframe> o <object> .

• Si vous devez offrir aux anciens navigateurs la possibilité d'utiliser un plugin svg, utilisez alors <embed> .

• Pour les svg en css background-image et des propriétés similaires, modernizr est un choix pour passer aux images de repli, un autre est de dépendre 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 des arrière-plans multiples ne fonctionne pas sur Android 2.3 car il supporte les arrière-plans multiples mais pas les svg.

Une autre bonne lecture est ce blogpost sur les fallbacks svg.

Answer 2

A partir d'IE9 et plus, vous pouvez utiliser SVG dans une balise IMG ordinaire

https://caniuse.com/svg-img

<img src="/static/image.svg">

Answer 3

<object> y <embed> ont une propriété intéressante : ils permettent d'obtenir une référence au document SVG à partir du document externe (en tenant compte de la politique de same-origin). Cette référence peut ensuite être utilisée pour animer le SVG, modifier ses feuilles de style, etc.

Étant donné que

<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");
});

Answer 4

Utilisez srcset

Le plus Les navigateurs actuels prennent en charge le srcset attribut qui permet d'attribuer des images différentes à des utilisateurs différents. Par exemple, vous pouvez l'utiliser pour une densité de pixels de 1x et 2x, et le navigateur sélectionnera le bon fichier.

Dans ce cas, si vous spécifiez un SVG dans le champ srcset et que le navigateur ne le prend pas en charge, il se rabattra sur l'option src .

<img src="logo.png" srcset="logo.svg" alt="My logo">

Cette méthode présente plusieurs avantages par rapport aux autres solutions :

1. Il ne s'appuie pas sur des bidouillages ou des scripts bizarres.
2. C'est simple.
3. Vous pouvez toujours inclure du texte alt
4. Les navigateurs qui prennent en charge srcset doit savoir comment le gérer pour qu'il ne télécharge que le fichier dont il a besoin.

Answer 5

Si vous voulez que vos SVG soient entièrement stylisables avec CSS, ils doivent être en ligne dans le DOM. Ceci peut être réalisé grâce à l'injection de SVG, qui utilise Javascript pour remplacer un élément HTML (généralement un élément <img> ) avec le contenu d'un fichier SVG après le chargement de la page.

Voici un exemple minimal utilisant SVGInject :

<html>
<head>
  <script src="svg-inject.min.js"></script>
</head>
<body>
  <img src="image.svg" onload="SVGInject(this)" />
</body>
</html>

Après le chargement de l'image, le onload="SVGInject(this) déclenchera l'injection et le <img> sera remplacé par le contenu du fichier fourni dans l'élément src attribut. Cela fonctionne avec tous les navigateurs qui prennent en charge le format SVG.

Disclaimer : Je suis le co-auteur de SVGInject