So extrahierst du jedes SVG von einer Website

Ansehen — 17 Sekunden

Ein Scan, ein ZIP

Tutorial · Massenweise

Das Blättern in der Mitte ist kein Füllwerk — es ist der Schritt, den die meisten überspringen und dann bereuen, denn es ist deine einzige Chance zu sehen, was du gleich mitnimmst.

Was die Aufnahme zeigt

1. Ein Scan findet jeden Vektor, den die Seite zeichnet
2. Prüf den Satz, bevor du ihn nimmst
3. Zurück und Weiter gehen die ganze Liste durch
4. Alle als ZIP laden — der ganze Satz auf einmal
5. Dublettenfrei, nummeriert und in der Statuszeile benannt

Was ein Durchgang tatsächlich sammelt

Vier Quellen, aufgelöst in einen Ordner

Der Scan sucht keine .svg-Dateien. Er liest die gerenderte Seite und löst jeden erreichbaren Vektor in eigenständiges Markup auf — deshalb ist die Zahl meist höher als die Zahl der offensichtlichen Icons auf dem Bildschirm.

• Inline-<svg>-Elemente — der Großteil jedes modernen Icon-Satzes, dazu das Logo und der Großteil der Oberfläche.
• Vektoren in CSS-background-image, samt eingebetteter data:-URIs aus dem Stylesheet.
• <use>-Sprite-Referenzen im selben Dokument, zurück zum gemeinten Symbol aufgelöst, sodass jede zu einer echten, eigenständigen Datei wird.
• <img>- und <object>-Quellen, geholt und eingebettet.

Dubletten werden vor dem Bau des ZIP zusammengefasst. Eine Seite, die denselben Chevron an neunzehn Stellen zeichnet, gibt dir einen Chevron, nicht neunzehn — das ist der Unterschied zwischen einem brauchbaren Ordner und einem Durcheinander.

Den Satz mitnehmen

Vier Schritte, und der dritte ist der, den man besser nicht überspringt.

1. Popup auf der Seite öffnen. Klick auf den Button in der Symbolleiste. Der Zähler meldet, wie viele verschiedene Vektoren die Seite zeichnet.
2. Neu scannen, wenn sich die Seite geändert hat. Hast du inzwischen ein Menü geöffnet, einen Tab gewechselt oder ein lazy geladenes Raster ins Bild gescrollt, drück den Rescan-Button in der Kopfzeile, damit die neuen Icons dabei sind.
3. Blättere durch, um den Satz zu prüfen. Geh ihn mit Zurück und Weiter durch. Dreißig Sekunden hier sagen dir, ob du gleich den gewünschten Icon-Satz bekommst oder den Satz plus jeden dekorativen Schnörkel der Seite.
4. Drück Alle als ZIP laden. Der ganze Satz wird gebündelt, dublettenfrei und nummeriert. Die Statuszeile meldet, wie viele gespeichert wurden — und benennt, was sich nicht eigenständig extrahieren ließ, statt es still fallen zu lassen.

Lies die Statuszeile

Wenn alles auflöst, bekommst du ein schlichtes 24 SVGs als ZIP geladen. Wenn nicht, bekommst du die Zahl der Erfolge und die Namen der Fehlschläge — denn ein Massenwerkzeug, das still Dateien fallen lässt, ist schlimmer als eines, das laut scheitert. Die üblichen Gründe, warum ein Vektor sich nicht eigenständig extrahieren lässt: eine Sprite-Referenz auf ein anderes Dokument, das die Seite nie geladen hat, oder eine Bildquelle auf einer Domain, die Cross-Origin-Lesezugriffe verweigert.

Sehr große Seiten

Jedes Stylesheet einer Seite mit tausenden Regeln zu scannen ist teuer, deshalb ist der CSS-Hintergrund-Scan begrenzt. Wird die Grenze erreicht, siehst du Diese Seite ist zu groß für einen CSS-Hintergrund-Scan — andere SVGs wurden trotzdem gefunden, was heißt, dass Inline-Elemente, Sprites und Bildquellen weiterhin gesammelt wurden. In der Praxis sind CSS-Hintergrundvektoren die seltensten der vier, also ein kleiner Verlust auf einer Seite, wo die Alternative ein hängender Tab wäre.

Benennen, was herauskommt

Die Dateien im ZIP sind ab einem Präfix nummeriert, das du in den Einstellungen der Erweiterung ändern kannst, ebenso wie den Namen des ZIP selbst. Wenn du regelmäßig Sätze von verschiedenen Sites ziehst, ist ein Präfix pro Projekt schneller als das nachträgliche Umbenennen von zwanzig Dateien.

Ein Durchgang

Inline, CSS-Hintergrund, Sprite-<use> und Bildquellen — zusammen.

Dublettenfrei

Dasselbe Icon, neunzehnmal gezeichnet, kommt einmal an.

Ehrlich

Was sich nicht auflösen ließ, wird in der Statuszeile benannt.

Siehe auch

Die Massenfunktion · Seiteninventur

Gut zu wissen

Häufig gefragt