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

Question

Sollte ich , ` oder verwenden, um SVG-Dateien auf eine Seite zu laden, ähnlich wie das Laden einerjpg,gifoderpng`?

Was ist der Code für jede Option, um sicherzustellen, dass es so gut wie möglich funktioniert? (Ich sehe Verweise darauf, dass der MIME-Typ eingebunden werden muss oder auf Fallback SVG-Renderer in meiner Recherche und finde keine gute Referenz zum Stand der Technik).

Anzunehmen ist, dass ich die SVG-Unterstützung mit Modernizr überprüfe und für nicht SVG-fähige Browser fallback (wahrscheinlich durch einen Ersatz mit einem einfachen -Tag) mache.``

Answer 1

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 ``verwenden, erhalten Sie kostenloses Rasterfallback*:

*) Nun ja, nicht ganz kostenlos, da einige Browser beide Ressourcen herunterladen, siehe den Vorschlag von Larry unten, wie Sie das umgehen können.

Aktualisierung 2014:

• Wenn Sie ein nicht-interaktives SVG möchten, verwenden Sie mit Skript-Fallbacks zur PNG-Version (für ältere IE und Android < 3). Ein sauberer und einfacher Weg, das zu tun:

  ![](dein.svg).

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

• Wenn Sie ein interaktives SVG möchten, verwenden Sie entweder </code> oder <code><object></code>. </p></li> <li><p>Wenn Sie älteren Browsern die Möglichkeit geben müssen, ein SVG-Plugin zu verwenden, verwenden Sie <code><embed></code>.</p></li> <li><p>Für SVG in CSS <code>background-image</code> und ähnlichen Eigenschaften ist <a href="http://modernizr.com" rel="noreferrer">modernizr</a> eine Möglichkeit, um auf Fallback-Bilder umzuschalten, eine weitere Möglichkeit besteht darin, sich auf mehrere Hintergründe zu verlassen, um dies automatisch zu tun:</p> <pre><code>div { background-image: url(fallback.png); background-image: url(dein.svg), none; } </code></pre> <p><strong><em>Hinweis</strong>: die Strategie mit mehreren Hintergründen funktioniert nicht auf Android 2.3, da es mehrere Hintergründe unterstützt, aber kein SVG.</em></p></li> </ul> <p>Ein weiterer guter Beitrag ist <a href="http://css-tricks.com/svg-fallbacks/" rel="noreferrer">dieser Blogbeitrag</a> über SVG-Fallbacks.</p></x-turndown>

``

Answer 2

Von IE9 und höher können Sie SVG in einem gewöhnlichen IMG-Tag verwenden..

https://caniuse.com/svg-img

Answer 3

`und haben eine interessante Eigenschaft: Sie ermöglichen es, eine Referenz auf das SVG-Dokument aus dem äußeren Dokument zu erhalten (unter Berücksichtigung der Same-Origin-Richtlinie). Diese Referenz kann dann verwendet werden, um das SVG zu animieren, seine Stylesheets zu ändern usw.

Gegeben

Dann können Sie Dinge wie

document.getElementById("svg1").addEventListener("load", function() {
    var doc = this.getSVGDocument();
    var rect = doc.querySelector("rect"); // nehmen wir an, unser Bild enthält ein 
    rect.setAttribute("fill", "green");
});`

Answer 4

Verwenden Sie srcset

Die meisten aktuellen Browser unterstützen heute das Attribut srcset, mit dem unterschiedliche Bilder für verschiedene Benutzer angegeben werden können. Zum Beispiel können Sie es für eine Pixeldichte von 1x und 2x verwenden, und der Browser wird die richtige Datei auswählen.

In diesem Fall, wenn Sie in dem srcset ein SVG angeben und der Browser dies nicht unterstützt, wird auf das src zurückgegriffen.

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

1. Es verlässt sich nicht auf seltsame Hacks oder Skripte
2. Es ist einfach
3. Sie können immer noch alternativen Text einbeziehen
4. Browser, die srcset unterstützen, sollten wissen, wie sie damit umgehen sollen, damit sie nur die benötigte Datei herunterladen.

Answer 5

I personally would use a Tag, because then you have full control over it. If you use it in an Tag, you won't be able to control the inside of the SVG with CSS etc.

Another thing is browser support.

Just open your svg file and paste it directly into the template.

then in your CSS, you can simply do:

svg {
  fill: red;
}

Some resource: SVG tips