So lädst du ein SVG aus dem HTML

Ansehen — 17 Sekunden

Markup heraus, ohne das Elements-Panel

Tutorial · HTML-Quelltext

Beide Ausgänge sind hier zu sehen: das Markup in die Zwischenablage und derselbe Vektor als Datei. Der Unterschied ist nur, wo es landet.

Was die Aufnahme zeigt

1. Das Markup steht inline im HTML — keine Datei zu holen
2. Finde das gewünschte Element
3. Code kopieren hebt das Markup selbst heraus
4. Der Quelltext zeigte dieselbe Auszeichnung, nur ohne xmlns
5. Oder speichere es als Datei, Namensraum repariert

Der manuelle Weg und seine eine Falle

Copy-Paste aus Elements liefert eine Datei, die nicht öffnet

Die Handmethode ist geradlinig: DevTools öffnen, das <svg>-Element im Elements-Panel finden, Rechtsklick, Copy → Copy outerHTML, in eine neue Datei einfügen, als .svg speichern. Dann doppelklicken — und dein Browser zeigt einen Fehler oder eine leere Seite.

Der Grund ist ein Namensraum. Ein eigenständiges SVG-Dokument muss xmlns="http://www.w3.org/2000/svg" an seinem Wurzelelement deklarieren. Inline-SVG hat dieses Attribut fast nie, weil der HTML-Parser Elemente je nach Position automatisch in den SVG-Namensraum setzt — das Attribut ist innerhalb von HTML wirklich unnötig. Hebe das Markup aus diesem Kontext, und es wird nötig — und es ist nicht da.

Die manuelle Korrektur ist also echt, aber leicht zu vergessen: Ergänze das xmlns-Attribut selbst am Wurzel-<svg>, jedes Mal. Zwei weitere Dinge lohnen sich, wenn du schon dabei bist, und die sind weniger offensichtlich.

• Entferne alles Ausführbare. Seiten-Markup kann <script>-Elemente, on*-Handler-Attribute und externe Referenzen tragen. Die willst du nicht in einer Datei haben, die du gleich in ein Repository eincheckst oder in einem Designtool öffnest.
• Prüfe auf currentColor. Erbt das Icon seine Farbe aus dem CSS, hat die extrahierte Datei keine eigene Farbe und wird schwarz gezeichnet. Das ist korrektes Verhalten, keine Beschädigung.

Der Weg, der alle drei Dinge für dich erledigt

Namensraum reparieren, bereinigen und zwei Ausgänge zur Wahl — ohne die Seite zu verlassen oder ein Panel zu öffnen.

1. Popup auf der Seite öffnen. Klick auf den Button in der Symbolleiste. Jedes Inline-<svg> im Dokument wird gesammelt, dazu CSS-Hintergrundvektoren, Sprite-Referenzen und Bildquellen.
2. Das gewünschte Element finden. Blättere mit Zurück und Weiter. Die isolierte Vorschau ist deutlich leichter zuzuordnen als ein hervorgehobener Knoten im Elements-Baum.
3. Nimm es als Markup oder als Datei. Code kopieren legt das bereinigte Markup samt Namensraum in deine Zwischenablage, bereit zum Einfügen in eine Komponente. Aktuelles laden schreibt dasselbe in eine .svg-Datei.
4. Einfügen oder öffnen. So oder so ist das Ergebnis ein gültiges eigenständiges Dokument — es öffnet ohne Nacharbeit in Figma, Illustrator, VS Code und jedem Browser.

Was der Quelltext zeigt und was nicht

Der Quelltext zeigt das HTML, das der Server geschickt hat. Das ist nicht dasselbe Dokument wie das auf deinem Bildschirm. Alles, was ein Framework auf dem Client gerendert hat — auf einer React-, Vue- oder Svelte-Site also die meisten Icons —, taucht im Quelltext gar nicht auf. Das DOM ist der ehrliche Nachweis dessen, was die Seite ist, und genau das lesen sowohl die DevTools als auch diese Erweiterung.

Sprites sind der andere Grund, warum Handkopieren enttäuscht

Kopier das outerHTML eines sprite-basierten Icons, und du bekommst grob <svg><use href="#star"/></svg> — einen Zeiger, keine Form. Als Datei gespeichert zeichnet sie gar nichts, weil das gemeinte Symbol in einem anderen Teil des Dokuments lag, den du nicht kopiert hast. Diese Referenz zurück zum Symbol aufzulösen, ist eines der Dinge, die der Scan für dich erledigt. Mehr zu Sprites →

Wenn du stattdessen eine Build-Pipeline willst

Um Icons als Teil eines Builds zu extrahieren, ist das hier das falsche Werkzeug und ein Headless-Browser das richtige — Seite steuern, DOM lesen, Dateien schreiben. Die Erweiterung ist für den interaktiven Fall: Du schaust auf eine Seite und willst dieses Icon jetzt.

Die Falle

Inline-SVG lässt xmlns weg, von Hand kopiertes Markup öffnet also nicht.

Repariert

Der Namensraum wird ergänzt, Skripte, Handler und externe Referenzen werden entfernt.

Sprites

<use>-Zeiger werden zurück zum Symbol aufgelöst — nicht als Zeiger gespeichert.

Quelltext

Zeigt das HTML des Servers, nicht, was ein Framework auf dem Client gerendert hat.

Gut zu wissen

Häufig gefragt