Soll ich <img>
, <object>
oder <embed>
zum Laden von SVG - Dateien in einer Seite in ähnlicher Weise wie Laden einesjpg
, gif
oder png
?
Was ist der Code für jeden, um sicherzustellen, dass er so gut wie möglich funktioniert? (Ich sehe Verweise darauf, den Mimetyp einzubeziehen oder auf Fallback-SVG-Renderer in meine Forschung zu verweisen, und sehe keine Referenz auf dem neuesten Stand der Technik).
Angenommen, ich überprüfe die SVG-Unterstützung mit Modernizr und greife auf <img>
nicht SVG-fähige Browser zurück (wahrscheinlich durch einen einfachen Tag).
html
svg
vector-graphics
artlung
quelle
quelle
<svg>
von der Sie auf andere SVGs verweisen möchten. Dies kann zB mit erreicht werden<image>
.Antworten:
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
<object>
Sie kostenlos Raster-Fallback *:*) Nun, nicht ganz kostenlos, da einige Browser beide Ressourcen herunterladen. Siehe Larry's Vorschlag unten, wie Sie das umgehen können.
Update 2014:
Wenn Sie ein nicht interaktives SVG möchten, verwenden Sie es
<img>
mit Skript-Fallbacks für die PNG-Version (für ältere IE und Android <3). Ein sauberer und einfacher Weg, 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 möchten, 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 ähnlichen Eigenschaften ist modernizr eine Option für den Wechsel zu Fallback-Bildern, eine andere hängt von mehreren Hintergründen ab, um dies automatisch zu tun:Hinweis : Die Strategie für mehrere Hintergründe funktioniert unter Android 2.3 nicht, da sie mehrere Hintergründe unterstützt, jedoch kein SVG.
Eine weitere gute Lektüre ist dieser Blogpost über SVG-Fallbacks.
quelle
<param name="src" value="your.svg" />
das<object>
Tag hinzufügen . Ich habe sehr lange versucht, herauszufinden, wie man das alles macht, und ich glaube, ich habe es endlich geschafft.Ab IE9 können Sie SVG in einem normalen IMG-Tag verwenden.
https://caniuse.com/svg-img
quelle
<img/>
Tag verwendet, möchte möglicherweise Informationen zum Anhängen von SVG-Verwaltungskennungen erhalten , z. B. "<img src="myimage.svg#svgView(preserveAspectRatio(none))" />
", mit denen Sie das SeitenverhältnisviewBox
usw. steuern können , genau wie bei Inline-SVG-Definitionen. Weiterführende Literatur zur Skalierung - css-tricks.com/scale-svg<object>
und<embed>
haben eine interessante Eigenschaft: Sie ermöglichen es, einen Verweis auf ein SVG-Dokument aus dem äußeren Dokument zu erhalten (unter Berücksichtigung der Richtlinie mit demselben Ursprung). Die Referenz kann dann verwendet werden, um die SVG zu animieren, ihre Stylesheets zu ändern usw.Gegeben
Sie können dann Dinge wie tun
quelle
Die beste Option ist, SVG-Bilder auf verschiedenen Geräten zu verwenden :)
quelle
onerror
Feuer, wenn SVG nicht rendert? Welche Browser haben Sie getestet?Verwenden
srcset
Die meisten aktuellen Browser unterstützen heute das
srcset
Attribut , mit dem unterschiedliche Bilder für verschiedene Benutzer angegeben werden können. Sie können es beispielsweise für 1x und 2x Pixeldichte verwenden, und der Browser wählt die richtige Datei aus.Wenn Sie in diesem Fall eine SVG in der angeben
srcset
und der Browser diese nicht unterstützt, wird auf die zurückgesetztsrc
.Diese Methode hat gegenüber anderen Lösungen mehrere Vorteile:
srcset
sollten wissen, wie sie damit umgehen sollen, damit nur die benötigte Datei heruntergeladen wird.quelle
Wenn Ihre SVGs vollständig mit CSS formatiert werden sollen, müssen sie im DOM inline sein. Dies kann durch SVG-Injection erreicht werden, die Javascript verwendet, um ein HTML-Element zu ersetzen (normalerweise ein
<img>
Element) durch den Inhalt einer SVG-Datei nachdem die Seite geladen wurde.Hier ist ein minimales Beispiel für die Verwendung von SVGInject :
Nach dem Laden des Bildes
onload="SVGInject(this)
löst das die Injektion aus und das<img>
Element wird durch den Inhalt der in der Datei bereitgestellten Datei ersetztsrc
Attribut angegebenen . Dies funktioniert mit allen Browsern, die SVG unterstützen.Haftungsausschluss: Ich bin Mitautor von SVGInject
quelle
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 verwenden, können<img>
Sie die Innereien der SVG nicht mit CSS usw. steuern.Eine andere Sache ist die Browserunterstützung .
Öffnen Sie einfach Ihre
svg
Datei und fügen Sie sie direkt in die Vorlage ein.dann können Sie in Ihrem CSS einfach zB:
Einige Ressourcen: SVG-Tipps
quelle
Wenn Sie <img> -Tags verwenden, zeigen Webkit-basierte Browser keine eingebetteten Bitmap-Bilder an .
Für jede Art von fortgeschrittener SVG-Verwendung, einschließlich der SVG-Inline, bietet bei weitem die größte Flexibilität.
Internet Explorer und Edge ändern die Größe der SVG-Datei korrekt , Sie müssen jedoch sowohl die Höhe als auch die Breite angeben.
Sie können onclick, onmouseover usw. hinzufügen . innerhalb des SVG zu jeder Form in der SVG hinzufügen: onmouseover = "top.myfunction (evt);"
Sie können auch Web-Schriftarten verwenden in der SVG-Datei verwenden, indem Sie sie in Ihr reguläres Stylesheet aufnehmen.
Hinweis: Wenn Sie SVGs aus Illustrator exportieren, sind die Namen der Webschriftarten falsch. Sie können dies in Ihrem CSS korrigieren und vermeiden, in der SVG herumzuspielen. Zum Beispiel gibt Illustrator Arial den falschen Namen, und Sie können dies folgendermaßen beheben:
All dies funktioniert mit jedem Browser, der seit 2013 veröffentlicht wurde .
Ein Beispiel finden Sie unter ozake.com . Die gesamte Website besteht aus SVGs mit Ausnahme des Kontaktformulars.
Warnung: Die Größe von Web-Schriftarten wird in Safari ungenau geändert. Wenn Sie viele Übergänge von einfachem Text zu fett oder kursiv haben, ist an den Übergangspunkten möglicherweise etwas zusätzlicher oder fehlender Speicherplatz vorhanden. Weitere Informationen finden Sie in meiner Antwort auf diese Frage .
quelle
img
Tag keine Rasterbilder angezeigt wurden ... Wissen Sie, ob dies irgendwo offiziell dokumentiert ist?Meine zwei Cent: Ab 2019 können 93% der verwendeten Browser (und 100% der letzten beiden Versionen von jedem von ihnen) SVG in
<img>
Elementen verarbeiten:Quelle: Kann ich verwenden
Wir könnten also sagen, dass es keinen Grund
<object>
mehr gibt, etwas zu verwenden .Aber es hat immer noch seine Profis :
Bei der Inspektion (z. B. mit Chrome Dev Tools) wird das gesamte SVG-Markup angezeigt, falls Sie etwas daran manipulieren 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 Hauptmerkmal der XHTML2-Spezifikation, die Betamax oder HD-DVD ähnelt
Es gibt aber auch Nachteile :
<object>
(obwohl es absolut sicher ist, es mit<amp-img>
und auch inline zu verwenden .<object>
Tag haben, kann dies dazu führen, dass Ihre PWA nicht wirklich offline ist.quelle
Es wurde eine Lösung mit reinem CSS und ohne Doppelbild-Download gefunden. Es ist nicht schön wie ich will, aber es funktioniert.
Die Idee ist, spezielles SVG mit Fallback-Stil einzufügen.
Weitere Details und Testverfahren finden Sie in meinem Blog .
quelle
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 von image svg zu sehen
quelle
Ich empfehle die Kombination von
quelle
Sie können eine SVG indirekt mit einfügen
<img>
HTML-Tags Dies ist in StackOverflow wie folgt möglich:Ich habe folgende SVG-Datei auf meinem PC
Ich habe dieses Bild auf https://svgur.com hochgeladen
Nachdem der Upload beendet wurde, habe ich folgende URL erhalten:
Ich habe dann MANUELL (ohne IMAGE-Symbol) folgendes HTML-Tag hinzugefügt
und das Ergebnis ist knapp darunter
Für Benutzer mit einigen Zweifeln ist es möglich zu sehen, was ich beim Bearbeiten der folgenden Antwort auf StackOverflow beim Einfügen eines SVG-Bildes getan habe
BEMERKUNG-1: Die SVG-Datei muss ein
<?xml?>
Element enthalten. Zu Beginn habe ich einfach eine SVG-Datei erstellt, die direkt mit dem<svg>
Tag beginnt und nichts hat funktioniert!BEMERKUNG-2: Zu Beginn habe ich versucht, ein Bild mit dem
IMAGE
Symbol von einzufügenEdit Toolbar
. Ich füge die URL meiner SVG-Datei ein, aber StackOverflow akzeptiert diese Methode nicht. Das<img>
Tag muss manuell hinzugefügt werden.Ich hoffe, dass diese Antwort anderen Benutzern helfen kann.
quelle