sirtilt.school-d2.edu.pl

Wie man ein svg-Bild in html einfügt

In letzter Zeit habe ich mein Interesse an SVG wieder entfacht. Mit SVG kann ich Icons / Diagramme / etc. deklarativ erstellen, so dass sowohl ich als auch der Computer den Quellcode lesen können und dass Versionskontrollsysteme, wie z.B. github, mir die Unterschiede zwischen Dateien leicht zeigen können. Das Titelbild für diesen Beitrag wurde als 20-zeiliges SVG-Bild erstellt (und dann in PNG konvertiert, da Medium keine SVG-Bilder unterstützt) – es zeigt Ihnen auch, dass großartige Technologie wie SVG nicht mit schlechten Designfähigkeiten mithalten kann. Wenn du noch nie mit SVG gespielt hast, kann ich dir auf jeden Fall raten, damit anzufangen!

In diesem Blogbeitrag möchte ich die verschiedenen Möglichkeiten erklären, ein SVG-Bild in eine HTML-Seite einzubetten. Es gibt verschiedene Möglichkeiten, dies zu tun, und es scheint, dass verschiedene Methoden es ermöglichen, dass verschiedene Funktionen innerhalb der SVGs aktiv sind.

Der ursprüngliche Beitrag wurde auf Medium geschrieben und bezieht sich daher auf einige Medium-spezifische Funktionen. Da der Blog seitdem verschoben, treffen nicht alle unten aufgeführten Randnotizen zu oder machen Sinn (Hinweis: In Github Pages können Sie einfach svg verwenden, wie Sie es in HTML&mldr tun würden; Jeh!

Wenn Sie Ihr SVG in einen Medium-Blogbeitrag einbetten möchten, gibt es derzeit (soweit ich weiß) keine gute Möglichkeit, dies zu tun. Wenn Sie ein SVG als Bild hochladen, sehen Sie schnell, dass es an Ort und Stelle flackert und dann durch eine Meldung ersetzt wird, dass Sie nur PNG/JPEG/GIF hochladen können. Sie können das svg als Kern auf github einfügen und dann einbetten. Es wird innerhalb eines großen grauen Rahmens gerendert; es wird NICHT wie ein Bild aussehen....
UPDATE: 31.03.2021: Da meine Einbettung live ist, können Sie das. Siehe meinen Medium-Beitrag dazu!

Medium verwendet embed.ly für seine Einbettungen. Ich habe eine kleine Embedly-fähige Site erstellt, die in der Lage sein sollte, SVGs auf eine viel schönere Weise auf Medium einzubetten. Dies wird derzeit von embedly überprüft; Ich werde posten, wenn es mehr Informationen dazu gibt. Der Rest dieses Blogbeitrags dreht sich um wie man SVGs in normale HTML-Dateien einbettet.

Bevor ich weitermache, sollte ich auch anmerken, dass die SVG-Unterstützung zwischen den Browsern sicherlich noch Unterschiede aufweist. Insbesondere wenn Sie erweiterte SVG-Funktionen verwenden, unterstützen möglicherweise nicht alle Browser diese oder reagieren gleich. Wenn Sie erweiterte SVG-Funktionen verwenden und sicherstellen möchten, dass Ihr Publikum sie so erlebt, wie Sie es beabsichtigt haben, exportieren Sie einfach nach PNG und fügen Sie das leider ein...

Randnotiz 3: Konvertieren von SVGs in PNGs – kostenlos und mit allem Schnickschnack, den ein Browser unterstützt

Ich habe nach einer guten Möglichkeit gesucht, SVGs in PNGs zu exportieren, für die Fälle, in denen SVGs einfach nicht ausreichen (z. B. komplexe, nicht browserübergreifende SVGs, mittlere Beiträge usw.). Es stellt sich heraus, dass so ziemlich jeder, der sagt, dass er das kann (Websites, Kommandozeilentools usw.), mit etwas mehr nicht umgehen kann komplexe SVGs. Nach vielen komplexen Tools (von denen svgexport möglicherweise das beste ist, aber es basiert auf Chromium und war daher nicht in der Lage, das obige Bild richtig zu rendern) und selbst einige zu erstellen (insbesondere: eine HTML-Seite zu haben, die eine SVG-Datei lädt, sie dann in ein Canvas-Objekt rendert und dann zur Konvertierung in PNG verwendet), Neben den einfachen (machen Sie einfach einen Screenshot auf Ihrem Mac und schneiden Sie ihn manuell auf die gewünschten Abmessungen zu), ist die Lösung so einfach wie möglich: FireFox verfügt über ein integriertes Screenshot-Tool. Mit diesem Tool können Sie tatsächlich den Bereich auswählen, den Sie basierend auf DOM-Elementen scannen möchten, sodass Sie ganz einfach nur das SVG auswählen können – fertig! Beachten Sie, dass Sie (natürlich) sicherstellen sollten, dass Ihre SVGs zu 100% angezeigt werden, und auf 2× Retina-Bildschirmen hat Ihr PNG 4 Pixel für jedes SVG-"Pixel".

UPDATE: Ich bin wieder auf der Suche nach einem guten Tool für das; Es scheint, dass bei komplexeren SVGs das Screenshot-Tool nicht mit dem 1-zu-1-:( des Bildschirms übereinstimmt.

Hauptstory: Einbetten von SVGs in HTML, die Grundlagen

Verschiedene Möglichkeiten, ein SVG einzubetten

SVGs können auf unterschiedliche Weise in eine HTML-Seite eingebettet werden ( TL; DR wählen Sie nicht einfach die beste (oder zufällige), für Funktionen und Sicherheit ist es wirklich wichtig, was Sie wählen!):

  • Exportieren Sie das SVG nach PNG und machen Sie einfach eine . Dies funktioniert immer, in allen Browsern, ohne Überraschungen (und ist sicher :)). Im obigen Abschnitt erfahren Sie, wie Sie diesen Export durchführen. Offensichtlich gehen dadurch alle Vorteile von SVG verloren, wie z. B. Dateigröße und Skalierbarkeit.
  • Etikett:. Dadurch wird das Bild für alle Mittel und Zwecke in ein statisches Bild (oder ein Bild mit statischer Animation) umgewandelt.
  • Über die CSS-Eigenschaft: .
  • tag: . Das embed-Tag wird verwendet, um auf externe Inhalte zu verweisen.
  • Etikett:. Das object-Tag stellt eine externe Ressource dar.
  • Etikett:. Ein iframe stellt einen verschachtelten Browsing-Kontext dar. Da ein Browser ein (SVG) selbst anzeigen kann, kann er auch ein SVG-Dokument/Bild in einem iframe (oder einem normalen Frame) anzeigen.
  • Etikett:. Mit dem svg-Tag kann SVG direkt in die HTML-Datei eingefügt werden. Das Tag kann nicht direkt zum Laden einer externen SVG-Datei verwendet werden.
  • -Tag

Der Grund, warum wir darüber sprechen müssen, wie sich diese Einbettungsoptionen unterscheiden, ist, dass SVGs tatsächlich eine Menge können. Ob dieses "Los" tatsächlich das ist, was Sie wollen und erwarten, hängt davon ab, was Sie mit Ihrem SVG beabsichtigen.

Ein SVG ist ein Bild – aber genialer

In seiner einfachsten Form ist ein SVG ein Bild (wie der Name Scalable Vector Graphics schon sagt). Ein SVG kann jedoch so viel mehr sein. Es ist zu beachten, dass die folgende Liste Eigenschaften beschreibt, die nicht immer wünschenswert sind. ob eine Immobilie Die Verfügbarkeit hängt davon ab, wie Sie Ihre SVG-Datei in Ihr Dokument einfügen. Einige der unten aufgeführten Immobilien sind mit Zahlen versehen; Diese Zahlen entsprechen den Zahlen in den Testbildern für jedes Verhalten – die Eigenschaften ohne Zahl sind in Testbildern schwieriger darzustellen, wurden jedoch auf andere Weise getestet.

  • Wiederverwendung von Code: Wie bei einem Bild können Sie eine SVG-Datei einmal definieren und dann an vielen Stellen in Ihre Website laden.
  • Unbegrenzte Auflösung: Da ein SVG vektorbasiert ist, hat es keine "Pixel". Das bedeutet, dass Sie einen SVG-Kreis unbegrenzt vergrößern können (oder: so weit es der Browser zulässt), und Sie werden nie sehen, dass er verpixelt wird.
  • Geplante Animation: Ein SVG kann verschiedene Arten von Animationen enthalten. An dieser Stelle möchte ich über geplante Animationen oder nicht-interaktive Animationen sprechen. Dies kann mit der Animation in einem animierten GIF verglichen werden, da es unabhängig davon gestartet und animiert wird, was ein Benutzer tut. Im Gegensatz zu einem animierten GIF kann es jedoch problemlos Millionen verschiedener "Frames" enthalten, ohne zu einer großen Datei zu werden. Ein Beispiel für eine geplante Animation ist . (1)
  • Pseudoklassenbasierte interaktive Änderungen: Ein SVG kann CSS verwenden, um sich selbst zu stylen, und kann daher CSS-Pseudoklassen verwenden. Wenn man zum Beispiel die Pseudo-Klasse verwendet, kann ein Element erstellt werden, das animiert wird (Farbe, Größe usw. ändert), wenn man mit der Maus darüber fährt: . Beachten Sie, dass geplante Animationen auch in CSS erstellt werden können, und Pseudoklassen-basierte Änderungen können auch Animationen enthalten. Der wichtige Unterschied zwischen diesen beiden Funktionen besteht jedoch darin, ob die Änderungen trotzdem oder durch eine Benutzeraktion ausgelöst werden.
  • Links: SVG-Dateien können Tags enthalten, um bestimmte Elemente auf eine andere Seite zu verlinken.
  • (2)
  • Externe Bilder: Innerhalb einer SVG-Datei können Sie andere (SVG oder PNG) Bilder einbinden. (3)
  • Externe SVG-Referenzen: SVG Dateien können mit anderen (externen) SVG-Dateien verknüpft werden, um Dinge zu importieren. Zum Beispiel kann es ein Tag geben. (4)
  • Externe CSS-Referenzen: Eine SVG-Datei kann einen Zeiger auf ein externes Stylesheet enthalten. Anders als in HTML, wo ein Element in der verwendet wird, haben SVGs kein a und der korrekte Weg, um auf einen Stil zu verlinken, ist . (5)
  • . (6)
  • Zugriff auf das SVG-Dom aus der gehosteten HTML-Seite heraus. (7)
  • Die Stile innerhalb des SVGs interagieren mit den Stilen im HTML-Dokument (was bedeutet, dass Sie Stylesheets innerhalb von HTML verwenden können, um das SVG zu gestalten, aber auch, dass alle Stile innerhalb des SVG verwendet werden können, um das HTML zu formatieren - darüber hinaus Wenn Sie 2 SVGs auf einer Seite haben, interagieren die in einer Seite definierten Stylesheets mit den Stylesheets in der anderen. (9)

Wir möchten für jede der Eigenschaften in der vorherigen Liste beschreiben, ob sie möglich sind, je nachdem, wie Sie Ihr SVG einbetten. Es soll beschrieben werden, wie Moderne Browser handeln, und was die Dokumentation dazu ist. Ich werde alle Verhaltensweisen in den aktuellen Versionen von Safari, Chrome und Firefox, die ich installiert habe, testen. Das Ziel ist explizit nicht, genau herauszufinden, welche Browser und Versionen sich wie verhalten – verwenden Sie dafür caniuse.com oder MDN.

Ein weiterer Unterschied, der sich zwischen den Einbettungsmethoden zeigt, ist die Art und Weise, wie SVGs in ihren Containern skaliert werden. Dieses Thema ist so komplex, dass es einen eigenen Blog rechtfertigt, und zum Glück hat das schon jemand getan! Die Quintessenz ist: Es gibt Unterschiede, und ich werde nicht darüber sprechen.

Ergebnisse (einfach)

In der folgenden Tabelle versuche ich deutlich zu machen, welche Einbettungsmethoden welche Eigenschaften unterstützen. Es sollte beachtet werden, dass es sich um eine Tabelle mit vielen (Fuß-)Noten handelt, die ich im Folgenden beschreibe.

Ich habe eine Testseite erstellt, auf der alle nummerierten Eigenschaften getestet wurden – jede Zahl wird nur durch die Eigenschaft angezeigt, die sie beschreibt; z.B. ist die (1) wird durch eine geplante Animation angezeigt, die die Deckkraft ändert. Jede Einbettungsmethode, die ich dreimal ausprobiert habe, in einer wird das SVG auf derselben Domain gehostet; In der zweiten Charge wird die SVG auf einer anderen Domäne als die Hosting-Seite gehostet (beachten Sie, dass in diesem Fall alle externen Ressourcen, die innerhalb der SVG geladen werden, aus derselben Domäne wie die SVG stammen). Im letzten Durchlauf wird das SVG als Daten-URL ausgedrückt: . Den Code, der für diese Tests verwendet wird, finden Sie auf github.

Die Ergebnisse (all die kleinen Details)

Es gibt viele kleine Details, Schlussfolgerungen, zusätzliche Dokumentationen, die ich hier gerne teile.

Im Allgemeinen können wir 4 Möglichkeiten unterscheiden, ein SVG zu hosten:

  • Transformieren Sie es in eine Bitmap (entweder durch Speichern als PNG oder durch Zeichnen auf einer Leinwand). Auf beide Arten verlieren Sie die Vektorhaftigkeit des Bildes (was auch bedeutet, dass Sie, wenn Sie möchten, dass Ihr Bild auf einem Retina-Bildschirm gut aussieht, sicherstellen, dass Sie die Auflösung Ihres Bildes verdoppeln. canvas/PNG-Datei). Sie erhalten die Funktionen, die beim Exportieren des Bildes (Export) angezeigt wurden, oder gar keine, wenn Sie eine Leinwand verwenden. Du verlierst alle anderen ausgefallenen SVG-Sachen (ich denke, du könntest versuchen, ein SVG in ein animiertes GIF zu exportieren, um auf diese Weise etwas Animation zu behalten).
  • Hosten Sie es als Bild, entweder über das Tag oder als CSS-Befehl. Beachten Sie, dass dieser Modus auch verwendet wird, wenn ein externes svg-Image innerhalb eines svg über das Tag gehostet wird. W3C beschreibt, was wir von einem Bild erwarten können (siehe Screenhot unten), und das ist genau das, was wir unter einem Bild verstehen: statisches Bild, Animation erlaubt, aber kein interaktives Zeug oder irgendetwas anderes Ausgefallenes.

  • Einbettung durch oder . Alle drei erlauben genau den gleichen Zugriff von außen in das SVG sowie von vom SVG nach außen, während sie gleichzeitig getrennt sind (keine Interferenz von Stylesheets) und die Verwendung einer externen SVG-Datei als Quelle ermöglichen.
    Wie erwartet, wenn Das SVG wird von einer Domain bereitgestellt, die sich von der HTML-Datei unterscheidet, alle Aufrufe von HTML zu SVG und Reverse schlagen aufgrund des domänenübergreifenden Schutzes fehl (z. B. (7), (8)). Beachten Sie, dass ein Daten-URI auch als eine andere Domäne behandelt wird.
    Im Falle einer URL befindet sich die externe SVG-Datei, aus der wir versuchen, ein Segment einzubinden, auf einer anderen Domain, weshalb Test (4) bei diesen URLs fehlschlägt.
    Offensichtlich könnten einige dieser domänenübergreifenden Probleme mit den entsprechenden CORS-Headern gelöst werden.
  • Einfügen des SVG-Codes in die HTML-Datei mit dem html-Tag. In diesem Fall ist das SVG Teil des HTML-DOM; Dies bedeutet vollständiges Eintauchen, Sie können das CSS Ihrer HTML-Seite verwenden, um Ihr SVG zu gestalten. Sie können SVG-Selektoren erstellen, die einen HTML- und SVG-Pfad kombinieren (z. B. ), was in keiner anderen Einbettungsmethode möglich ist. Der Nachteil davon ist, dass Sie jegliche Trennung verlieren, und wenn Sie mehr als 1 Tag haben, kann es zu Kollisionen in den Stilen kommen.
    Das Einbetten eines externen Stylesheets in dieses Tag schlägt fehl. Dies ist jedoch sinnvoll, da die Möglichkeit, ein externes Stylesheet in eine Datei einzubetten, darin besteht, ein Tag außerhalb der Tags hinzuzufügen. Das bedeutet, dass der Versuch, dies in der embed-Methode zu tun, zu einem Tag im HTML der Seite führt, und dies wird ignoriert. Natürlich ist es möglich, ein in Ihrem HTML zu verwenden und auf diese Weise ein externes Stylesheet einzubetten.