El Capturador d'SVGs descobreix cada SVG d'una pàgina web — elements SVG integrats (inline), referències a fitxers .svg externs, sprites d'SVG (patrons use/symbol) i URIs de dades d'SVG. Previsualitza cada SVG a diferents mides, comprova la transparència sobre fons clars i foscos, copia el marcatge SVG pur o baixa fitxers SVG optimitzats.
Els SVGs són a tot arreu en els llocs web moderns — logotips, icones, il·lustracions, gràfics decoratius, visualitzacions de dades — però extraure'ls és sorprenentment difícil. Els SVGs integrats (inline) estan incrustats directament a l'HTML i no es poden "desar com a imatge". Els sprites d'SVG utilitzen referències use/symbol que no es resolen com a fitxers independents. Els SVGs externs carregats mitjançant img src o CSS no es poden inspeccionar sense obrir la pestanya de xarxa. El Capturador d'SVGs gestiona totes aquestes fonts automàticament. Escaneja el DOM a la recerca d'SVGs integrats, resol les referències de sprites a les seves definicions de símbol completes, troba les adreces URL dels SVGs externs i descodifica les URIs de dades d'SVG. Cada SVG es mostra en una galeria amb una previsualització en viu, i pots canviar entre fons clars, foscos i de tauler d'escacs per verificar la transparència. Copia el codi SVG pur per integrar-lo als teus components o baixa l'SVG com un fitxer a punt per utilitzar-lo al teu projecte.
Troba SVGs de totes les fonts de la pàgina: elements <svg> integrats (inline) al DOM, fitxers .svg externs carregats mitjançant etiquetes img o object, SVGs en background-image de CSS, referències de sprites use/symbol (resoltes a SVGs complets) i SVGs codificats en dades URI base64.
Previsualitza cada SVG a diferents mides (original, 2x, 4x) sobre tres fons: fosc, clar (blanc) i tauler d'escacs. El tauler d'escacs revela les àrees de transparència que podrien ser invisibles sobre un fons d'un sol color.
Fes clic a "Copia l'SVG" per obtenir el marcatge SVG complet — viewBox, camins (paths), grups i tots els atributs inclosos. Enganxa'l directament a l'HTML, JSX, plantilla de Vue o fitxer de sprite d'SVG. El codi és net i amb el format correcte.
Baixa SVGs individuals com a fitxers .svg amb les declaracions XML i la codificació adequades. Els fitxers s'anomenen segons l'ID de l'SVG, el nom de la classe o l'aria-label — no amb noms genèrics d'estil "download.svg".
Cada SVG mostra el seu tipus d'origen (integrat, extern, sprite, URI de dades), les dimensions de la viewBox, la mida del fitxer i on s'ha trobat al DOM. Útil per entendre com el lloc implementa la seva estratègia d'SVG.
Quan una pàgina utilitza sprites d'SVG amb referències use href="#icon-name", el Capturador d'SVGs resol cada referència a la definició de símbol completa — oferint-te l'SVG independent sencer, no només l'element use.
Visita un lloc web amb un bon sistema d'icones i agafa tot el conjunt d'icones SVG. El Capturador d'SVGs troba icones en sprites, SVGs integrats (inline) i fitxers externs — recollint la biblioteca d'icones completa independentment de com estigui implementada.
Necessites el logotip SVG d'una empresa per a una pàgina de col·laboració, un estudi de cas o un dossier de premsa? La majoria de logotips dels llocs web moderns són SVGs. El Capturador d'SVGs els troba i els extrau amb la seva qualitat vectorial original — infinitament escalables.
Estudia com els llocs web de producció implementen il·lustracions, animacions o visualitzacions de dades complexes en SVG. Copia el codi SVG pur per inspeccionar com estan estructurats els camins (paths), com s'ha configurat la viewBox i com s'apliquen les animacions CSS.
Estàs canviant a un nou sistema d'icones? Agafa els SVGs del lloc de referència i posa'ls al teu sprite d'SVG o sistema d'icones basat en components. Codi SVG net amb valors de viewBox correctes a punt per a la integració.
Revisa com s'implementen els SVGs al teu lloc — són integrats (bons per a la manipulació), externs (bons per a la memòria cau) o sprites (bons per a l'eficiència)? El Capturador d'SVGs mostra el tipus d'origen de cada SVG, ajudant-te a optimitzar la teva estratègia d'SVG.
Obre el tauler flotant de DevSuite Pro i fes clic a la icona del Capturador d'SVGs. L'eina escanejarà la pàgina a la recerca de totes les fonts d'SVG i crearà la galeria.
Apareixerà una quadrícula de miniatures d'SVG que mostra cada SVG trobat a la pàgina. Cada entrada mostra el nom de l'SVG, el tipus d'origen i les dimensions de la viewBox.
Fes clic a qualsevol SVG per obrir una previsualització més gran. Canvia entre els fons fosc, clar i de tauler d'escacs. Canvia la mida de la previsualització per veure com s'escala l'SVG.
Fes clic a "Copia l'SVG" per obtenir el marcatge pur per integrar-lo al teu codi, o a "Baixa" per desar-lo com un fitxer .svg independent al teu dispositiu.
Torna a la galeria per explorar més SVGs. L'etiqueta de recompte mostra el nombre total trobat a la pàgina.
Instal·la DevSuite Pro gratuïtament i desbloqueja més de 39 eines de desenvolupador per al teu navegador.
