Dois - je utiliser <img>, <object>ou <embed>pour le chargement des fichiers SVG dans une page d'une manière similaire à un chargement jpg, gifou png?

Quel est le code de chacun pour s'assurer qu'il fonctionne le mieux possible? (Je vois des références à l'inclusion du type MIME ou pointant vers des rendus SVG de secours dans mes recherches et je ne vois pas une bonne référence de pointe).

Supposons que je vérifie la prise en charge de SVG avec Modernizr et que je recule (faisant probablement un remplacement avec une <img>balise simple ) pour les navigateurs non compatibles SVG.

Je peux 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 obtenez gratuitement un raster fallback *:

<object data="your.svg" type="image/svg+xml">
  <img src="yourfallback.jpg" />
</object>

*) Eh bien, pas tout à fait gratuitement, car certains navigateurs téléchargent les deux ressources, consultez la suggestion de Larry ci-dessous pour savoir comment contourner cela.

Mise à jour 2014:

• Si vous voulez un svg non interactif, utilisez-le <img>avec des scripts de secours en version png (pour les anciens IE et android <3). Une façon propre et simple de le faire:

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

  Cela se comportera un peu comme une image GIF, et si votre navigateur prend en charge les animations déclaratives (SMIL), celles-ci seront lues.

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

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

• Pour svg dans css background-imageet des propriétés similaires, modernizr est un choix pour passer aux images de secours, 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;
  }

  Remarque : la stratégie à arrière-plans multiples ne fonctionne pas sur Android 2.3 car elle prend en charge plusieurs arrière-plans mais pas svg.

Une bonne lecture supplémentaire est ce blog sur les solutions de secours svg.

Depuis IE9 et au-dessus, vous pouvez utiliser SVG dans une balise IMG ordinaire.

https://caniuse.com/svg-img

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

<object>et <embed>ont une propriété intéressante: elles permettent d'obtenir une référence au document SVG à partir d'un document externe (en tenant compte de la politique de même origine). La référence peut ensuite être utilisée pour animer le SVG, changer ses feuilles de style, etc.

Donné

<object id="svg1" data="/static/image.svg" type="image/svg+xml"></object>

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

La meilleure option est d'utiliser des images SVG sur différents appareils :)

<img src="your-svg-image.svg" alt="Your Logo Alt" onerror="this.src='your-alternative-image.png'">

Utilisation srcset

La plupart des navigateurs actuels prennent en charge l' srcsetattribut , qui permet de spécifier différentes images pour différents utilisateurs. Par exemple, vous pouvez l'utiliser pour une densité de pixels 1x et 2x, et le navigateur sélectionnera le fichier correct.

Dans ce cas, si vous spécifiez un SVG dans le srcsetet que le navigateur ne le prend pas en charge, il se repliera sur le src.

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

Cette méthode présente plusieurs avantages par rapport à d'autres solutions:

1. Il ne repose pas sur des hacks ou des scripts étranges
2. C'est simple
3. Vous pouvez toujours inclure du texte alternatif
4. Les navigateurs qui prennent en charge srcsetdoivent savoir comment le gérer afin qu'il télécharge uniquement le fichier dont il a besoin.

Si vous avez besoin que vos SVG soient entièrement stylables avec CSS, ils doivent être en ligne dans le DOM. Cela peut être réalisé grâce à l'injection SVG, qui utilise Javascript pour remplacer un élément HTML (généralement un <img>élément) par 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>

Une fois l'image chargée onload="SVGInject(this), l' <img>élément déclenchera l'injection et l' élément sera remplacé par le contenu du fichier fourni dans l' srcattribut. Cela fonctionne avec tous les navigateurs qui prennent en charge SVG.

Avertissement: je suis le co-auteur de SVGInject

J'utiliserais personnellement une <svg>balise parce que si vous l'avez, vous en avez le plein contrôle . Si vous l'utilisez, <img>vous ne pouvez pas contrôler les entrailles du SVG avec CSS, etc.

une autre chose est le support du navigateur .

Ouvrez simplement votre svgfichier et collez-le directement dans le modèle.

<svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3400 2700" preserveAspectRatio="xMidYMid meet" (click)="goHome();">
  <g id="layer101">
    <path d="M1410 2283 c-162 -225 -328 -455 -370 -513 -422 -579 -473 -654 -486 -715 -7 -33 -50 -247 -94 -475 -44 -228 -88 -448 -96 -488 -9 -40 -14 -75 -11 -78 2 -3 87 85 188 196 165 180 189 202 231 215 25 7 129 34 230 60 100 26 184 48 185 49 4 4 43 197 43 212 0 10 -7 13 -22 9 -13 -3 -106 -25 -208 -49 -102 -25 -201 -47 -221 -51 l-37 -7 8 42 c4 23 12 45 16 49 5 4 114 32 243 62 129 30 240 59 246 66 10 10 30 132 22 139 -1 2 -110 -24 -241 -57 -131 -33 -240 -58 -242 -56 -6 6 13 98 22 107 5 4 135 40 289 80 239 61 284 75 307 98 14 15 83 90 153 167 70 77 132 140 139 140 7 0 70 -63 141 -140 70 -77 137 -150 150 -163 17 -19 81 -39 310 -97 159 -41 292 -78 296 -82 8 -9 29 -106 24 -111 -1 -2 -112 24 -245 58 -134 33 -245 58 -248 56 -6 -7 16 -128 25 -136 5 -4 112 -30 238 -59 127 -29 237 -54 246 -57 11 -3 20 -23 27 -57 6 -28 9 -53 8 -54 -1 -1 -38 7 -81 17 -274 66 -379 90 -395 90 -16 0 -16 -6 3 -102 11 -57 21 -104 22 -106 1 -1 96 -27 211 -57 115 -31 220 -60 234 -66 14 -6 104 -101 200 -211 95 -111 175 -197 177 -192 1 5 -40 249 -91 542 l-94 532 -145 203 c-220 309 -446 627 -732 1030 -143 201 -265 366 -271 367 -6 0 -143 -183 -304 -407z m10 -819 l-91 -161 -209 -52 c-115 -29 -214 -51 -219 -49 -6 1 32 55 84 118 l95 115 213 101 c116 55 213 98 215 94 1 -3 -38 -78 -88 -166z m691 77 l214 -99 102 -123 c56 -68 100 -125 99 -127 -4 -3 -435 106 -447 114 -4 2 -37 59 -74 126 -38 68 -79 142 -93 166 -13 23 -22 42 -20 42 2 0 101 -44 219 -99z"/>
    <path d="M1126 2474 c-198 -79 -361 -146 -363 -147 -2 -3 -70 -410 -133 -805 -12 -73 -20 -137 -18 -143 2 -6 26 23 54 63 27 40 224 320 437 622 213 302 386 550 385 551 -2 2 -165 -62 -362 -141z"/>
    <path d="M1982 2549 c25 -35 159 -230 298 -434 139 -203 283 -413 319 -465 37 -52 93 -134 125 -182 59 -87 83 -109 73 -65 -5 20 -50 263 -138 747 -17 91 -36 170 -42 176 -9 8 -571 246 -661 280 -14 6 -7 -10 26 -57z"/>
    <path d="M1679 1291 c-8 -11 -71 -80 -141 -153 l-127 -134 -95 -439 c-52 -242 -92 -442 -90 -445 6 -5 38 28 218 223 l99 107 154 0 c85 0 163 -4 173 -10 10 -5 78 -79 151 -162 73 -84 136 -157 140 -162 18 -21 18 4 -2 85 -11 46 -58 248 -105 448 l-84 364 -87 96 c-108 121 -183 201 -187 201 -2 0 -10 -9 -17 -19z m96 -488 c33 -102 59 -189 57 -192 -2 -6 -244 -2 -251 4 -5 6 120 375 127 375 4 0 34 -84 67 -187z"/>
    </g>
  </svg>

alors dans votre css vous pouvez simplement par exemple:

svg {
  fill: red;
}

Quelques ressources: conseils SVG

Si vous utilisez des balises <img> , les navigateurs Webkit n'afficheront pas les images bitmap incorporées .

Pour tout type d'utilisation avancée du SVG, y compris le SVG en ligne offre de loin la plus grande flexibilité.

Internet Explorer et Edge redimensionneront correctement le SVG , mais vous devez spécifier à la fois la hauteur et la largeur.

Vous pouvez ajouter onclick, onmouseover, etc. à l'intérieur du svg, à n'importe quelle forme dans le SVG: onmouseover = "top.myfunction (evt);"

Vous pouvez également utiliser des polices Web dans le SVG en les incluant dans votre feuille de style habituelle.

Remarque: si vous exportez des SVG depuis Illustrator, les noms des polices Web seront incorrects. Vous pouvez corriger cela dans votre CSS et éviter de déconner dans le SVG. Par exemple, Illustrator donne le mauvais nom à Arial, et vous pouvez le corriger comme ceci:

@font-face {    
    font-family: 'ArialMT';    
    src:    
        local('Arial'),    
        local('Arial MT'),    
        local('Arial Regular');    
    font-weight: normal;    
    font-style: normal;    
}

Tout cela fonctionne sur n'importe quel navigateur sorti depuis 2013 .

Pour un exemple, voir ozake.com . L'ensemble du site est réalisé en SVG à l'exception du formulaire de contact.

Avertissement: les polices Web sont redimensionnées de manière imprécise dans Safari - et si vous avez beaucoup de transitions du texte brut en gras ou en italique, il peut y avoir une petite quantité d'espace supplémentaire ou manquant aux points de transition. Voir ma réponse à cette question pour plus d'informations.

Mes deux cents: à partir de 2019, 93% des navigateurs utilisés (et 100% des deux dernières versions de chacun d'entre eux) peuvent gérer le SVG dans les <img>éléments:

Source: puis-je utiliser

On pourrait donc dire qu'il n'y a plus de raison de l'utiliser <object>.

Cependant, il a encore ses avantages :

• Lors de l'inspection (par exemple avec Chrome Dev Tools), le balisage SVG complet vous est présenté au cas où vous souhaiteriez le modifier un peu et voir les changements en direct.

• Il fournit une implémentation de secours très robuste au cas où votre navigateur ne prend pas en charge les SVG (attendez, mais chacun d'entre eux le fait!) Qui fonctionne également si le SVG n'est pas trouvé. C'était une caractéristique clé de la spécification XHTML2, qui est comme betamax ou HD-DVD

Mais il y a aussi des inconvénients :

• il n'y a pas d'homologue AMP <object>(il est donc parfaitement sûr de l'utiliser avec <amp-img> et de l'utiliser en ligne également .
• vous ne devez pas mélanger le gestionnaire d'extraction de Serviceworker avec n'importe quel type d'intégration , donc avoir une <object>balise peut empêcher votre PWA d'être vraiment hors ligne.

Trouvé une solution avec du CSS pur et sans double téléchargement d'image. Ce n'est pas beau comme je veux, mais ça marche.

<!DOCTYPE html>
<html>
  <head>
    <title>HTML5 SVG demo</title>
    <style type="text/css">
     .nicolas_cage {
         background: url('nicolas_cage.jpg');
         width: 20px;
         height: 15px;
     }
     .fallback {
     }
    </style>
  </head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
    <style>
    <![CDATA[ 
        .fallback { background: none; background-image: none; display: none; }
    ]]>
    </style>
</svg>

<!-- inline svg -->
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40">
  <switch>
     <circle cx="20" cy="20" r="18" stroke="grey" stroke-width="2" fill="#99FF66" />
     <foreignObject>
         <div class="nicolas_cage fallback"></div>
     </foreignObject>
  </switch>
</svg>
<hr/>
<!-- external svg -->
    <object type="image/svg+xml" data="circle_orange.svg">
        <div class="nicolas_cage fallback"></div>
    </object>
</body>
</html>

L'idée est d'insérer un SVG spécial avec un style de secours.

Plus de détails et de processus de test que vous pouvez trouver sur mon blog .

Cette fonction jQuery capture toutes les erreurs dans les images svg et remplace l'extension de fichier par une autre extension

Veuillez ouvrir la console pour voir l' erreur de chargement de l'image svg

(function($){
  $('img').on('error', function(){
    var image = $(this).attr('src');
    if ( /(\.svg)$/i.test( image )) {
      $(this).attr('src', image.replace('.svg', '.png'));
    }
  })  
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img src="https://jsfiddle.net/img/logo.svg">

Je recommande d'utiliser la combinaison de

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

Vous pouvez insérer un SVG indirectement en utilisant <img> balise 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

Une fois le téléchargement terminé, j'ai obtenu l'URL suivante:

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

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

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

et le résultat est juste en dessous

Pour les utilisateurs ayant des doutes, il est possible de voir ce que j'ai fait en modifiant la réponse suivante sur StackOverflow en insérant une image SVG

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

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

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