SVG Grabber najde každý SVG na webové stránce — vložené SVG elementy, reference na externí soubory .svg, SVG sprity (vzory use/symbol) a SVG datová URI. Zobrazte si náhled každého SVG v různých velikostech, zkontrolujte průhlednost na světlém i tmavém pozadí, zkopírujte zdrojový SVG kód nebo stáhněte optimalizované SVG soubory.
SVG jsou všude na moderních webových stránkách — loga, ikony, ilustrace, dekorativní grafika, datové vizualizace — ale jejich extrakce je překvapivě obtížná. Vložené SVG jsou přímo zahrnuty v HTML a nelze je uložit jako obrázek. SVG sprity používají reference use/symbol, které se nerozkládají na samostatné soubory. Externí SVG načtené přes img src nebo CSS nelze zkontrolovat bez otevření záložky sítě. SVG Grabber tyto zdroje zpracovává automaticky. Prohledá DOM pro vložené SVG, rozloží reference na spritu do jejich kompletních definic symbolů, najde externí SVG adresy URL a dekóduje SVG datová URI. Každý SVG je zobrazen v galerii s živým náhledem a můžete přepínat mezi světlým, tmavým a šachovnicovým pozadím pro ověření průhlednosti. Zkopírujte zdrojový SVG kód pro vložení do svých komponent nebo stáhněte SVG jako soubor připravený pro použití ve vašem projektu.
Nachází SVG ze všech zdrojů na stránce: vložené elementy <svg> v DOM, externí soubory .svg načtené přes tagy img nebo object, SVG na pozadí CSS, reference use/symbol spritu (rozložené na kompletní SVG) a SVG zakódované v datových URI v base64.
Zobrazte náhled každého SVG v různých velikostech (originální, 2×, 4×) na třech pozadích: tmavém, světlém (bílém) a šachovnicovém. Šachovnicové pozadí odhaluje oblasti průhlednosti, které mohou být neviditelné na jednobarevném pozadí.
Klikněte na Kopírovat SVG a získejte kompletní SVG kód — viewBox, cesty, skupiny a všechny atributy jsou zahrnuty. Vložte přímo do svého HTML, JSX, Vue šablony nebo souboru SVG spritu. Kód je čistý a správně formátovaný.
Stáhněte jednotlivé SVG jako soubory .svg se správnými XML deklaracemi a kódováním. Soubory jsou pojmenovány podle ID, názvu třídy nebo aria-label SVG — nikoli generickými názvy download.svg.
Každý SVG zobrazuje typ zdroje (vložený, externí, sprit, datové URI), rozměry viewBox, velikost souboru a kde v DOM byl nalezen. Užitečné pro pochopení, jak stránka implementuje svou SVG strategii.
Když stránka používá SVG sprity s referencemi use href="#icon-name", SVG Grabber rozloží každou referenci na kompletní definici symbolu — dá vám kompletní standalone SVG, nikoli pouze element use.
Navštivte webovou stránku s vynikajícím systémem ikon a stáhněte celou sadu SVG ikon. SVG Grabber nachází ikony ve spritech, vložených SVG a externích souborech — shromáždí kompletní knihovnu ikon bez ohledu na to, jak je implementována.
Potřebujete SVG logo společnosti pro stránku partnerství, případovou studii nebo tiskovou sadu? Většina log na moderních webových stránkách jsou SVG. SVG Grabber je najde a extrahuje v jejich původní vektorové kvalitě — nekonečně škálovatelné.
Studujete, jak produkční weby implementují složité SVG ilustrace, animace nebo datové vizualizace? Zkopírujte zdrojový SVG kód a prozkoumejte, jak jsou strukturovány cesty, jak je nakonfigurován viewBox a jak jsou aplikovány CSS animace.
Přecházíte na nový systém ikon? Stáhněte SVG z referenčního webu a vložte je do svého SVG spritu nebo komponentového systému ikon. Čistý SVG kód se správnými hodnotami viewBox připraven pro integraci.
Zkontrolujte, jak jsou SVG implementovány na vašem webu — jsou vloženy (dobré pro manipulaci), externí (dobré pro ukládání do mezipaměti) nebo sprity (dobré pro efektivitu)? SVG Grabber zobrazuje typ zdroje pro každý SVG, což vám pomáhá optimalizovat vaši SVG strategii.
Otevřete plovoucí dok DevSuite Pro a klikněte na ikonu SVG Grabber. Nástroj prohledá stránku pro všechny SVG zdroje a sestaví galerii.
Zobrazí se mřížka náhledů SVG s každým SVG nalezeným na stránce. Každá položka zobrazuje název SVG, typ zdroje a rozměry viewBox.
Kliknutím na libovolný SVG otevřete větší náhled. Přepínejte mezi tmavým, světlým a šachovnicovým pozadím. Změňte velikost náhledu, abyste viděli, jak se SVG škáluje.
Klikněte na Kopírovat SVG pro získání zdrojového kódu pro vložení do vašeho kódu, nebo na Stáhnout pro uložení jako standalone soubor .svg do zařízení.
Přejděte zpět do galerie a prozkoumejte více SVG. Odznak s počtem zobrazuje celkový počet nalezených na stránce.
Nainstalujte si DevSuite Pro zdarma a odemkněte 39+ vývojářských nástrojů pro svůj prohlížeč.
