Hol ein Icon aus einem SVG-Sprite

Ein Sprite-Sheet stapelt Dutzende Icons in eine Datei und malt jedes mit <use href="#id">. Speicher es auf die naheliegende Art, und du bekommst das ganze Blatt — oder nichts. SVG Downloader löst die Referenz auf und gibt dir das eine Glyph.

Erweiterung installieren Anleitung lesen →

Das Problem

Warum ein Sprite dir das ganze Blatt oder nichts gibt

SVG-Sprites sind der Grund, warum große Icon-Sätze schnell bleiben. Jedes Icon wird einmal definiert — meist als <symbol> mit einer id in einem einzigen versteckten <svg> —, und jede Stelle, die ein Icon zeigt, schreibt nur <use href="#chevron">. Der Browser stempelt eine Kopie dieses Symbols dorthin, wo die Referenz steht. Schnell zu laden — und beim Extrahieren eine Falle.

Die Falle: Ein <use>-Element enthält keine Zeichnung. Es ist ein Zeiger. Versuch das sichtbare Icon zu speichern, und du speicherst eine leere Referenz — eine Datei, die für sich nichts zeichnet, weil das Symbol, auf das sie zeigt, nicht darin steht. Geh den anderen Weg und speicher die Sprite-Quelle, und du bekommst alle vierzig Icons zusammengeschweißt in einer Datei, die meisten an Koordinaten weit außerhalb jedes viewBox. Keines von beiden ist das eine gewünschte Icon.

Was SVG Downloader stattdessen tut

Öffne das Popup, und es folgt den Zeigern. Für jedes <use>, das irgendwohin im selben Dokument zeigt — das übliche <use href="#chevron"> in ein verstecktes Inline-Sprite —, schlägt es das referenzierte <symbol> oder <g> nach und baut ein vollständiges, eigenständiges SVG für genau dieses Glyph. Jedes bekommt seine eigene isolierte Vorschau, aus einem Blatt mit vierzig Icons werden also vierzig Vorschauen, die du durchblättern und einzeln speichern kannst.

Die Referenz aufgelöst. Das href (oder das alte xlink:href) wird bis zu seinem Symbol verfolgt, und dieses Symbol wird in ein frisches <defs> am Kopf der gespeicherten Datei geklont. Das <use> bleibt, wo es war, und löst nun gegen Markup auf, das die Datei selbst mitbringt — es zeichnet also überall korrekt, ohne Sprite daneben.
Ein Glyph, nicht das Blatt. Du speicherst den Chevron, nicht den Chevron plus neununddreißig Nachbarn. Jede Referenz wird einzeln extrahiert, und du kannst vor dem Speichern den gewünschten Namen tippen — oder alles als nummerierten Satz mit Alle als ZIP laden nehmen.
Oder nimm alle. Wenn du den vollen Satz willst, holt Alle als ZIP laden jedes referenzierte Symbol auf einmal, dublettenfrei, in ein Archiv.

Was du zurückbekommst

Format: Eine standardkonforme .svg pro Glyph — das Symbol in eine eigenständige Datei eingebettet, Namensraum repariert.
Gelesene Referenzen: <use>, das ins selbe Dokument zeigt, über href und das alte xlink:href. Externe Sprite-Dateien werden nicht aufgelöst.
Wo es läuft: Vollständig in deinem Browser. Referenzen werden lokal aufgelöst — kein Upload, kein Server, kein Konto.
Kann außerdem: Inline-SVG, CSS-Hintergründe und ZIP der ganzen Seite.

Gut zu wissen

Fragen zu SVG-Sprites

Was ist ein SVG-Sprite genau?

Eine SVG-Datei, die viele Icons als getrennte <symbol>-Elemente definiert, jedes mit eigener id. Seiten referenzieren ein Icon mit <use href="#id">, statt sein Markup zu wiederholen. Es ist das Icon-Satz-Pendant zum CSS-Sprite-Sheet — ein Download, viele Glyphen.

Warum bekomme ich beim Speichern des Icons eine leere Datei?

Weil ein <use>-Element keine Zeichnung enthält — es zeigt auf ein anderswo definiertes Symbol. Für sich herauskopiert hat diese Referenz nichts zu zeichnen. SVG Downloader löst den Zeiger erst zum tatsächlichen Symbol auf, sodass die gespeicherte Datei das Icon zeichnet.

Klappt es auch mit einer externen Sprite-Datei, nicht nur mit einer Inline-Version?

Nein — externe Sprites werden nicht unterstützt. Zeigt die Referenz aus dem aktuellen Dokument heraus, wie bei <use href="/sprite.svg#cart">, wird dieses <svg> übersprungen und als Übersprungenes gezählt, statt dir kaputt übergeben zu werden. Nur Referenzen im selben Dokument — <use href="#cart"> in ein verstecktes Inline-Sprite, wie es die meisten Sites ausliefern — werden aufgelöst. Nutzt eine Site ein externes Sprite, bekommst du mit dem direkten Öffnen von sprite.svg das Quellblatt.

Und ein Symbol, das ein anderes Symbol referenziert?

Die Auflösung geht eine Ebene tief. Ein <symbol>, dessen Inhalt ein weiteres <use> auf ein zweites Symbol enthält, bleibt unaufgelöst, dieser verschachtelte Teil zeichnet in der gespeicherten Datei also nicht. Selten — die meisten Sprites definieren jedes Glyph flach —, aber ein Blick in die Vorschau lohnt, wenn ein Icon teilweise leer wirkt.

Hol ein sauberes Icon aus dem Blatt

Kostenlos, privat, und es folgt der Referenz, die der Browser verbirgt.

Erweiterung installieren Alle Funktionen →