So lädst du ein SVG von einer URL

Eine URL ist keine Datei. Mal zeigt sie direkt auf einen Vektor, mal auf eine Seite, die einen zeichnet, und beides braucht völlig unterschiedliche Behandlung — deshalb funktionieren „URL einfügen“-Tools etwa in der Hälfte der Fälle.

Erweiterung installieren Zu den Schritten ↓

Ansehen — 22 Sekunden

Von der Adressleiste zur gespeicherten Datei

Tutorial · von einer URL

In der Adressleiste steht vectorly.io/icons — nirgends eine Dateiendung. Der Vektor kommt trotzdem heraus.

Achte in der Aufnahme darauf, was in der Adressleiste steht. Da ist kein .svg, und das muss auch nicht sein: Der Scan liest, was die Seite gezeichnet hat, nicht, was die URL verspricht.

Was die Aufnahme zeigt

Öffne die URL, die den Vektor enthält
Klick auf den Button in der Symbolleiste — er liest die lebende Seite
In der Adressleiste steht kein .svg. Es braucht auch keins.
Blättere zu dem Vektor, für den du gekommen bist
Benenne die Datei, bevor du sie speicherst
Aktuelles laden — das echte Markup, von dieser URL
Als star.svg gespeichert. Scharf in jeder Größe.

Der Unterschied, auf den es ankommt

Zwei völlig verschiedene Dinge heißen „eine SVG-URL“

Kläre vor allem anderen, welche der beiden du wirklich hast — die richtige Methode ist jeweils eine andere, und genau hier bleiben die meisten stecken.

Eine direkte URL zu einer Vektordatei, endend auf .svg, oft auf einem CDN. Öffne sie in einem Tab, und du siehst die Grafik auf leerem weißem Grund, sonst nichts. Diese kann dein Browser selbst speichern — Strg/Cmd+S funktioniert, auch wenn der Name manchmal wenig hilfreich ist.
Eine URL zu einer Seite, die Vektoren zeichnet. Fast jede echte URL ist von dieser Art. Die Adresse endet auf /icons oder /preise oder auf gar nichts, und die gewünschten Grafiken sind Inline-Markup im HTML, das die Seite zurückgibt. An keiner Adresse liegt eine Datei zum Holen, es gibt also nichts direkt zu speichern.

„URL einfügen“-Konverter-Websites decken immer nur den ersten Fall ab, und deshalb kommen sie so oft mit einem Fehler zurück oder mit dem HTML der Seite, umbenannt in .svg. Sie holen die Adresse; sie rendern sie nicht.

Von einer Seiten-URL speichern

Das ist der zweite Fall — der übliche. Der Trick ist, die URL nicht mehr als Datei zu behandeln und die Seite zuerst rendern zu lassen.

Öffne die URL in einem Tab. Lass die Seite fertig laden. Das zählt mehr, als es klingt: Icons, die JavaScript nach dem Laden einfügt, werden trotzdem gefunden, weil der Scan das DOM liest, wie es beim Klick dasteht, nicht das HTML, das der Server zuerst geschickt hat.
Klick auf den Button in der Symbolleiste. Das Popup öffnet sich zum Tab, in dem du bist. Es gibt nichts einzufügen und nichts zu konfigurieren.
Lies den Zähler. Er meldet, wie viele Vektoren diese URL tatsächlich zeichnet. Diese Zahl ist meist höher, als man erwartet, weil sie das Logo, die Oberfläche und die Icons im Fußbereich einschließt.
Blättere zu dem, für den du gekommen bist. Nutze Zurück und Weiter. Die Vorschau zeigt jeden isoliert — der schnellste Weg, zwei ähnliche Icons auseinanderzuhalten.
Benenne ihn und lade. Tipp einen Dateinamen und drück Aktuelles laden. Du bekommst das Original-Markup von dieser URL, mit repariertem xmlns-Namensraum, damit die Datei überall öffnet.

Wenn deine URL wirklich auf .svg endet

Dann hast du den einfachen Fall und mehrere Möglichkeiten. Öffnen und Strg/Cmd+S speichert sie. Die Erweiterung auch, und die lässt dich zusätzlich die Datei ordentlich benennen und den Namensraum reparieren, falls die Quelle fehlerhaft ist — lohnt sich für alles, was du gleich eincheckst.

Ein Vorbehalt bei direkten URLs: Viele CDN-Links liefern die Datei mit dem Content-Type text/plain aus, dann zeigt dein Browser dir das Markup als Text, statt es zu rendern. Die Datei ist in Ordnung; der Header ist falsch. Speichern gibt dir trotzdem ein funktionierendes SVG.

URLs, die die Erweiterung nicht erreicht

Sie läuft auf Seiten, die du öffnen kannst — was du nicht öffnen kannst, kann sie auch nicht lesen. In der Praxis heißt das chrome:// und andere browserinterne Seiten, den Chrome Web Store und Add-on-Galerien (dort blockieren Browser Erweiterungen absichtlich), lokale file://-Seiten, sofern du keinen Dateizugriff erteilst, und alles hinter einem Login, das du nicht hast. Bist du dagegen angemeldet, funktioniert sie normal — und das kann kein Online-Tool mit einer eingefügten URL.

Eingabe: Jede Seiten-URL, die du öffnen kannst — keine .svg-Endung nötig.
Bewältigt: Per JavaScript gerenderte Icons, Seiten mit Login und Inline-Markup ohne jede Adresse dahinter.
Ergebnis: Den Originalvektor, Namensraum repariert, benannt, wie du willst.
Siehe auch: Von einem Link · Warum Online-Extraktoren das verpassen

Gut zu wissen

Häufig gefragt

Kann ich einfach eine URL in einen Online-SVG-Downloader einfügen?

Nur wenn die URL direkt auf eine .svg-Datei zeigt. Ein Online-Tool holt die Adresse, rendert die Seite aber nie, also ist jeder als Inline-Markup gezeichnete Vektor — und das sind die meisten — für es unsichtbar. Eine Erweiterung läuft in der Seite, nachdem sie gerendert wurde, deshalb sieht sie sie.

In der URL steht kein .svg. Ist das ein Problem?

Nein. Der Scan liest, was die Seite gezeichnet hat, nicht, was die Adresse versprach. Eine URL, die auf /icons oder /preise endet, funktioniert genauso wie eine, die auf .svg endet.

Warum zeigt mir das Öffnen der .svg-URL Code statt eines Bildes?

Der Server sendet sie mit dem Content-Type text/plain statt image/svg+xml, der Browser zeigt sie also an, statt sie zu rendern. Die Datei selbst ist in Ordnung — sie zu speichern gibt dir ein funktionierendes SVG.

Funktioniert es auf einer Seite, für die ich mich anmelden musste?

Ja. Es läuft in deinem Browser auf der Seite, die du ohnehin ansiehst, deine Sitzung gilt also normal. Das ist die Hauptsache, die ein „URL einfügen“-Dienst nicht kann.

Und eine URL, die weiterleitet?

Folge ihr erst im Tab. Die Seite, auf der du landest, ist die, die gescannt wird — und fast immer die, die du ohnehin wolltest.

Richte es auf eine URL und nimm den Vektor mit

Nichts einfügen, nichts hochladen, und es funktioniert auf Seiten, die eine Anmeldung verlangen.

Erweiterung installieren Alle 15 Tutorials →