SVG-Grabber entdeckt jedes SVG auf einer Webseite — inline SVG-Elemente, externe .svg-Dateireferenzen, SVG-Sprites (use/symbol-Muster) und SVG-Data-URIs. Zeigen Sie jedes SVG in verschiedenen Größen vor, überprüfen Sie Transparenz auf hellen und dunklen Hintergründen, kopieren Sie das rohe SVG-Markup oder laden Sie optimierte SVG-Dateien herunter.
SVGs sind überall auf modernen Websites — Logos, Icons, Illustrationen, dekorative Grafiken, Datenvisualisierungen — aber sie zu extrahieren ist überraschend schwierig. Inline-SVGs sind direkt in das HTML eingebettet und können nicht als Bild gespeichert werden. SVG-Sprites verwenden use/symbol-Referenzen, die sich nicht zu eigenständigen Dateien auflösen. Externe SVGs, die über img src oder CSS geladen werden, können ohne Öffnen des Netzwerk-Tabs nicht inspiziert werden. SVG-Grabber verarbeitet all diese Quellen automatisch. Er scannt das DOM nach Inline-SVGs, löst Sprite-Referenzen zu ihren vollständigen Symbol-Definitionen auf, findet externe SVG-URLs und dekodiert SVG-Data-URIs. Jedes SVG wird in einer Galerie mit Live-Vorschau angezeigt, und Sie können zwischen hellen, dunklen und Schachbrettmuster-Hintergründen wechseln, um Transparenz zu überprüfen. Kopieren Sie den rohen SVG-Code zum Einbetten in Ihre Komponenten oder laden Sie das SVG als Datei herunter, bereit zur Verwendung in Ihrem Projekt.
Findet SVGs aus jeder Quelle auf der Seite: inline svg-Elemente im DOM, externe .svg-Dateien geladen über img oder object-Tags, CSS background-image SVGs, use/symbol Sprite-Referenzen (aufgelöst zu vollständigen SVGs) und base64 data URI kodierte SVGs.
Zeigen Sie jedes SVG in verschiedenen Größen (original, 2x, 4x) vor drei Hintergründen vor: dunkel, hell (weiß) und Schachbrettmuster. Das Schachbrettmuster zeigt Transparenzbereiche, die auf einem einfarbigen Hintergrund unsichtbar sein könnten.
Klicken Sie auf SVG kopieren, um das vollständige SVG-Markup zu erhalten — viewBox, Pfade, Gruppen und alle Attribute enthalten. Direkt in Ihr HTML, JSX, Vue-Template oder SVG-Sprite-Datei einfügen. Der Code ist sauber und korrekt formatiert.
Laden Sie einzelne SVGs als .svg-Dateien mit ordnungsgemäßen XML-Deklarationen und Kodierung herunter. Dateien werden nach der ID, dem Klassennamen oder dem aria-label des SVGs benannt — keine generischen download.svg-Namen.
Jedes SVG zeigt seinen Quellentyp (inline, extern, Sprite, Data URI), viewBox-Abmessungen, Dateigröße und wo im DOM es gefunden wurde. Nützlich zum Verstehen, wie die Site ihre SVG-Strategie implementiert.
Wenn eine Seite SVG-Sprites mit use href-Referenzen verwendet, löst SVG-Grabber jede Referenz zur vollständigen Symbol-Definition auf — und gibt Ihnen das vollständige eigenständige SVG, nicht nur das use-Element.
Besuchen Sie eine Website mit einem großartigen Icon-System und holen Sie sich das gesamte SVG-Icon-Set. SVG-Grabber findet Icons in Sprites, Inline-SVGs und externen Dateien — und sammelt die vollständige Icon-Bibliothek unabhängig von ihrer Implementierung.
Brauchen Sie das SVG-Logo eines Unternehmens für eine Partnerseite, eine Fallstudie oder ein Presskit? Die meisten Logos auf modernen Websites sind SVGs. SVG-Grabber findet und extrahiert sie in ihrer ursprünglichen Vektorqualität — unendlich skalierbar.
Studieren Sie, wie Produktionswebsites komplexe SVG-Illustrationen, Animationen oder Datenvisualisierungen implementieren. Kopieren Sie den rohen SVG-Code, um zu inspizieren, wie Pfade strukturiert sind, wie viewBox konfiguriert ist und wie CSS-Animationen angewendet werden.
Wechseln Sie zu einem neuen Icon-System? Holen Sie SVGs von der Referenzseite und fügen Sie sie in Ihr SVG-Sprite oder komponentenbasiertes Icon-System ein. Sauberer SVG-Code mit korrekten viewBox-Werten bereit zur Integration.
Überprüfen Sie, wie SVGs auf Ihrer Site implementiert sind — sind sie inline (gut zur Manipulation), extern (gut für Caching) oder Sprites (gut für Effizienz)? SVG-Grabber zeigt den Quellentyp für jedes SVG und hilft Ihnen, Ihre SVG-Strategie zu optimieren.
Öffnen Sie die schwebende DevSuite Pro-Dock und klicken Sie auf das Symbol des SVG-Grabbers. Das Tool scannt die Seite nach allen SVG-Quellen und erstellt die Galerie.
Ein Raster von SVG-Vorschaubildern erscheint und zeigt jedes auf der Seite gefundene SVG. Jeder Eintrag zeigt den SVG-Namen, Quellentyp und viewBox-Abmessungen.
Klicken Sie auf ein beliebiges SVG, um eine größere Vorschau zu öffnen. Wechseln Sie zwischen dunklen, hellen und Schachbrettmuster-Hintergründen. Ändern Sie die Größe der Vorschau, um zu sehen, wie das SVG skaliert.
Klicken Sie auf SVG kopieren, um das rohe Markup zum Einbetten in Ihren Code zu erhalten, oder auf Herunterladen, um es als eigenständige .svg-Datei auf Ihr Gerät zu speichern.
Navigieren Sie zurück zur Galerie, um weitere SVGs zu erkunden. Das Zählabzeichen zeigt die Gesamtzahl der auf der Seite gefundenen SVGs.
Installieren Sie DevSuite Pro kostenlos und schalten Sie 39+ Entwickler-Tools für Ihren Browser frei.
