Warum ein Online-SVG-Extraktor diese Seite nicht sehen kann

Ansehen — 17 Sekunden

Was das Ausführen der Seite bringt

Tutorial · Vergleich

Der Unterschied ist keiner von Qualität oder Mühe — er ist architektonisch. Der eine Ansatz liest ein Dokument; der andere liest eine gerenderte Seite.

Was die Aufnahme zeigt

1. Ein Online-Tool bekommt nur die URL, die du einfügst
2. Es führt die Seite nie aus, also bleiben Inline-Icons unsichtbar
3. Eine Erweiterung läuft in der Seite, auf der du ohnehin bist
4. Angemeldete Seiten und private Dashboards inklusive
5. Und nichts verlässt deinen Rechner, damit es funktioniert

Der technische Grund

Eine URL abzurufen und eine Seite zu rendern sind zwei verschiedene Dinge

Wenn du eine URL in einen Online-Extraktor einfügst, schickt dessen Server eine schlichte HTTP-Anfrage und bekommt das HTML zurück, das der Server zu senden beschlossen hat. Dann durchsucht er diesen Text nach Dingen, die wie SVGs aussehen. Das ist ein vernünftiger Ansatz — und er verpasst den Großteil einer modernen Site, aus vier getrennten Gründen.

• Kein JavaScript läuft. Auf einer React-, Vue-, Svelte- oder Angular-Site ist das ursprüngliche HTML häufig nahezu leer — ein Wurzelelement und ein Script-Tag. Jedes Icon erscheint erst, nachdem das Framework ausgeführt wurde. Ein Abruf sieht die leere Hülle.
• Kein CSS wird angewandt. Ein Vektor, der in einem Stylesheet als background-image gesetzt ist, existiert erst, wenn Stile gegen Elemente berechnet werden. Textsuche im HTML findet ihn nicht.
• Keine Sitzung. Der Server, der deine URL abruft, ist nicht als du angemeldet. Alles hinter einer Authentifizierung liefert eine Anmeldeseite zurück, ein Dashboard, ein Admin-Panel oder ein Bezahlwerkzeug ist also schlicht unerreichbar.
• Sprites werden nicht aufgelöst. Ein <use href="#star"> im rohen HTML ist ein Zeiger. Ohne gerendertes Dokument gibt es nichts, wogegen man ihn auflösen könnte — du bekommst eine leere Datei.

Eine Erweiterung hat keines dieser Probleme, weil sie nichts abruft. Sie läuft in der Seite, die du ohnehin ansiehst, nachdem das Framework gerendert hat, nachdem die Stile angewandt wurden, mit intakter Sitzung und dem vollständigen Dokument, gegen das sich Referenzen auflösen lassen.

Es stattdessen in der Seite tun

Es gibt keine URL zum Einfügen, und genau das ist der Punkt.

1. Bring die Seite in den gewünschten Zustand. Melde dich an, wenn es eine Anmeldung braucht. Scroll, öffne das Menü, wechsel zu dem Tab mit den Icons. Alles, was du sehen kannst, kann der Scan lesen.
2. Klick auf den Button in der Symbolleiste. Der Scan läuft gegen das lebende DOM — samt vom Framework gerenderten Icons, CSS-Hintergründen und Sprite-Referenzen.
3. Vergleich die Zahl. Das ist der Moment, in dem der Unterschied sichtbar wird. Die hier gefundene Zahl ist typischerweise ein Mehrfaches dessen, was ein URL-Abruf gemeldet hat.
4. Nimm sie mit. Einzeln mit Aktuelles laden oder den ganzen Satz mit Alle als ZIP laden. Zu keinem Zeitpunkt verlässt etwas deinen Rechner.

Die andere Frage: Wohin geht deine Datei?

Ein Online-Tool muss deine Daten bekommen, um daran zu arbeiten. Je nach Dienst kann das die URL einer Seite bedeuten, auf der du angemeldet warst, oder eine hochgeladene Datei, die auf dem Server einer anderen Partei liegt — unter deren Aufbewahrungsrichtlinie, deren Protokollierung, deren Rechtsraum und deren Sicherheit. Für eine öffentliche Marketingseite mag das ein fairer Tausch sein. Für ein internes Dashboard, die Staging-Site eines Kunden oder ein unveröffentlichtes Design ist es eine Datenübertragung, die du vermutlich nicht vorhattest.

Die Variante auf dem Gerät beinhaltet diesen Tausch gar nicht — und nicht als Selbstverpflichtung: Die Content-Security-Policy der Erweiterung setzt connect-src 'none', ihre Seiten können also keine Netzwerkverbindung öffnen. Es gibt keinen Endpunkt zum Senden. Es heißt auch, dass das Ganze offline funktioniert.

Wo ein Online-Tool wirklich die bessere Wahl ist

Fair bleiben: Wenn die URL direkt auf eine .svg-Datei zeigt und du sie nur umwandeln oder optimieren willst, ist ein Online-Tool schnell und verlangt keine Installation. Auf einem gesperrten Rechner, auf dem du keine Erweiterung installieren kannst, ist es womöglich deine einzige Option. Und speziell fürs Optimieren von SVGs — SVGO drüberlaufen lassen, Metadaten entfernen, Pfade verkleinern — leisten die guten Online-Optimierer etwas, das diese Erweiterung gar nicht erst versucht.

Die ehrlichen Grenzen dieser Seite

Eine Erweiterung muss installiert werden, braucht einen Chromium-Browser und kann auf einer Seite, die du selbst nicht öffnen kannst, nichts tun — chrome://-Seiten, den Web Store, Erweiterungsgalerien. Sie ist außerdem strikt interaktiv: Es gibt keine API und keine Möglichkeit, sie über eine Liste von tausend URLs laufen zu lassen. Dafür ist ein Headless-Browser das richtige Werkzeug.

Ein URL-Abruf verpasst

Per JavaScript gerenderte Icons, CSS-Hintergründe, angemeldete Seiten und Sprite-Ziele.

Eine Erweiterung sieht

Das gerenderte DOM — nach dem Framework, nach den Stilen, mit deiner Sitzung.

Datenschutz

connect-src 'none'. Kein Endpunkt zum Hochladen; funktioniert offline.

Online-Tools gewinnen bei

Dem Optimieren eines .svg, das du schon hast, und Rechnern, auf denen du nichts installieren kannst.

Gut zu wissen

Häufig gefragt