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

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

Answer 2

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

Answer 3

Wenn Sie Tags verwenden, werden webkit-basierte Browser keine eingebetteten Bitmap-Bilder anzeigen.

Für jede Art von fortgeschrittener SVG-Verwendung bietet die SVG-Inline-Option mit Abstand die größte Flexibilität.

Internet Explorer und Edge werden das SVG korrekt skalieren, aber Sie müssen sowohl Höhe als auch Breite angeben.

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

Sie können auch Web-Schriftarten im SVG verwenden, indem Sie sie in Ihr reguläres Stylesheet einbinden.

Hinweis: Wenn Sie SVGs aus Illustrator exportieren, werden die Web-Schriftnamen falsch sein. Dies können Sie in Ihrem CSS korrigieren und vermeiden, im SVG herumzupfuschen. Zum Beispiel gibt Illustrator Arial den falschen Namen, den Sie so korrigieren können:

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

All dies funktioniert in jedem Browser, der seit 2013 veröffentlicht wurde.

Zum Beispiel siehe ozake.com. Die gesamte Website besteht aus SVGs, bis auf das Kontaktformular.

Warnung: Web-Schriftarten werden in Safari ungenau skaliert - und wenn Sie viele Übergänge von Normaltext zu fett oder kursiv haben, kann es an den Übergangspunkten zu einer kleinen Menge zusätzlichen oder fehlenden Platzes kommen. Weitere Informationen finden Sie in meiner Antwort bei dieser Frage.

Answer 4

Hier ist eine Zusammenfassung aller Methoden, die ich gefunden habe, um SVGs in HTML-Vorlagen einzufügen, zusammen mit ihren Unterschieden und ihren Hauptvor- und Nachteilen:

((( 1 )))

/* in CSS */
background-image: url(happy.svg);

Auf diese Weise lässt weder die JS-Interaktion zu, noch könnte das CSS selbst eine feinere Kontrolle über die SVG-Teile haben.

((( 2 )))

Genau wie ((( 1 ))), lässt weder die JS-Interaktion zu, noch könnte das CSS selbst eine feinere Kontrolle über die SVG-Teile haben.

Methoden ((( 1 ))) und ((( 2 ))) sind nur gut, wenn Sie ein statisches svg wollen.

Hinweis: Wenn Sie das -Tag verwenden und in dem srcset-Attribut ein SVG angeben und der Browser es nicht unterstützt, wird automatisch auf das src-Attribut zurückgegriffen.

((( 3 )))

 ...

Diese Methode hat keine der oben genannten Nachteile von ((( 1 ))) und ((( 2 ))), jedoch macht diese Methode den Vorlagen-Code unordentlich und auch SVGs werden kopiert und eingefügt, sodass sie nicht in ihren eigenen individuellen Dateien sein werden.

((( 4 )))

ODER:

Bei Verwendung dieser Methode ist das SVG nicht über externes CSS zugänglich, kann jedoch über JavaScript zugänglich sein.

((( 5 )))

Verwenden Sie iconfu/svg-inject, um die SVGs in ihren eigenen individuellen Dateien zu behalten (um den Vorlagen-Code viel sauberer zu halten), fügen Sie jetzt die SVGs mit -Tags hinzu, und svg-inject verwandelt sie automatisch in Inline-SVGs, sodass sie sowohl von CSS als auch von JavaScript zugänglich sein werden.

Hinweis1: Diese Methode funktioniert auch, wenn imgs dynamisch hinzugefügt werden (mit JavaScript).

Hinweis2: SVGs, die mit dieser Methode hinzugefügt werden, werden auch von Browsern wie Bildern zwischengespeichert.

((( 6 )))

Verwenden einer einzigen SVG-Sprite-Datei, verwenden Sie dann -Tags, um sie einzufügen. Diese Methode ist auch ziemlich flexibel und hat den gleichen Effekt wie ((( 5 ))). Diese Methode (und einige mehr) sind in Aktion in diesem Video.

((( 7 )))

(React-spezifische Methode) Wandel sie in React-Komponenten um (oder schreibe eine Komponente, die sie lädt).

((( 8 )))

Laut MDN haben die meisten modernen Browser die Unterstützung für Browser-Plug-Ins abgelehnt und entfernt. Das bedeutet, dass es im Allgemeinen nicht ratsam ist, sich auf zu verlassen, wenn Sie möchten, dass Ihre Website im Browser des durchschnittlichen Benutzers funktioniert.

Answer 5

Meine Meinung: Stand 2019 können 93 % der verwendeten Browser (und 100 % der letzten beiden Versionen von jedem von ihnen) SVG in -Elementen verarbeiten:

Quelle: Can I Use

Also könnten wir sagen, dass es keinen Grund mehr gibt, ```zu verwenden.

Allerdings gibt es immer noch seine Vorteile:

• Beim Inspektionieren (z. B. mit Chrome Dev Tools) wird Ihnen der gesamte SVG-Code angezeigt, falls Sie etwas damit verändern und Live-Änderungen sehen wollen.

• Es bietet eine sehr robuste Ersatzimplementierung, falls Ihr Browser SVGs nicht unterstützt (Moment mal, aber das tut jeder!) und funktioniert auch, wenn das SVG nicht gefunden wird. Dies war ein wichtiges Feature der XHTML2-Spezifikation, das so etwas wie Betamax oder HD-DVD ist

Aber es gibt auch Nachteile:

• es gibt kein AMP-Äquivalent zu (obwohl es völlig sicher ist, es mit zu verwenden [und es auch inline zu verwenden](https://www.ampproject.org/docs/fundamentals/spec#svg).* [Sie sollten keinen serviceworker fetch-Handler mit irgendeiner Art von Einbettung mischen](https://w3c.github.io/ServiceWorker/#implementer-concerns), daher kann ein `-Tag Ihre PWA daran hindern, wirklich offlinefähig zu sein.`