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

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'">

Answer 2

J'utiliserais personnellement un <svg> parce que si vous le faites, vous avez le contrôle total sur celui-ci . Si vous l'utilisez dans <img> vous n'avez pas la possibilité de contrôler le fonctionnement interne du SVG avec des CSS, etc.

une autre chose est Support du navigateur .

Ouvrez simplement votre svg et le coller 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>

puis dans votre css vous pouvez simplement ex :

svg {
  fill: red;
}

Quelques ressources : Conseils SVG

Answer 3

Si vous utilisez <img> balises, alors navigateurs basés sur webkit ne s'affiche pas images bitmap intégrées .

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

Internet Explorer et Edge redimensionneront le SVG correctement. 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 polices web dans le SVG en les incluant dans votre feuille de style habituelle.

Note : si vous exportez des SVG à partir d'Illustrator, les noms des polices Web seront erronés. Vous pouvez corriger ce problème dans votre CSS et éviter de jouer avec le SVG. Par exemple, Illustrator donne le mauvais nom à Arial, et vous pouvez le corriger comme suit :

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

Tout cela fonctionne sur tout navigateur publié depuis 2013 .

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

Attention : Les polices Web sont redimensionnées de manière imprécise dans Safari. Si vous avez beaucoup de transitions entre le texte brut et le gras ou l'italique, il se peut qu'il y ait un peu d'espace supplémentaire ou manquant aux points de transition. Voir ma réponse à cette question pour plus d'informations.

Answer 4

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

Source : Puis-je utiliser

Donc nous podría dire qu'il n'y a aucune raison d'utiliser <object> plus.

Cependant il a toujours son pros :

• Lors de l'inspection (par exemple avec les outils de développement de Chrome), l'ensemble du balisage SVG vous est présenté au cas où vous voudriez le modifier un peu et voir les changements en direct.

• Il fournit une implémentation de repli très robuste au cas où votre navigateur ne prendrait 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 le betamax ou le HD-DVD.

Mais il y a aussi contre :

• il n'y a pas de contrepartie AMP à <object> (bien qu'il soit parfaitement sûr de l'utiliser avec <amp-img> et l'utiliser aussi en ligne .
• vous ne devriez pas mélanger le gestionnaire de recherche de service avec n'importe quel type d'intégration. donc avoir un <object> peut empêcher votre PWA d'être réellement capable de fonctionner hors ligne.

Answer 5

Même si w3schools ne recommande pas l'option <embed> tag, c'est la seule chose qui a permis à mon svg avec motif et masque mélangés de fonctionner dans Chrome :

<embed src="logo.svg" style="width:100%; height:180px" type="image/svg+xml" />

Alors que Firefox n'avait pas de problème avec

<svg style="width:100%">
    <use xlink:href="logo.svg#logo"></use>
</svg>

Chrome n'a pas rendu le gradient :

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="146" version="1.1">
    <title>digicraft punchcard logo</title>
    <defs>
        <linearGradient id="punchcard-gradient" x1="100%" y1="50%" x2="0%" y2="50%">
            <stop offset="0%" style="stop-color:rgb(128,128,128);stop-opacity:0" />
            <stop offset="100%" style="stop-color:rgb(69,69,69);stop-opacity:1" />
        </linearGradient>
        <pattern id="punchcard-pattern-v" x="0" y="0" width="21" height="21" patternUnits="userSpaceOnUse">
            <rect x="0" y="0" width="20" height="20" fill="skyblue" onClick="mClick(this)" />
        </pattern>
        <pattern id="punchcard-pattern-h" x="0" y="0" width="21" height="145" patternUnits="userSpaceOnUse">
            <rect x="0" y="0" width="21" height="20" fill="skyblue" />
            <rect x="0" y="20" width="20" height="84" fill="url(#punchcard-pattern-v)" />
            <rect x="0" y="105" width="20" height="20" fill="skyblue" />
            <rect x="0" y="126" width="21" height="20" fill="skyblue" />
        </pattern>
        <mask id="punchcard-mask" width="10" height="100%">
            <rect width="100%" height="146" fill="url(#punchcard-pattern-h)" />
        </mask>
    </defs>
        <rect x="0" y="0" width="100%" height="159" fill="url(#punchcard-gradient)" mask="url(#punchcard-mask)" />
</svg>

La même chose avec <object> y <img> dans les deux navigateurs.