Az SVG Grabber felfedez minden SVG-t egy weboldalon — beágyazott SVG elemeket, külső .svg fájlhivatkozásokat, SVG sprite-okat (use/symbol mintákat) és SVG data URI-kat. Tekintse meg az egyes SVG-ket különböző méretekben, ellenőrizze az átlátszóságukat világos és sötét háttéren, másolja ki a nyers SVG kódot, vagy töltse le az optimalizált SVG fájlokat.
Az SVG-k mindenütt jelen vannak a modern weboldalakon — logók, ikonok, illusztrációk, dekoratív grafikák, adatvizualizációk —, de a kinyerésük meglepően nehéz. A beágyazott SVG-k közvetlenül a HTML-be vannak ágyazva, és nem "menthetők képként". Az SVG sprite-ok use/symbol hivatkozásokat használnak, amelyek nem oldódnak fel önálló fájlokká. Az img src-n vagy CSS-en keresztül betöltött külső SVG-k a hálózati fül megnyitása nélkül nem vizsgálhatók meg. Az SVG Grabber automatikusan kezeli mindezeket a forrásokat. Átvizsgálja a DOM-ot beágyazott SVG-k után, feloldja a sprite-hivatkozásokat a teljes symbol-definícióikra, megtalálja a külső SVG URL-eket, és dekódolja az SVG data URI-kat. Minden SVG egy galériában jelenik meg élő előnézettel, és váltogathat világos, sötét és sakktábla-mintás háttér között az átlátszóság ellenőrzéséhez. Másolja ki a nyers SVG kódot a komponenseibe való beágyazáshoz, vagy töltse le az SVG-t fájlként, amely azonnal használatra kész a projektjében.
Az oldal minden forrásából megtalálja az SVG-ket: a DOM-ba ágyazott <svg> elemek, img vagy object tageken keresztül betöltött külső .svg fájlok, CSS háttérkép SVG-k, use/symbol sprite-hivatkozások (teljes SVG-vé feloldva), valamint base64 data URI-ként kódolt SVG-k.
Tekintse meg az egyes SVG-ket különböző méretekben (eredeti, 2x, 4x), három háttér előtt: sötét, világos (fehér) és sakktábla-minta. A sakktábla-minta felfedi az átlátszó területeket, amelyek egyszínű háttéren láthatatlanok maradhatnának.
Kattintson az "SVG másolása" gombra a teljes SVG jelölőkód megszerzéséhez — viewBox, útvonalak, csoportok és minden attribútum tartalmazva. Illessze be közvetlenül a HTML-be, JSX-be, Vue sablonba vagy SVG sprite-fájlba. A kód tiszta és megfelelően formázott.
Töltse le az egyes SVG-ket .svg fájlként, megfelelő XML-deklarációval és kódolással. A fájlok elnevezése az SVG ID-ja, osztálynév vagy aria-label alapján történik — nem generikus "download.svg" névvel.
Minden SVG mutatja a forrástípusát (beágyazott, külső, sprite, data URI), a viewBox méreteit, a fájlméretet és azt, hogy a DOM mely pontján található. Hasznos annak megértéséhez, hogyan valósítja meg az adott oldal az SVG-stratégiáját.
Amikor egy oldal SVG sprite-okat használ use href="#icon-name" hivatkozásokkal, az SVG Grabber minden hivatkozást feloldja a teljes symbol-definícióra — így nem csak a use elemet, hanem a teljes önálló SVG-t is megkapja.
Látogasson meg egy remek ikonrendszerrel rendelkező weboldalt, és nyerje ki a teljes SVG ikonkészletet. Az SVG Grabber megtalálja az ikonokat sprite-okban, beágyazott SVG-kben és külső fájlokban — összegyűjtve a teljes ikonkönyvtárat, függetlenül a megvalósítás módjától.
Szüksége van egy cég SVG logójára egy partnerségi oldalhoz, esettanulmányhoz vagy sajtóanyaghoz? A modern weboldalak legtöbb logója SVG. Az SVG Grabber megtalálja és kinyeri őket eredeti vektorminőségben — végtelenül skálázhatóan.
Tanulmányozza, hogyan valósítanak meg éles weboldalak összetett SVG-illusztrációkat, animációkat vagy adatvizualizációkat. Másolja ki a nyers SVG kódot, hogy megvizsgálja az útvonalak felépítését, a viewBox konfigurációját és a CSS animációk alkalmazását.
Új ikonrendszerre vált? Gyűjtse össze az SVG-ket a referenciaoldalról, és illessze be őket a saját SVG sprite-jába vagy komponensalapú ikonrendszerébe. Tiszta SVG kód, megfelelő viewBox értékekkel, integrációra készen.
Tekintse át, hogyan vannak megvalósítva az SVG-k az oldalán — beágyazottak (jó a manipulációhoz), külsők (jó a gyorsítótárazáshoz) vagy sprite-ok (jó a hatékonysághoz)? Az SVG Grabber minden SVG-hez mutatja a forrástípust, segítve az SVG-stratégia optimalizálását.
Nyissa meg a DevSuite Pro lebegő dokkját, és kattintson az SVG Grabber ikonra. Az eszköz átvizsgálja az oldalt minden SVG-forrás után, és felépíti a galériát.
Megjelenik egy SVG miniatűrökből álló rács, amely az oldalon talált összes SVG-t megmutatja. Minden bejegyzés mutatja az SVG nevét, forrástípusát és viewBox méreteit.
Kattintson bármely SVG-re egy nagyobb előnézet megnyitásához. Váltson sötét, világos és sakktábla-mintás háttér között. Méretezze át az előnézetet, hogy lássa, hogyan skálázódik az SVG.
Kattintson az "SVG másolása" gombra a nyers jelölőkód megszerzéséhez a kódjába való beágyazáshoz, vagy a "Letöltés" gombra, hogy önálló .svg fájlként mentse az eszközére.
Térjen vissza a galériába további SVG-k felfedezéséhez. A darabszám-jelvény mutatja az oldalon talált SVG-k teljes számát.
Telepítse ingyen a DevSuite Pro-t, és oldjon fel 64+ fejlesztői eszközt böngészőjéhez.
