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

Vous pouvez insérer indirectement un SVG en utilisant <img> HTML et cela est possible sur StackOverflow en suivant ce qui est décrit ci-dessous :

J'ai le fichier SVG suivant sur mon PC

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="350" height="350" viewBox="0 0 350 350">

  <title>SVG 3 Circles Intersection </title>

    <circle cx="110" cy="110" r="100"
            stroke="red"
            stroke-width="3"
            fill="none"
            />
    <text x="110" y="110" 
          text-anchor="middle"
          stroke="red"
          stroke-width="1px"
          > Label
    </text>
    <circle cx="240" cy="110" r="100" 
            stroke="blue" 
            stroke-width="3"
            fill="none"
            />
    <text x="240" y="110" 
          text-anchor="middle" 
          stroke="blue" 
          stroke-width="1px"
          > Ticket
    </text>
    <circle cx="170" cy="240" r="100" 
            stroke="green" 
            stroke-width="3" 
            fill="none"
            />
    <text x="170" y="240" 
          text-anchor="middle" 
          stroke="green" 
          stroke-width="1px"
          > Vecto
    </text>
</svg>

J'ai téléchargé cette image sur https://svgur.com

Après la fin du téléchargement, j'ai obtenu l'URL suivante :

https://svgshare.com/i/RJV.svg

J'ai alors MANUELLEMENT (sans utiliser l'icône IMAGE) a ajouté la balise html suivante

<img src="https://svgshare.com/i/KJV.svg"/>

et le résultat est juste en dessous

Pour les utilisateurs ayant un doute, il est possible de voir ce que j'ai fait en éditant la réponse suivante sur StackOverflow insertion d'une image SVG

REMARQUE-1 : le fichier SVG doit contenir <?xml?> élément. Pour commencer, j'ai simplement créé un fichier SVG qui commence directement par <svg> et rien n'a fonctionné !

REMARQUE-2 : au début, j'ai essayé d'insérer une image en utilisant IMAGE icône de Edit Toolbar . Je colle l'URL de mon fichier SVG mais StackOverflow n'accepte pas cette méthode. Le site <img> doit être ajouté manuellement.

J'espère que cette réponse pourra aider d'autres utilisateurs.

Answer 2

Une alternative facile qui fonctionne pour moi est d'insérer le code svg dans un div. Cet exemple simple utilise javascript pour manipuler le innerHTML du div.

svg = '<svg height=150>'; 
svg+= '<rect height=100% fill=green /><circle cx=150 cy=75 r=60 fill=yellow />';
svg+= '<text x=150 y=95 font-size=60 text-anchor=middle fill=red>IIIIIII</text></svg>';
document.all.d1.innerHTML=svg;

<div id='d1' style="float:right;"></div><hr>

Answer 3

Je recommande d'utiliser la combinaison de

<svg viewBox="" width="" height="">
<path fill="#xxxxxx" d="M203.3,71.6c-.........."></path>
</svg>