wake-up-neo.com

Verwende ich <img>, <object> oder <embed> für SVG-Dateien?

Soll ich <img>, <object> oder <embed> zum Laden von SVG-Dateien in eine Seite verwenden, ähnlich wie beim Laden von jpg, gif oder png?

Was ist der Code für jeden, um sicherzustellen, dass er so gut wie möglich funktioniert? (Es werden Verweise auf das Einbeziehen des Mimetyps oder das Verweisen auf Fallback-SVG-Renderer bei meinen Nachforschungen angezeigt, und es wird keine gute Referenz auf dem neuesten Stand der Technik angezeigt.)

Angenommen, ich überprüfe die SVG-Unterstützung mit Modernizr und greife auf nicht SVG-fähige Browser zurück (wobei wahrscheinlich ein Ersatz durch ein einfaches <img> -Tag erfolgt).

549
artlung

Ich kann den SVG-Primer (veröffentlicht vom W3C) empfehlen, der dieses Thema behandelt: http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#SVG_in_HTML

Wenn Sie <object> verwenden, erhalten Sie einen kostenlosen Raster-Fallback *:

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

*) Nicht ganz umsonst, da einige Browser beide Ressourcen herunterladen. Wie Sie das umgehen können, erfahren Sie in Larrys Vorschlag weiter unten.

Update 2014:

  • Wenn Sie ein nicht interaktives SVG wünschen, verwenden Sie <img> mit Skript-Fallbacks auf die PNG-Version (für ältere IE und Android <3). Eine saubere und einfache Möglichkeit, dies zu tun:

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

    Dies verhält sich ähnlich wie ein GIF-Bild. Wenn Ihr Browser deklarative Animationen (SMIL) unterstützt, werden diese abgespielt.

  • Wenn Sie ein interaktives SVG wünschen, verwenden Sie entweder <iframe> oder <object>.

  • Wenn Sie älteren Browsern die Möglichkeit geben müssen, ein SVG-Plugin zu verwenden, verwenden Sie <embed>.

  • Für svg in css background-image und ähnliche Eigenschaften ist modernizr eine Option zum Umschalten auf Fallback-Images, eine andere hängt von mehreren Hintergründen ab, um dies automatisch zu tun:

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

    Hinweis : Die Strategie für mehrere Hintergründe funktioniert bei Android 2.3 weil es mehrere Hintergründe unterstützt, aber nicht SVG.

Eine weitere gute Lektüre ist dieser Blogpost on svg fallbacks.

589
Erik Dahlström

Ab IE9 können Sie SVG in einem normalen IMG-Tag verwenden.

https://caniuse.com/svg-img

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

<object> und <embed> haben eine interessante Eigenschaft: Sie ermöglichen es, einen Verweis auf ein SVG-Dokument aus einem äußeren Dokument abzurufen (unter Berücksichtigung der Richtlinie für denselben Ursprung). Die Referenz kann dann verwendet werden, um die SVG zu animieren, ihre Stylesheets zu ändern usw.

Gegeben

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

Sie können dann Dinge wie tun

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

Die beste Option ist die Verwendung von SVG-Bildern auf verschiedenen Geräten :)

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

Benutze srcset

Die meisten aktuelle Browser unterstützen heute das srcset -Attribut , mit dem verschiedene Bilder für verschiedene Benutzer angegeben werden können. Sie können es zum Beispiel für 1x und 2x Pixeldichte verwenden, und der Browser wählt die richtige Datei aus.

Wenn Sie in diesem Fall eine SVG in srcset angeben und der Browser diese nicht unterstützt, wird auf src zurückgegriffen.

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

Diese Methode hat mehrere Vorteile gegenüber anderen Lösungen:

  1. Es ist nicht auf irgendwelche seltsamen Hacks oder Skripte angewiesen
  2. Es ist einfach
  3. Sie können weiterhin Alternativtext einfügen
  4. Browser, die srcset unterstützen, sollten wissen, wie sie damit umgehen, damit sie nur die benötigte Datei herunterladen.
20
Scribblemacher

Wenn Sie <img> Tags verwenden, werden Webkit-basierte Browser nicht angezeigt eingebettete Bitmap-Bilder .

Wenn Sie Inline-SVGs verwenden, ändert der Explorer die Größe der SVGs nicht entsprechend Ihrem CSS.
Explorer passt die SVG-Größe korrekt an , aber Sie müssen sowohl die Höhe als auch die Breite angeben.

Ich habe festgestellt, dass das <object> -Tag das einzige ist, das in allen Browsern funktioniert. Ich musste die Breite und Höhe (innerhalb der SVG) auf 100% ändern, damit die Größe korrekt geändert wurde.

Sie können onclick, onmouseover, etc. in der SVG zu jeder Form in der SVG hinzufügen: onmouseover = "top.myfunction (evt);"

Sie können im SVG auch - Webfonts verwenden, indem Sie sie in Ihr reguläres Stylesheet aufnehmen.

Hinweis: Wenn Sie SVGs aus Illustrator exportieren, sind die Namen der Web-Schriftarten falsch. Sie können dies in Ihrem CSS korrigieren und vermeiden, dass Sie in der SVG herumspielen. Zum Beispiel gibt Illustrator Arial den falschen Namen und Sie können diesen folgendermaßen beheben:

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

All dies funktioniert mit jedem Browser, der in den letzten zwei Jahren veröffentlicht wurde .

Ergebnisse bei ozake.com (auf Französisch). Die gesamte Site besteht aus SVGs mit Ausnahme des Kontaktformulars.

Warnung: Die Größe von Web-Schriftarten wird nicht genau geändert. Wenn Sie viele Übergänge von einfachem Text zu fett oder kursiv haben, ist möglicherweise ein kleiner Teil des zusätzlichen oder fehlenden Speicherplatzes beim Übergang vorhanden Punkte. Siehe meine Antwort unter diese Frage für weitere Informationen.

15
Andrew Swift

Wenn Ihre SVGs vollständig mit CSS gestaltbar sein sollen, müssen sie im DOM inline sein. Dies kann durch SVG-Injection erreicht werden, bei der ein HTML-Element (normalerweise ein <img> -Element) mit Javascript durch den Inhalt einer SVG-Datei ersetzt wird, nachdem die Seite geladen wurde.

Hier ist ein minimales Beispiel mit SVGInject :

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

Nachdem das Bild geladen wurde, löst die Funktion onload="SVGInject(this) die Injektion aus und das Element <img> wird durch den Inhalt der Datei ersetzt, die im Attribut src angegeben ist. Dies funktioniert mit allen Browsern, die SVG unterstützen.

Haftungsausschluss: Ich bin der Co-Autor von SVGInject

14
Waruyama

Ich würde persönlich ein <svg> -Tag verwenden, denn wenn Sie dies tun, haben Sie die volle Kontrolle darüber . Wenn Sie es in <img> verwenden, können Sie die Innereien der SVG nicht mit CSS usw. steuern.

eine andere Sache ist Browser-Unterstützung .

Öffnen Sie einfach Ihre svg -Datei und fügen Sie sie direkt in die Vorlage ein.

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

dann kannst du in deinem CSS einfach zB:

svg {
  fill: red;
}

Einige Ressourcen: SVG-Tipps

10
LazerBanana

Meine zwei Cent: Ab 2019 können 93% der verwendeten Browser (und 100% der letzten beiden Versionen) SVG in <img> -Elementen verarbeiten:

enter image description here

Quelle: Kann ich verwenden

Wir könnten also sagen, dass es keinen Grund mehr gibt, <object> zu verwenden.

Allerdings hat es immer noch seine Vorteile :

  • Bei der Überprüfung (z. B. mit Chrome Dev Tools) wird Ihnen das gesamte SVG-Markup angezeigt, falls Sie etwas daran ändern und Live-Änderungen sehen möchten.

  • Es bietet eine sehr robuste Fallback-Implementierung für den Fall, dass Ihr Browser keine SVGs unterstützt (warten Sie, aber jeder von ihnen!), Die auch funktioniert, wenn die SVG nicht gefunden wird. Dies war ein Schlüsselmerkmal der XHTML2-Spezifikation, die wie Betamax oder HD-DVD ist

Aber es gibt auch Nachteile :

7
amenadiel

Eine Lösung mit reinem CSS und ohne Download von Doppelbildern gefunden. Es ist nicht so schön, wie ich es will, aber es funktioniert.

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

Die Idee ist, spezielle SVG-Dateien mit Fallback-Stil einzufügen.

Weitere Details und Testverfahren finden Sie in mein Blog .

2
Artru

Diese jQuery-Funktion erfasst alle Fehler in SVG-Bildern und ersetzt die Dateierweiterung durch eine alternative Erweiterung

Bitte öffnen Sie die Konsole, um den Fehler beim Laden des Bildes zu sehen. 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">
0
Andres Separ