Temukan setiap SVG — inline, eksternal, sprite dan data URI.
SVG boleh dijumpai di merata-rata laman web moden — logo, ikon, ilustrasi, grafik hiasan, visualisasi data — tetapi mengekstraknya ternyata cukup sukar. SVG inline dibenamkan terus dalam HTML dan tidak boleh "disimpan sebagai imej". SVG sprite menggunakan rujukan use/symbol yang tidak boleh diselesaikan menjadi fail yang berdiri sendiri. SVG luaran yang dimuatkan melalui img src atau CSS tidak boleh diperiksa tanpa membuka tab network.
SVG Grabber mengendalikan semua sumber ini secara automatik. Ia mengimbas DOM untuk mencari SVG inline, menyelesaikan rujukan sprite kepada definisi symbol lengkapnya, mencari URL SVG luaran, dan menyahkod SVG data URI. Setiap SVG dipaparkan dalam galeri dengan pratonton langsung, dan anda boleh menukar antara latar belakang light, dark, dan checkerboard untuk mengesahkan transparency.
SVG yang menggunakan currentColor untuk fill atau stroke-nya — corak biasa untuk ikon yang direka untuk mewarisi warna daripada teks sekelilingnya — dikesan dan ditandakan, kerana mengambil kod mentah bagi SVG ini akan mengekalkan gelagat color-theming-nya, tidak seperti tangkapan skrin rasterized yang akan "membakar" (bake in) apa jua warna yang kebetulan dipaparkan pada masa tangkapan dibuat. Salin kod SVG mentah untuk digunakan secara inline dalam komponen anda, atau muat turun SVG sebagai fail yang sedia digunakan dalam projek anda.
Finds SVGs from every source on the page: inline <svg> elements in the DOM, external .svg files loaded via img or object tags, CSS background-image SVGs, use/symbol sprite references (resolved to complete SVGs), and base64 data URI encoded SVGs.
Preview each SVG at different sizes (original, 2x, 4x) against three backgrounds: dark, light (white), and checkerboard. The checkerboard reveals transparency areas that might be invisible on a single-color background.
Click "Copy SVG" to get the complete SVG markup — viewBox, paths, groups, and all attributes included. Paste directly into your HTML, JSX, Vue template, or SVG sprite file. The code is clean and properly formatted.
Download individual SVGs as .svg files with proper XML declarations and encoding. Files are named based on the SVG's ID, class name, or aria-label — not generic "download.svg" names.
Each SVG shows its source type (inline, external, sprite, data URI), viewBox dimensions, file size, and where in the DOM it was found. Useful for understanding how the site implements its SVG strategy.
When a page uses SVG sprites with use href="#icon-name" references, SVG Grabber resolves each reference to the complete symbol definition — giving you the full standalone SVG, not just the use element.
Visit a website with a great icon system and grab the entire SVG icon set. SVG Grabber finds icons in sprites, inline SVGs, and external files — collecting the complete icon library regardless of how it's implemented.
Need a company's SVG logo for a partnership page, case study, or press kit? Most logos on modern websites are SVGs. SVG Grabber finds and extracts them at their original vector quality — infinitely scalable.
Studying how production websites implement complex SVG illustrations, animations, or data visualizations. Copy the raw SVG code to inspect how paths are structured, how viewBox is configured, and how CSS animations are applied.
Switching to a new icon system? Grab SVGs from the reference site, drop them into your SVG sprite or component-based icon system. Clean SVG code with proper viewBox values ready for integration.
Review how SVGs are implemented on your site — are they inline (good for manipulation), external (good for caching), or sprites (good for efficiency)? SVG Grabber shows the source type for each SVG, helping you optimize your SVG strategy.
Open the DevSuite Pro floating dock and click the SVG Grabber icon. The tool scans the page for all SVG sources and builds the gallery.
A grid of SVG thumbnails appears showing every SVG found on the page. Each entry shows the SVG name, source type, and viewBox dimensions.
Click any SVG to open a larger preview. Toggle between dark, light, and checkerboard backgrounds. Resize the preview to see how the SVG scales.
Click "Copy SVG" to get the raw markup for inlining in your code, or "Download" to save it as a standalone .svg file to your device.
Navigate back to the gallery to explore more SVGs. The count badge shows the total number found on the page.
Pasang DevSuite Pro secara percuma dan buka 64+ alat pembangun untuk pelayar anda.
