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

Sie können ein SVG indirekt einfügen, indem Sie das HTML-Tag verwenden, und dies ist auf StackOverflow möglich, wenn Sie dem unten Beschriebenen folgen:

Ich habe die folgende SVG-Datei auf meinem PC

  SVG 3 Circles Intersection 

     Label

     Ticket

     Vecto

Ich habe dieses Bild auf https://svgur.com hochgeladen

Nachdem der Upload beendet war, habe ich folgende URL erhalten:

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

Dann habe ich MANUELL (ohne Verwendung des BILDSymbols) folgendes HTML-Tag hinzugefügt

und das Ergebnis ist direkt darunter

Verwendung von data:image

Für Benutzer mit Zweifeln ist es möglich, zu sehen, was ich bei der Bearbeitung der folgenden Antwort auf StackOverflow beim Einfügen eines SVG-Bildes gemacht habe

BEMERKUNG-1: Die SVG-Datei muss das Element enthalten. Zuerst habe ich einfach eine SVG-Datei erstellt, die direkt mit dem Tag beginnt, und es funktionierte nichts!

BEMERKUNG-2: Zuerst habe ich versucht, ein Bild mit dem BILDSymbol der BEARBEITUNGSWERKZEUGLEISTE einzufügen. Ich habe die URL meiner SVG-Datei eingefügt, aber StackOverflow akzeptiert diese Methode nicht. Das Tag muss manuell hinzugefügt werden.

Ich hoffe, dass diese Antwort anderen Benutzern helfen kann.

Answer 2

Es ist einfacher, das -Tag zu verwenden, da Ihr Code schneller ausgeführt wird und Sie direkt Ihr SVG verwenden. Um nur das SVG-Tag zu erhalten, kopieren Sie die SVG-Datei ohne das XML-Tag. Das Ergebnis wird so aussehen:

Answer 3

Ein einfache Alternative, die für mich funktioniert, besteht darin, den svg-Code in ein div einzufügen. In diesem einfachen Beispiel wird Javascript verwendet, um das div innerHTML zu manipulieren.

svg = ''; 
svg+= '';
svg+= 'IIIIIII';
document.all.d1.innerHTML=svg;

Answer 4

Ich empfehle die Verwendung der Kombination von