Verzeihen Sie mir, wenn ich auf diese Methoden nicht gut zu sprechen bin. Ich bin noch nie auf einen Anwendungsfall gestoßen, bei dem sie definitiv der richtige Weg sind. Es gab eine Zeit, da war <object> die einzige Möglichkeit, SVG zu verwenden, aber diese Zeiten sind vorbei.
Siehe den Pen AmEdC von Chris Coyier (@chriscoyier) auf CodePen.
Einer der Gründe, dies in der Vergangenheit auf diese Weise zu tun (anstatt <img> zu verwenden), war, dass das SVG Interaktivität wie Hover-Effekte und Animationen beibehielt. Browser beginnen, dies auch mit SVG-als-Bild zu ermöglichen, während ich dies schreibe.
Die SVG-Elemente, die mit embed und object eingebunden wurden, erscheinen in Chrome 38 nicht, aber in Safari 8.
Gibt es irgendwo eine Spickzettel oder Kurzübersicht darüber, welche Browser Animationen, Interaktivität usw. für Inline vs. Embed vs. Hintergrund usw. unterstützen?
Ich bin mir nicht sicher, ob es genau das hat, wonach Sie suchen, aber versuchen Sie es mit http://caniuse.com/
Ja, ich sehe auch, dass object/embed in Chrome hier nicht funktioniert. Was schon komisch ist, denn ich kann eigentlich nichts falsch an der SVG oder dem Code finden und ich bin ziemlich sicher, dass Chrome damit keine Probleme hat. Wenn Sie die .zip-Datei des Pens herunterladen und lokal öffnen, funktioniert es. Sogar mit einer file:// URL, also ist es kein Problem mit verschiedenen Domains. Vielleicht ist es etwas Merkwürdiges mit den sandboxed iframes, die CodePen-Nutzer verwenden, oder mit der Content Security Policy, die wir verwenden, oder etwas Ähnliches.
Der Abschnitt "Grundlegende Unterstützung" auf Can I Use, den John verlinkt hat, sollte die Unterstützung für object/embed erwähnen.
Hallo, ich versuche es, aber ich möchte, dass die SVG in einem a href ist. Ich habe versucht, es auf alle drei Arten hinzuzufügen, und wenn ich mit der Maus über die SVG fahre, werden meine Hover-Effekte nicht darauf angewendet. Irgendwelche Tipps dazu?