Scopre ogni SVG sulla pagina — inline, esterni, sprite e data URI. Anteprima a varie dimensioni, copia il codice o scarica file ottimizzati.
Gli SVG sono ovunque nei siti web moderni — loghi, icone, illustrazioni, grafiche decorative, visualizzazioni di dati — ma estrarli è sorprendentemente difficile. Gli SVG inline sono incorporati direttamente nell'HTML e non possono essere "salvati come immagine". Gli sprite SVG usano riferimenti use/symbol che non si risolvono in file autonomi. Gli SVG esterni caricati tramite img src o CSS non possono essere ispezionati senza aprire la scheda network.
SVG Grabber gestisce automaticamente tutte queste fonti. Analizza il DOM alla ricerca di SVG inline, risolve i riferimenti agli sprite nelle loro definizioni symbol complete, trova gli URL degli SVG esterni e decodifica gli SVG in data URI. Ogni SVG viene mostrato in una galleria con un'anteprima dal vivo, e puoi alternare tra sfondi chiaro, scuro e a scacchiera per verificare la trasparenza.
Gli SVG che usano currentColor per il riempimento o il tratto — un pattern comune per le icone pensate per ereditare il colore dal testo circostante — vengono rilevati e segnalati, poiché prelevare il codice grezzo per questi preserva il loro comportamento di colorazione tematica, a differenza di uno screenshot rasterizzato che fisserebbe qualunque colore fosse mostrato al momento della cattura. Copia il codice SVG grezzo per inserirlo inline nei tuoi componenti, oppure scarica l'SVG come file pronto per l'uso nel tuo progetto.
Trova SVG da tutte le fonti: inline, esterni, sprite use/symbol e data URI base64.
Anteprima su sfondi scuro, chiaro e a scacchiera per verificare la trasparenza.
Copia il markup SVG completo con un clic per incollare nel tuo codice.
Scarica singoli SVG come file .svg con nomi significativi.
Ogni SVG mostra tipo sorgente, dimensioni viewBox e posizione nel DOM.
Quando la pagina usa sprite con use/symbol, viene risolto il simbolo completo standalone.
Visita un sito con ottime icone e cattura l'intero set SVG.
Cattura loghi SVG alla qualità vettoriale originale.
Copia il codice SVG per studiare come sono strutturate le illustrazioni.
Cattura SVG dal sito di riferimento e integrali nel tuo sistema di icone.
Verifica come gli SVG sono implementati — inline, esterni o sprite.
Apri il dock e clicca sull'icona Estrattore SVG.
Una griglia di miniature mostra ogni SVG trovato.
Clicca per un'anteprima più grande con opzioni di sfondo.
Copia il codice SVG o scarica il file.
Torna alla galleria per esplorare altri SVG.
Installa DevSuite Pro gratuitamente e sblocca più di 64 strumenti per sviluppatori per il tuo browser.
