So lädst du SVG-Dateien von einer Website

Ansehen — 19 Sekunden

Das Ganze, einmal durch

Tutorial · Grundlagen

Alles ab hier sind dieselben fünf Schritte, ausgeschrieben, plus die Gründe dahinter. Wenn du nur die Aufnahme wolltest, hast du schon, wofür du gekommen bist.

Was die Aufnahme zeigt

1. Ein SVG ist Vektortext, kein Bild davon
2. Schritt eins — Popup auf der Seite öffnen
3. Schritt zwei — scannen lassen. Es liest die Seite, nicht das Netz.
4. Schritt drei — Vorschau ansehen und wählen
5. Schritt vier — die Datei benennen
6. Schritt fünf — laden. Das ist die ganze Arbeit.

Zuerst das, was niemand erklärt

Ein SVG ist kein Bild — es sind Anweisungen, eines zu zeichnen

Ein PNG ist ein Raster farbiger Punkte. Ein SVG ist ein kurzes Textdokument, das sagt: zieh eine Linie von hier nach da, dann krümme bis dort. Dieser Unterschied ist der ganze Grund, warum sich das lohnt: Weil die Datei Formen statt Pixel beschreibt, bleibt sie perfekt scharf, ob du sie als 16-px-Favicon nutzt oder zwei Meter breit druckst, und du kannst sie in einem Texteditor öffnen und ihre Farbe durch das Ändern eines Wortes wechseln.

Es ist auch der Grund, warum dein Browser beim Speichern so wenig hilfreich ist. Er bietet Bild speichern unter… nur für das an, was er als Bild mit abrufbarer Adresse einstuft. Die meisten SVGs einer modernen Seite haben gar keine Adresse — die Zeichenanweisungen stehen direkt im HTML der Seite. Es gibt nichts, worauf das Speichern-Menü zeigen könnte, also erscheint der Eintrag schlicht nicht.

Das DOM der Seite zu lesen umgeht das vollständig. Die Erweiterung fragt die Seite, was sie tatsächlich gezeichnet hat, bekommt das echte Markup zurück und schreibt es in eine Datei.

Die fünf Schritte

Der erste Durchlauf dauert etwa zwei Minuten, weil du etwas installieren musst. Jeder weitere dauert etwa fünf Sekunden.

1. Installiere die Erweiterung. Füge SVG Downloader zu Chrome, Edge oder Brave hinzu — alles ab Chrome 88. Sie ist kostenlos und MIT-lizenziert und verlangt nur activeTab, das heißt: Sie kann eine Seite sehen, wenn du ihren Button klickst, und zu keiner anderen Zeit.
2. Popup auf der Seite öffnen. Geh auf die Seite mit dem gewünschten Vektor und klick auf den Button in der Symbolleiste. Siehst du ihn nicht, klick auf das Puzzleteil-Symbol und hefte ihn an — du wirst ihn dort haben wollen.
3. Lass es scannen. Es geht die Seite durch und sammelt jeden Vektor, den es auflösen kann: Inline-Elemente, CSS-Hintergrundbilder, Sprite-Referenzen im selben Dokument und <img>- oder <object>-Quellen samt data:-URIs. Der Zähler sagt dir, wie viele es gefunden hat.
4. Vorschau ansehen und wählen. Jedes bekommt eine isolierte Vorschau, fern der überladenen Seite, damit du bestätigen kannst, dass du das Richtige hast. Zurück und Weiter gehen die Liste durch, und die Anzeige zeigt, wo du bist.
5. Benenne es und lade. Tipp einen Dateinamen, wenn dir der Name wichtig ist — lass ihn leer, und du bekommst ein nummeriertes svg-1.svg. Dann drück Aktuelles laden. Die Datei landet wie jede andere in deinem Download-Ordner.

Zwei Überraschungen, beide normal

Fast alle stoßen bei ihrer ersten Datei auf eine davon, und keine ist ein Fehler.

• Das Icon ist schwarz. Die meisten Icon-Systeme färben ihre Icons per currentColor aus dem CSS, das heißt: Die Farbe lebt im Stylesheet, nicht in der Form. Für sich herausgezogen hat die Datei keine eigene Farbe und wird schwarz gezeichnet. Das ist das echte Quell-Markup. Um eine Farbe in die Datei zu bekommen, nimm den Sprung zum SVG Color Changer, färb um und speichere.
• Sie öffnet jetzt, obwohl Copy-Paste nie funktioniert hat. Inline-SVG lässt den Namensraum xmlns="http://www.w3.org/2000/svg" meist weg, weil der HTML-Parser ihn gratis liefert. Kopier dieses Markup von Hand in eine nackte .svg-Datei, und nichts öffnet sie. SVG Downloader repariert den fehlenden Namensraum beim Speichern, weshalb seine Dateien in Figma, Illustrator, Inkscape, VS Code und jedem Browser öffnen.

Die Datei öffnen, wenn du sie hast

Ein Doppelklick auf ein SVG öffnet es meist im Browser, der es zeichnet, aber nicht bearbeiten lässt. Um wirklich damit zu arbeiten: Zieh es in Figma, und es kommt als editierbare Vektorebenen an; öffne es in Illustrator oder Inkscape für volle Zeichenwerkzeuge; oder öffne es in einem beliebigen Texteditor, um das Markup direkt zu sehen — und zu ändern. Brauchst du stattdessen ein PNG, wandelt das Popup es vor dem Speichern für dich um.

Läuft auf

Chrome 88+, Edge und Brave. Jede Seite, die du darin öffnen kannst.

Du bekommst

Das originale Vektor-Markup, Namensraum repariert — keinen Screenshot.

Datenschutz

100 % auf dem Gerät. Kein Server, kein Konto, kein Upload, keine Analyse.

Weiter

Den ganzen Satz gewünscht? Jedes SVG extrahieren. Nur den Code? Kopier ihn.

Gut zu wissen

Häufig gefragt