Tutorial — die Link-Falle
So lädst du ein SVG von einem Link
Du klickst mit rechts auf den Link, wählst Link speichern unter… und bekommst eine 40-KB-HTML-Datei. Das ist der häufigste Weg, mit dem Falschen dazustehen, und er hat eine einfache Erklärung.
Ansehen — 19 Sekunden
Das bekommen, worauf der Link wirklich zeigt
Die Aufnahme benutzt Link speichern unter… bewusst nie — denn bei so einem Link ist dieser Menüpunkt die Falle statt das Werkzeug.
Was die Aufnahme zeigt
- Ein Link, der auf einen Vektor zeigt, nicht auf eine Seite
- „Link speichern unter…“ würde dir die HTML-Hülle geben
- Öffne das Popup auf der Seite, auf der der Link steht
- Der verlinkte Vektor steht in der Liste
- Gib ihm einen Namen, der etwas bedeutet
- Aktuelles laden — die Datei hinter dem Link
Warum das Naheliegende scheitert
Link speichern unter… speichert die Antwort, was auch immer sie ist
Dein Browser hat keine Ahnung, was am anderen Ende eines Links liegt, bis er fragt. Link speichern unter… prüft nichts — er holt die URL und schreibt auf die Platte, was zurückkommt, unter dem Namen, den der Link nahelegt.
Führt der Link also zu einer Viewer-Seite — einer Icon-Detailseite, einer „Download“-Seite mit Vorschau und Button —, kommt HTML zurück. Du bekommst eine Datei namens star.svg, die in Wahrheit eine Webseite ist, weshalb sie als Textwand öffnet oder gar nicht. Die Erweiterung lag nie falsch; der Link zeigte von Anfang an nicht auf einen Vektor.
Drei Linkformen verursachen fast alles davon:
- Ein Link auf eine Viewer-Seite. Der Vektor liegt am Ziel, nicht am Link. Folge ihm und scanne dann diese Seite.
- Ein Link, der per Skript einen Download auslöst. Das
hrefist#oderjavascript:, und ein Klick-Handler baut die Datei. An dieser Adresse gibt es nichts zu speichern. - Ein Link, der ein Inline-Icon umschließt. Das Anklickbare ist die Grafik, als Markup gezeichnet. Ein Rechtsklick liefert das Seitenmenü — gar keine Bildoptionen, weil der Browser es nicht für ein Bild hält.
Die Methode, die bei allen dreien funktioniert
Hör auf, den Link speichern zu wollen. Speichere den Vektor aus der Seite, die ihn zeichnet — die Antwort ist dieselbe, egal welche der drei Formen du vor dir hast.
- Folge dem Link, wenn er irgendwohin führt. Öffnet er eine Viewer- oder Detailseite, lass ihn. Dort lebt der Vektor tatsächlich, und genau die willst du scannen.
- Öffne das Popup auf der Seite, auf der du landest. Klick auf den Button in der Symbolleiste. Dem Scan ist egal, ob du per Link, per Suche oder durch Tippen der Adresse gekommen bist.
- Finde ihn in der Liste. Blättere mit Zurück und Weiter. Auf einer Detailseite ist der gewünschte Vektor in der Vorschau meist groß und offensichtlich.
- Benenne ihn und lade. Tipp einen Dateinamen und drück Aktuelles laden. Du bekommst eine echte Vektordatei, kein HTML-Dokument mit .svg-Endung.
Wie du erkennst, was du tatsächlich geladen hast
Hast du schon eine verdächtige Datei, dauert das zehn Sekunden: Öffne sie in einem beliebigen Texteditor. Ein echtes SVG beginnt mit <svg oder einer XML-Deklaration und ist meist ein paar Kilobyte groß. Eine getarnte HTML-Seite beginnt mit <!doctype html> und ist typischerweise viel größer. Ist es das Zweite, führte der Link zu einer Seite, und das Scannen dieser Seite bringt dir das Echte.
Wenn der Link das Icon ist
Das ist die dritte Form und auf modernen Sites die häufigste — ein klickbares Icon, das Inline-<svg>-Markup ist. Es gibt wirklich nichts zu speichern: keine Adresse, keine Datei, kein Bild, das der Browser erkennt. Entweder du scannst die Seite, oder du klickst mit rechts und nimmst Als SVG speichern aus dem Menü, was das Schnellgriff-Tutorial behandelt.
- Die Falle
- Link speichern unter… schreibt alles, was die URL zurückgibt — oft HTML.
- Die Prüfung
- Öffne die Datei in einem Texteditor.
<!doctype html>heißt: Du hast eine Seite bekommen. - Die Lösung
- Scanne die Seite, die den Vektor zeichnet, statt den Link zu speichern.
- Siehe auch
- Griff per Rechtsklick · Von einer URL
Gut zu wissen
Häufig gefragt
Warum hat mir Link speichern unter… eine HTML-Datei gegeben?
Weil der Link auf eine Webseite statt auf eine Vektordatei zeigte. Link speichern unter… holt die URL und schreibt, was zurückkommt, ohne zu prüfen, was es ist — ein Link auf eine Viewer-Seite ergibt also eine Seite, gespeichert unter dem .svg-Namen, den der Link nahelegte.
Das href des Links ist nur # — wo ist die Datei?
Es gibt keine. Ein Klick-Handler baut die Datei beim Klick in JavaScript. An dieser Adresse existiert nichts zum Speichern, also ist das Scannen der Seite nach dem gezeichneten Vektor der einzige Weg.
Wie prüfe ich, ob meine Datei ein echtes SVG ist?
Öffne sie in einem Texteditor. Ein echtes SVG beginnt mit
Der Link ist selbst ein Icon, und der Rechtsklick bietet nichts Brauchbares.
Dieses Icon ist Inline-SVG-Markup, das der Browser nicht als Bild behandelt, also erscheinen keine Bildoptionen. Entweder du öffnest das Popup und scannst die Seite, oder du nimmst den eigenen Eintrag „Als SVG speichern“ der Erweiterung im Kontextmenü.
Hör auf, Seiten namens .svg zu speichern
Hol stattdessen den Vektor aus der Seite — das klappt bei allen drei Linkarten.