So speicherst du ein SVG, wenn der Rechtsklick dich nicht lässt

Ansehen — 19 Sekunden

Speichern, was das Menü nicht anbietet

Tutorial · kein Rechtsklick

Die Aufnahme öffnet auf einer Seite, auf der kein einziges Icon eine Speicheroption anbietet. Das ist keine ungewöhnliche Seite — so werden die meisten Icon-Systeme ausgeliefert.

Was die Aufnahme zeigt

1. „Bild speichern unter…“ fehlt hier bei jedem Icon
2. Die Erweiterung liest das DOM statt des Menüs
3. Inline, CSS-Hintergrund, Sprite, img — alle gefunden
4. Wähl das, das du wirklich willst
5. Benenne es
6. Gespeichert — ein echter Vektor, kein Screenshot

Der eigentliche Grund

Der Browser bietet nur an zu speichern, was er abrufen kann

Bild speichern unter… erscheint, wenn der Browser ein Bild mit einer Adresse hat, die er anfordern kann. Diese Kategorie ist enger, als sie aussieht, und moderne Icon-Systeme fallen fast vollständig heraus. Ein SVG versteckt sich an vier Stellen einer Seite, und nur eine davon spielt mit.

• Inline-<svg>. Das Markup steht direkt im HTML. Kein src, keine URL, nichts abzurufen — das Menü bietet also nichts. So werden heute die allermeisten Icons ausgeliefert. Wie es gelesen wird →
• CSS-background-image. Der Vektor steht in einem Stylesheet, oft als eingebetteter data:-URI. Der Browser legt ihn unter Dekoration ab statt unter Inhalt. Wie es gelesen wird →
• <use>-Sprite-Referenzen. Ein verstecktes Sprite enthält jedes Icon; jede Stelle, an der eines erscheint, ist nur ein Zeiger hinein. Den Zeiger zu speichern liefert eine leere Datei. Wie es gelesen wird →
• <img>- und <object>-Quellen. Der freundliche Fall — und selbst hier kann die Quelle ein data:-URI sein, den der Speichern-Dialog verstümmelt, oder eine Cross-Origin-URL, die unter einem nichtssagenden Namen landet.

Drei der vier lassen sich also nicht einmal im Prinzip so speichern. Das DOM zu lesen funktioniert bei allen vieren, denn zu diesem Zeitpunkt hat der Browser selbst jede einzelne in echtes Markup aufgelöst.

Es trotzdem speichern

Du musst nicht wissen, welche der vier du vor dir hast. Genau das ist der Punkt.

1. Lass das Rechtsklick-Menü in Ruhe. Fehlt Bild speichern unter… oder ist es ausgegraut, wird es auch durch Wiederholen nicht erscheinen. Das Fehlen ist eine Information, kein Fehler.
2. Öffne das Popup. Klick auf der Seite auf den Button in der Symbolleiste. Der Scan löst alle vier Quellen in eigenständiges Markup auf — Inline, CSS-Hintergrund, Sprite-Referenz und Bildquelle gleichermaßen.
3. Vorschau, um das Richtige zu erkennen. Die isolierte Vorschau ist der schnellste Weg, zwei ähnliche Icons zu unterscheiden, besonders in einem Satz, den die Seite mit 16 px zeigt.
4. Benenne es und speichere. Tipp einen Dateinamen und drück Aktuelles laden. Der Namensraum wird beim Speichern repariert, die Datei öffnet also in Figma, Illustrator und jedem Browser.

Dinge, die nach Lösungen aussehen, aber keine sind

• Einen Screenshot machen. Das verwandelt einen auflösungsunabhängigen Vektor dauerhaft in ein festes Pixelraster. Es verschwimmt, sobald jemand es skaliert, und es lässt sich nicht umfärben. Der vollständige Vergleich →
• Markup aus den DevTools kopieren. Das funktioniert, ist aber mühsam, und dem kopierten Markup fehlt der xmlns-Namensraum, sodass die entstehende Datei erst öffnet, wenn du ihn von Hand ergänzt. Willst du das Markup statt einer Datei, erledigt Code kopieren dasselbe mit bereits behobenem Namensraum.
• Die Datei im Netzwerk-Tab suchen. Gut für <img>-Quellen. Nutzlos für die anderen drei, weil nie eine Anfrage gestellt wurde — das Markup kam im HTML-Dokument mit.

Warum es scheitert

Drei der vier SVG-Quellen haben keine abrufbare Adresse.

Was funktioniert

Das gerenderte DOM zu lesen, wo alle vier zu echtem Markup aufgelöst sind.

Obendrein

Das fehlende xmlns wird repariert, die Datei öffnet also wirklich.

Siehe auch

Ein schnellerer Ein-Icon-Weg · Inline-SVG

Gut zu wissen

Häufig gefragt