Inline-SVG oder img: Das Verhalten deiner Grafik wählen

Verwende ein SVG in einem <img>-Element, wenn du eine fertige Grafik anzeigen möchtest. Füge das SVG inline ein, wenn die Seite einzelne Formen mit CSS oder JavaScript ändern muss. Beide Ansätze können dieselbe Vektorgrafik in unterschiedlichen Größen darstellen; Inline-Einbettung verbessert ihre Geometrie nicht.

Dieser Unterschied zählt, wenn ein Logo in einem Browser-Tab korrekt aussieht, aber die Farbregel deiner Webseite ignoriert. Die Datei kann in Ordnung sein. Die Regel hat möglicherweise einfach keinen Zugriff darauf. Unten erscheint dieselbe Bergillustration in beiden Formen, damit du den Unterschied prüfen kannst, bevor du deine Asset-Verarbeitung änderst.

Wähle das benötigte Verhalten

Ein externes SVG bleibt eine Vektordatei, wenn es über <img> angezeigt wird. Die Grenze liegt zwischen der Seite und den internen Elementen der Datei. Seiten-CSS kann das Bildelement skalieren, drehen oder ausblenden, doch ein Selektor wie .logo path erreicht keine Pfade in seiner src-Ressource. Inline-Formen werden Teil des Dokumentbaums der Seite. Der SVG-Einbettungsleitfaden von MDN beschreibt diese beiden Ansätze.

Wenn du noch prüfst, was die Datei enthält, beginne mit was eine SVG-Datei ist. Die Dateiendung .svg allein bedeutet nicht, dass jedes sichtbare Detail ein Pfad ist. Folge für eine Shop-Übergabe nach der Inhaltsprüfung dem Leitfaden zu eigenen SVG-Icons in Shopify.

Teste dieselbe Grafik in beiden Formen

Für diese Demonstration erstellten wir zwei Bergpfade und einen Sonnenkreis von Hand. Wir luden diese Grafik aus einer separaten Datei und kopierten dieselben Formen ins HTML. Das ist ein Einbettungstest, kein PerfectVector-Konvertierungsergebnis.

In unserem Chromium-Browser-Test belegten beide Varianten zunächst 360 × 240 CSS-Pixel und zeigten eine bernsteinfarbene Sonne. Danach aktivierten wir eine Seitenregel für .sun. Die Inline-Sonne wurde korallfarben; die Sonne des externen Bildes blieb bernsteinfarben. Das Verkleinern beider Rahmen auf 180 × 120 änderte ihre Darstellungsgröße, ohne diesen Unterschied zu ändern.

1. Speichere die separate SVG-Datei

Erstelle artwork.svg mit diesem vollständigen Quelltext. Die viewBox definiert den Koordinatenraum der Zeichnung. Breite und Höhe geben ihr explizite Ausgangsabmessungen.

<svg xmlns="http://www.w3.org/2000/svg"
     width="240" height="160" viewBox="0 0 240 160">
  <path d="M34 120 104 26 174 120Z" fill="#233b63" />
  <circle class="sun" cx="183" cy="43" r="20" fill="#f59e0b" />
  <path d="M80 120 146 59 210 120Z" fill="#65a7a0" />
</svg>

2. Füge Bild und Inline-Kopie hinzu

Speichere Folgendes als index.html neben artwork.svg und öffne es dann im Browser. Die beiden Grafiken haben dieselbe Geometrie und dieselben Farbgebungsattribute. Die Inline-Variante hat außerdem einen Namen für assistive Technologien.

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>SVG embedding test</title>
<style>
  .artwork {
    display: block;
    width: 360px;
    max-width: 100%;
    height: auto;
  }
  .theme .sun { fill: #d94862; }
</style>
<body class="theme">
  <h1>External image</h1>
  <img class="artwork" src="artwork.svg"
       width="240" height="160"
       alt="Mountain and sun illustration">
 
  <h2>Inline SVG</h2>
  <svg class="artwork" xmlns="http://www.w3.org/2000/svg"
       width="240" height="160" viewBox="0 0 240 160"
       role="img" aria-labelledby="mountain-title">
    <title id="mountain-title">Mountain and sun illustration</title>
    <path d="M34 120 104 26 174 120Z" fill="#233b63" />
    <circle class="sun" cx="183" cy="43" r="20" fill="#f59e0b" />
    <path d="M80 120 146 59 210 120Z" fill="#65a7a0" />
  </svg>
</body>
</html>

Der Screenshot verwendet ein gestaltetes Vergleichslayout um dieselben Formen. Das kleinere Beispiel oben hält das Verhalten leicht reproduzierbar.

3. Ändere jeweils nur eine Variable

Entferne class="theme" aus dem body-Element und lade neu. Beide Sonnen sollten jetzt bernsteinfarben sein. Stelle die Klasse wieder her; nur die Inline-Sonne sollte korallfarben werden. Ändere .artwork von width: 360px in width: 180px; bei genügend Platz im Container sollten beide Grafiken auf 180 × 120 schrumpfen.

Wenn du die Sonne des externen Bildes dauerhaft ändern möchtest, bearbeite ihr fill in artwork.svg. Wenn sie auf den Seitenzustand reagieren soll, wähle Inline-Markup oder eine andere bewusst gewählte Ausgabemethode. Unser Leitfaden zum Ändern von SVG-Farben behandelt das Bearbeiten der Datei selbst.

Der Name .sun wurde für dieses Beispiel hinzugefügt. Eine konvertierte oder exportierte Datei enthält nicht zwangsläufig für jeden sinnvollen Teil eine nützliche Klasse. Prüfe und benenne die Formen, die du steuern möchtest, statt anzunehmen, ein sichtbares Objekt sei ein einzelner auswählbarer Pfad.

Lege Größe und Namen für assistive Technologien ausdrücklich fest

Behalte die viewBox, wenn du Grafik ins HTML überträgst. Setze Breiten- und Höhenattribute als sinnvolle Ausgangsbasis und wende danach responsives CSS an. Bei dieser Illustration mit 3:2 erhält width: 180px; height: auto ihre Proportionen. Ein großer leerer Rand innerhalb der viewBox bleibt bei beiden Methoden Teil der Zeichenfläche; eine andere Einbettung kann ihn nicht entfernen.

Wenn der Layoutrahmen ein anderes Verhältnis hat, vergleicht der Leitfaden zum Einpassen mit preserveAspectRatio vollständiges Einpassen, Beschneiden und Verzerren der Grafik.

Schreibe bei einem bedeutungstragenden externen Bild alt auf das HTML-<img>. Bei einem bedeutungstragenden Inline-Bild verwendet das Beispiel role="img" und aria-labelledby, das auf seinen <title> zeigt. Inline-SVG verwendet nicht das alt-Attribut eines HTML-Bildes. Diese Benennungsmöglichkeiten sind im Leitfaden SVG in HTML von MDN dokumentiert.

Wenn du das Inline-Beispiel wiederholst, gib jeder title-ID einen eindeutigen Wert und aktualisiere ihr zugehöriges aria-labelledby. Dieselbe Sorgfalt gilt für IDs in Verläufen, Masken oder Beschneidungspfaden. Verwende für dekorative Grafik neben gleichwertigem sichtbarem Text ein leeres alt auf <img> oder verbirg das Inline-SVG mit aria-hidden="true" vor assistiven Technologien. Teste den vollständigen Link oder Button im Kontext, damit sein Zweck weiterhin benannt ist.

Für viele wiederverwendbare Icons führt ein SVG-Symbol-Sprite einen separaten Ansatz aus Definitionen und Instanzen ein. Entscheide, ob du diese Wiederverwendung brauchst, bevor du eine große Menge Kopien in jede Seite einfügst.

Behandle Leistung als Messfrage

Inline-Markup setzt die Formen ins Dokument, statt die Grafik als separate Bildressource abzurufen. Es vergrößert außerdem das Markup des Dokuments. Eine externe Datei kann aus dem Browser-Cache wiederverwendet werden, abhängig von URL, Antwort-Headern und Cache-Zustand. Der HTTP-Caching-Leitfaden von MDN erklärt diese Bedingungen.

Keiner dieser Fakten belegt, welche Variante deine Seite schneller macht. Vergleiche die tatsächliche Seite bei einem Erstbesuch und einem Wiederholungsbesuch, mit ihrer realen Anzahl an Kopien und tatsächlichen SVG-Komplexität. Diese Demonstration testet Zugriff auf die Farbgebung und Größenverhalten; sie ist kein Ladegeschwindigkeits-Benchmark.

Der externe Bildmodus hat auch über CSS hinaus Einschränkungen. MDN dokumentiert, dass SVG als Bild JavaScript deaktiviert und externe Ressourcen beschränkt. Verschiebe ein unbekanntes SVG nicht einfach inline, um eine fehlende Funktion zum Laufen zu bringen. Prüfe und bereinige nicht vertrauenswürdiges Markup, bevor du es in eine Seite einbindest.

Wenn deine Ausgangsgrafik nur ein PNG ist

Vektorisierung gehört vor diese Einbettungsentscheidung, wenn der Quelle die benötigten Formen fehlen. Konvertiere bei einem geeigneten Rasterlogo oder einer Illustration das PNG mit PerfectVector in SVG, prüfe das Ergebnis gegen die Quelle und behalte das akzeptierte SVG als Grafik-Masterdatei. Prüfe Silhouette, Löcher und kleine Farbbereiche, bevor du Klassen hinzufügst oder eine Webkopie vorbereitest.

PerfectVector liefert die Vektorgrafik. Du wählst weiterhin, welche Teile auf CSS reagieren sollen, fügst sinnvolle Namen hinzu und testest die endgültige Seite. Die Konvertierung eines Bildes erzeugt nicht automatisch eine Komponente mit semantischen Klassennamen. Wenn ein vorhandenes SVG bereits brauchbare Pfade enthält, arbeite mit diesen Pfaden, statt eine gerenderte Kopie nachzuzeichnen.

Prüfe auch, ob das SVG ein eingebettetes Rasterbild enthält. Das Inline-Einfügen einer solchen Datei legt ihr <image>-Element offen; es verwandelt die Pixel darin nicht in separat umfärbbare Formen. Behalte für ein Foto, das fotografisch bleiben soll, ein passendes Raster-Ausgabeformat.

Prüfe die endgültige Seite

• Bestätige, dass die eigenständige Grafik korrekt aussieht, bevor du Seiten-CSS testest.
• Wähle <img> zur fertigen Anzeige oder Inline-SVG zur direkten Steuerung seiner Elemente.
• Prüfe gerenderte Größe und Proportionen im schmalsten unterstützten Layout.
• Teste genau die Form, die du umfärben möchtest; verlasse dich nicht auf eine pauschale path-Regel.
• Prüfe Bildnamen, doppelte IDs und den umgebenden Link oder Button.
• Miss das Ladeverhalten, wenn es die Entscheidung beeinflusst; leite aus diesem Beispiel kein Geschwindigkeitsergebnis ab.

FAQ

Wird ein SVG zur Bitmap, wenn ich ein img-Tag verwende? Nein. Ein über img geladenes SVG kann weiterhin Vektorgeometrie rendern. Das Bildelement verhindert, dass die Hostseite seine inneren Formen direkt auswählt; es konvertiert diese Formen nicht in ein PNG.

Warum folgt currentColor nicht meiner Seitentextfarbe? Ein externes SVG-Bild hat seinen eigenen Stilkontext. Die Farbe (color) der Seite wird nicht automatisch zum currentColor innerhalb dieser Datei. Verwende Inline-SVG, wenn seine Farbgebung von der Seite erben soll, und setze die betreffende Füllung oder Kontur auf currentColor.

Sollte ich mein vorhandenes SVG vor der Inline-Einbettung konvertieren? Wenn es bereits die gewünschten Vektorformen enthält, ist keine Konvertierung nötig. Prüfe sein Markup, erhalte benötigte Referenzen, füge passende Namen hinzu und teste es auf der Seite. Raster-zu-Vektor-Konvertierung ist nur relevant, wenn du Formen aus einer Rasterquelle rekonstruieren musst.

Quellen

1. MDN — Vektorgrafik in HTML einbinden — Verhalten bei externer Bild- und Inline-Einbettung.
2. MDN — Einführung in SVG in HTML — Inline-Markup, viewBox und Benennung für assistive Technologien.
3. MDN — HTTP-Caching — Cache-Wiederverwendung hängt von Antwort-Richtlinie und Ressourcenidentität ab.
4. MDN — SVG als Bild — Skript- und Ressourcenbeschränkungen in Bildkontexten.

Wähle die Einbettung passend zur Aufgabe der Grafik und teste sie dann mit den echten Seitenstilen. Wenn deine einzige Quelle ein geeignetes PNG ist, rekonstruiere zuerst seine Vektorformen, prüfe das Ergebnis und bereite die akzeptierte Grafik für diese Einbettung vor.