SVG Grabber otkriva svaki SVG na web stranici — inline SVG elemente, reference na vanjske .svg datoteke, SVG sprite-ove (use/symbol uzorke) i SVG data URI-je. Pregledajte svaki SVG u različitim veličinama, provjerite prozirnost na svijetloj i tamnoj pozadini, kopirajte sirovi SVG markup ili preuzmite optimizirane SVG datoteke.
SVG-ovi su sveprisutni na modernim web stranicama — logotipi, ikone, ilustracije, dekorativna grafika, vizualizacije podataka — no njihovo izvlačenje je iznenađujuće teško. Inline SVG-ovi su izravno ugrađeni u HTML i ne mogu se "spremiti kao slika." SVG sprite-ovi koriste use/symbol reference koje se ne razrješavaju u samostalne datoteke. Vanjski SVG-ovi učitani putem img src ili CSS-a ne mogu se pregledati bez otvaranja mrežne kartice. SVG Grabber automatski obrađuje sve ove izvore. Skenira DOM za inline SVG-ove, razrješava sprite reference do njihovih potpunih definicija simbola, pronalazi vanjske SVG URL-ove i dekodira SVG data URI-je. Svaki SVG prikazuje se u galeriji s live pregledom, a možete prebacivati između svjetle, tamne i šahovske pozadine radi provjere prozirnosti. Kopirajte sirovi SVG kôd za ugrađivanje u komponente ili preuzmite SVG kao datoteku spremnu za korištenje u projektu.
Pronalazi SVG-ove iz svakog izvora na stranici: inline <svg> elementi u DOM-u, vanjske .svg datoteke učitane putem img ili object tagova, CSS background-image SVG-ovi, use/symbol sprite reference (razriješene do potpunih SVG-ova) i base64 data URI kodirani SVG-ovi.
Pregledajte svaki SVG u različitim veličinama (originalna, 2x, 4x) na tri pozadine: tamnoj, svjetloj (bijela) i šahovskoj. Šahovska pozadina otkriva područja prozirnosti koja bi mogla biti nevidljiva na jednobojnoj pozadini.
Kliknite "Copy SVG" kako biste dobili potpuni SVG markup — viewBox, putanje, grupe i svi atributi su uključeni. Zalijepite izravno u HTML, JSX, Vue predložak ili SVG sprite datoteku. Kôd je čist i pravilno formatiran.
Preuzmite pojedinačne SVG-ove kao .svg datoteke s odgovarajućim XML deklaracijama i kodiranjem. Datoteke su imenovane prema SVG-ovom ID-u, nazivu klase ili aria-label — a ne generičkim imenima poput "download.svg".
Svaki SVG prikazuje vrstu izvora (inline, external, sprite, data URI), dimenzije viewBox-a, veličinu datoteke i mjesto u DOM-u gdje je pronađen. Korisno za razumijevanje načina na koji stranica implementira svoju SVG strategiju.
Kada stranica koristi SVG sprite-ove s use href="#icon-name" referencama, SVG Grabber razrješava svaku referencu do potpune definicije simbola — dajući vam potpuni samostalni SVG, a ne samo use element.
Posjetite web stranicu s odličnim sustavom ikona i preuzmite cijeli skup SVG ikona. SVG Grabber pronalazi ikone u sprite-ovima, inline SVG-ovima i vanjskim datotekama — prikupljajući kompletnu biblioteku ikona bez obzira na način implementacije.
Trebate SVG logotip tvrtke za stranicu partnerstva, studiju slučaja ili press kit? Većina logotipa na modernim web stranicama su SVG-ovi. SVG Grabber ih pronalazi i izvlači u originalnoj vektorskoj kvaliteti — beskonačno skalabilno.
Proučavate kako produkcijske web stranice implementiraju složene SVG ilustracije, animacije ili vizualizacije podataka. Kopirajte sirovi SVG kôd kako biste pregledali strukturu putanja, konfiguraciju viewBox-a i primjenu CSS animacija.
Prelazite na novi sustav ikona? Preuzmite SVG-ove s referentne stranice i ubacite ih u SVG sprite ili komponentni sustav ikona. Čist SVG kôd s ispravnim viewBox vrijednostima spreman za integraciju.
Pregledajte kako su SVG-ovi implementirani na vašoj stranici — jesu li inline (dobro za manipulaciju), vanjski (dobro za predmemoriranje) ili sprite-ovi (dobro za učinkovitost)? SVG Grabber prikazuje vrstu izvora za svaki SVG, pomažući vam optimizirati SVG strategiju.
Otvorite plutajući dock DevSuite Pro i kliknite ikonu SVG Grabber. Alat skenira stranicu za sve SVG izvore i gradi galeriju.
Pojavljuje se mreža SVG minijatura prikazujući svaki SVG pronađen na stranici. Svaki unos prikazuje naziv SVG-a, vrstu izvora i dimenzije viewBox-a.
Kliknite bilo koji SVG za otvaranje većeg pregleda. Prebacujte između tamne, svjetle i šahovske pozadine. Promijenite veličinu pregleda kako biste vidjeli kako se SVG skalira.
Kliknite "Copy SVG" za sirovi markup radi ugrađivanja u kôd, ili "Download" za spremanje kao samostalne .svg datoteke na uređaj.
Navigirajte natrag u galeriju kako biste istražili više SVG-ova. Oznaka s brojem prikazuje ukupan broj pronađenih na stranici.
Instalirajte DevSuite Pro besplatno i otključajte 39+ razvojnih alata za svoj preglednik.
