So lädst du die SVGs einer Webseite

Ansehen — 17 Sekunden

Zählen, prüfen, dann nehmen

Tutorial · Inventur

Der Zähler, der von null hochläuft, ist die Seite, die dir sagt, woraus sie wirklich besteht — und das ist selten die Zahl, die man rät.

Was die Aufnahme zeigt

1. Wie viele Vektoren hat diese Seite wirklich?
2. Der Zähler antwortet — 24 gefunden
3. Blättere durch, um zu sehen, was du bekommst
4. Und nimm dann alles mit einem Klick
5. Was sich nicht auflösen ließ, wird benannt, nicht still weggelassen

Warum die Zahl überrascht

Eine Seite zeichnet weit mehr Vektoren, als es scheint

Wenn du eine Seite ansiehst, siehst du den Inhalt. Der Scan sieht alles, was der Browser gezeichnet hat, und eine moderne Seite zeichnet ständig Vektoren an Stellen, die du nie mitzählen würdest.

• Das Logo, heute fast immer Inline-<svg> statt einer Bilddatei.
• Die Oberfläche — die Suchlupe, die Menüleisten, die Schließkreuze, jeder Chevron in jedem Dropdown.
• Social- und Bezahlmarken im Fußbereich, meist ein Dutzend.
• Dekorative Formen — Abschnittstrenner, Blob-Hintergründe, Illustrationsfragmente, gezeichnet als CSS-Hintergrundvektoren.
• Icons in gerade unsichtbaren Komponenten, etwa ein geschlossenes Menü, das schon im DOM steckt.

Deshalb sind dreißig Sekunden Zählen vor dem Nehmen es wert: Eine Seite, die nach sechs Icons aussieht, meldet oft vierundzwanzig, und zu wissen, was was ist, bevor du ein ZIP baust, erspart dir das Sortieren danach.

Inventur machen

Die Reihenfolge zählt hier — es geht darum zu wissen, was du hast, bevor du dich festlegst.

1. Bring die Seite in den Zustand, den du erfassen willst. Scroll lazy-geladene Abschnitte ins Bild; öffne das Menü, wenn die gewünschten Icons darin leben. Der Scan liest das DOM, wie es dasteht — was noch nicht gezeichnet ist, ist noch nicht da.
2. Popup öffnen und den Zähler lesen. Der Zähler meldet die Zahl der verschiedenen gefundenen Vektoren, nachdem Dubletten zusammengefasst wurden. Das ist deine Inventur.
3. Blättere durch die Vorschauen. Zurück und Weiter, mit der Anzeige deiner Position im Satz. Hier stellst du fest, dass acht der vierundzwanzig Bezahlmarken aus dem Fußbereich sind.
4. Nimm, was du willst. Entweder du benennst und lädst einzelne Vektoren, wie du sie findest, oder du drückst Alle als ZIP laden für den Stapel. Die Statuszeile meldet, was gespeichert wurde, und benennt, was sich nicht auflösen ließ.

Neu scannen, nachdem du die Seite geändert hast

Der Scan ist eine Momentaufnahme, kein Livestream. Wenn du nach dem Scannen ein Modal öffnest, einen Tab wechselst, ein Akkordeon aufklappst oder ein lazy geladenes Raster ins Bild scrollst, sind diese neuen Vektoren noch nicht in der Liste. Der Rescan-Button in der Kopfzeile des Popups liest die Seite so, wie sie jetzt ist. Das ist mit Abstand der häufigste Grund, warum jemand meldet, ein Icon „fehle“ — es war beim Scan tatsächlich nicht im DOM.

Was der Zähler nicht enthält

Vektoren in Cross-Origin-<iframe>s werden nicht gezählt, weil die Same-Origin-Regel bedeutet, dass auch die Seite selbst sie nicht lesen kann — eine eingebettete Karte oder ein Bezahl-Widget ist ein anderes Dokument unter anderen Regeln. Was in ein <canvas> gezeichnet wurde, zählt ebenfalls nicht, denn dann sind es Pixel und es bleibt kein Vektor zum Extrahieren.

Der Zähler

Verschiedene Vektoren nach der Entdopplung — keine rohe Elementzahl.

Momentaufnahme

Liest das DOM, wie es dasteht. Neu scannen, nachdem du die Seite geändert hast.

Nicht gezählt

Cross-Origin-Iframes und alles, was bereits in ein <canvas> gerastert wurde.

Siehe auch

Den ganzen Satz nehmen · Die ZIP-Funktion

Gut zu wissen

Häufig gefragt