Gebruik ik <img>, <object>, of <embed> voor SVG-bestanden?

Moet ik <img>, <object>of <embed>gebruiken voor het laden van SVG-bestanden in een pagina in een manier die lijkt op het laden van een jpg, gifof png?

Wat is de code voor elk om ervoor te zorgen dat het zo goed mogelijk werkt? (Ik zie verwijzingen naar het opnemen van het mimetype of verwijzingen naar fallback SVG-renderers in mijn onderzoek en zie geen goede state-of-the-art referentie).

Stel dat ik SVG-ondersteuning zoek met Modernizren terugval (waarschijnlijk een vervanging met een gewone <img>tag)voor niet-SVG-compatibele browsers.


Antwoord 1, autoriteit 100%

Ik kan de SVG-primer aanbevelen (uitgegeven door de W3C), die dit onderwerp behandelt: http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#SVG_in_HTML

Als u <object>gebruikt, krijgt u gratis rasterterugval*:

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

*) Nou, niet helemaal gratis, omdat sommige browsers beide bronnen downloaden, zie Larry’s suggestie hieronder om dat te omzeilen.

update 2014:

  • Als je een niet-interactieve svg wilt, gebruik dan <img>met script-fallbacks
    naar png-versie (voor oudere IE en Android < 3). Een schoon en eenvoudig
    manier om dat te doen:

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

    Dit gedraagt ​​zich veel op een GIF-afbeelding en als uw browser de declaratieve animaties (SMIL) ondersteunt, zullen die spelen.

  • Als u een Interactive SVG wilt, gebruikt u <iframe>of <object>.

  • Als u oudere browsers moet verstrekken de mogelijkheid om een ​​SVG-plug-in te gebruiken, gebruikt u vervolgens <embed>.

  • voor SVG in CSS background-imageen vergelijkbare eigenschappen, Modernizr is er een Keuze voor het overschakelen naar fallback-afbeeldingen, een ander is afhankelijk van meerdere achtergronden om het automatisch te doen:

    div {
        background-image: url(fallback.png);
        background-image: url(your.svg), none;
    }
    

    Opmerking : de meerdere achtergrondenstrategie werkt niet op Android 2.3 omdat het meerdere achtergronden ondersteunt, maar niet SVG.

Een extra goede lezing is deze blogpost op SVG FALLBACKS.


Antwoord 2, Autoriteit 19%

Van IE9 en hoger kunt u SVG gebruiken in een gewone IMG-tag ..

https:/caniuse.com/svg-img

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

Antwoord 3, Autoriteit 16%

<object>EN <embed>Heb een interessante woning: ze maken het mogelijk om een ​​verwijzing naar SVG-document uit het buitenste document te verkrijgen (die van toepassing zijn rekening houdend met). De referentie kan vervolgens worden gebruikt om de SVG te animeren, de stylesheets, enz. Te wijzigen.

Gegeven

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

Je kunt dan dingen doen als

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

Antwoord 4, autoriteit 5%

Gebruik srcset

De meeste huidige browsers ondersteunen tegenwoordig het kenmerk srcset, waarmee verschillende afbeeldingen voor verschillende gebruikers. Je kunt het bijvoorbeeld gebruiken voor 1x en 2x pixeldichtheid, en de browser selecteert het juiste bestand.

In dit geval, als u een SVG opgeeft in de srcseten de browser ondersteunt dit niet, zal het terugvallen op de src.

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

Deze methode heeft verschillende voordelen ten opzichte van andere oplossingen:

  1. Het is niet afhankelijk van rare hacks of scripts
  2. Het is eenvoudig
  3. Je kunt nog steeds alt-tekst opnemen
  4. Browsers die srcsetondersteunen, moeten weten hoe ze ermee moeten omgaan, zodat het alleen het bestand downloadt dat het nodig heeft.

Antwoord 5, autoriteit 4%

De beste optie is om SVG-afbeeldingen op verschillende apparaten te gebruiken 🙂

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

Antwoord 6, autoriteit 3%

Als u uw SVGS nodig heeft om volledig stylaal te zijn met CSS moeten ze in lijn zijn in de DOM. Dit kan worden bereikt via SVG-injectie, die JavaScript gebruikt om een ​​HTML-element te vervangen (meestal een <img>-element) met de inhoud van een SVG-bestand nadat de pagina is geladen.

Hier is een minimaal voorbeeld met behulp van svinject :

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

Nadat de afbeelding is geladen, wordt de onload="SVGInject(this)activeert de injectie en de <img>-element wordt vervangen door de inhoud van het bestand Geleverd in de srcAttribuut. Dit werkt met alle browsers die SVG ondersteunen.

DISCLAIMER: Ik ben de co-auteur van Svinject


Antwoord 7, Autoriteit 3%

Ik zou persoonlijk een <svg>TAG gebruiken, want als u het volledige controle over het hebt . Als u het gebruikt in <img>krijg je niet de ingewanden van de SVG bedienen met CSS enz.

Een ander ding is browser ondersteuning .

Open gewoon uw svg-bestand en plak het recht in de sjabloon.

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

dan kun je in je css eenvoudig bijv.:

svg {
  fill: red;
}

Een bron: SVG-tips


Antwoord 8, autoriteit 2%

Als u <img>-tags gebruikt, zullen webkit-gebaseerde browsersgeen ingesloten bitmapafbeeldingenweergeven.

Voor elk soort geavanceerd SVG-gebruik, inclusief de SVG-inline biedt verreweg de meeste flexibiliteit.

Internet Explorer en Edge zullen de grootte van de SVG correct aanpassen, maar u moet zowel de hoogte als de breedte opgeven.

Je kunt onclick, onmouseover, etc.binnen de svg toevoegen aan elke vorm in de SVG: onmouseover=”top.myfunction(evt);”

U kunt ook weblettertypengebruiken in de SVG door ze op te nemen in uw gewone stijlblad.

Opmerking: als u SVG’s exporteert vanuit Illustrator, zijn de namen van de weblettertypen onjuist.U kunt dit corrigeren in uw CSS en rommelen in de SVG voorkomen. Illustrator geeft bijvoorbeeld de verkeerde naam aan Arial en u kunt dit als volgt oplossen:

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

Dit alles werkt op elke browser die sinds 2013 is uitgebracht.

Voor een voorbeeld, zie ozake.com.De hele site is gemaakt van SVG’s behalve het contactformulier.

Waarschuwing:Weblettertypen worden onnauwkeurig aangepast in Safari – en als u veel overgangen hebt van platte tekst naar vet of cursief, kan er een kleine hoeveelheid extra of ontbrekende ruimte zijn op de overgangspunten . Zie mijn antwoord op deze vraagvoor meer informatie informatie.


Antwoord 9

Mijn twee cent: vanaf 2019 kan 93% van de browsers die in gebruik zijn (en 100% van de laatste twee versies van elk van hen) SVG verwerken in <img>-elementen:

Bron: Kan ik gebruiken

Dus we kunnenzeggen dat er geen reden meer is om <object>te gebruiken.

Echterhet heeft nog steeds zijn voordelen:

  • Tijdens het inspecteren (bijvoorbeeld met Chrome Dev Tools) krijg je de hele SVG-opmaak te zien voor het geval je er een beetje mee wilt knoeien en live veranderingen wilt zien.

  • Het biedt een zeer robuuste fallback-implementatie voor het geval je browser geen SVG’s ondersteunt (wacht, maar ze doen het allemaal!) die ook werken als de SVG niet wordt gevonden. Dit was een belangrijk kenmerk van de XHTML2-specificatie, die vergelijkbaar is met betamax of HD-DVD

Maarer zijn ook nadelen:


Antwoord 10

Eén oplossing gevonden met pure CSS en zonder dubbele afbeeldingen te downloaden. Het is niet zo mooi als ik wil, maar het werkt.

<!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>

Het idee is om speciale SVG in te voegen met fallback-stijl.

Meer details en testproces vindt u in mijn blog.


Antwoord 11

In de meeste gevallen raad ik aan om de tag <object>te gebruiken om SVG-afbeeldingen weer te geven. Het voelt een beetje onnatuurlijk aan, maar het is de meest betrouwbare methode als je dynamische effecten wilt creëren.

Voor afbeeldingen zonder interactie kan de tag <img>of een CSS-achtergrond worden gebruikt.

Inline SVG’s of iframes zijn mogelijke opties voor sommige projecten, maar het is het beste om <embed>

te vermijden

Maar als je met SVG-dingen wilt spelen, zoals

  • Kleuren veranderen
  • Formaat van pad wijzigen
  • svg draaien

Ga met de ingesloten versie

<svg>
    <g> 
        <path> </path>
    </g>
</svg>

Antwoord 12

Hoewel w3schools de tag <embed>niet aanbeveelt, was dit het enige waardoor mijn svg met gemengd patroon en masker in Chrome werkte:

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

Terwijl Firefox prima was met

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

Chrome heeft het verloop niet weergegeven:

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

Antwoord 13

Deze jQuery-functie legt alle fouten in svg-afbeeldingen vast en vervangt de bestandsextensie door een alternatieve extensie

Open de console om de fout bij het laden van afbeelding svg

te zien

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

Antwoord 14

Op basis van persoonlijke ervaring raad ik aan om het svg-bestand per src in de afbeeldingstag te laden, zodat als je veel svg-pictogrammen hebt of dynamisch toevoegt op één pagina, dit langzamer gaat werken en slechte prestaties levert

<img src="./file.svg"/> is better performance than 
<div><svg>.....</svg></div>

maar als je css-stijl wilt toewijzen in hover, moet je embed gebruiken


Antwoord 15

U kunt indirect een SVG invoegen met behulp van de HTML-tag <img>en dit is mogelijk op StackOverflow volgens wat hieronder wordt beschreven:

Ik heb het volgende SVG-bestand op mijn 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>

Ik heb deze afbeelding geüpload naar https://svgur.com

Nadat het uploaden was beëindigd, heb ik de volgende URL verkregen:

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

Ik heb vervolgens HANDMATIG(zonder het IMAGE-pictogram te gebruiken) de volgende html-tag toegevoegd

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

en het resultaat staat er net onder

Voor gebruikers met enige twijfel is het mogelijk om te zien wat ik heb gedaan in het bewerken van het volgende antwoord op StackOverflow SVG-afbeelding invoegen

OPMERKING-1: het SVG-bestand moet het element <?xml?>bevatten. In het begin heb ik gewoon een SVG-bestand gemaakt dat direct begint met de tag <svg>en niets werkte!

OPMERKING-2: in het begin heb ik geprobeerd een afbeelding in te voegen met behulp van het IMAGE-pictogram van de Edit Toolbar. Ik plak de URL van mijn SVG-bestand, maar StackOverflow accepteert deze methode niet. De tag <img>moet handmatig worden toegevoegd.

Ik hoop dat dit antwoord andere gebruikers kan helpen.


Antwoord 16

Ik raad aan om de combinatie van

. te gebruiken

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

Antwoord 17

Een eenvoudig alternatief dat voor mij werkt, is om de svg-code in een div in te voegen. Dit eenvoudige voorbeeld gebruikt javascript om de div innerHTML te manipuleren.

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>

Other episodes