SVG グラバーは、ウェブページ上のすべての SVG を検出します — インライン SVG 要素、外部 .svg ファイル参照、SVG スプライト（use/symbol パターン）、SVG data URI。各 SVG をさまざまなサイズでプレビューし、明暗両背景での透明度を確認し、生の SVG マークアップをコピーするか、最適化された SVG ファイルをダウンロードできます。
SVG は現代のウェブサイトのあらゆる場所——ロゴ、アイコン、イラスト、装飾グラフィック、データビジュアライゼーション——に使われていますが、それを抽出するのは意外と難しいものです。インライン SVG は HTML に直接埋め込まれているため「名前を付けて画像を保存」ができません。SVG スプライトは use/symbol による参照を使うため、単体のファイルとしては解決されません。img の src や CSS で読み込まれる外部 SVG は、Network タブを開かなければ内容を確認できません。
SVG Grabber はこれらすべてのソースを自動的に処理します。DOM 内をスキャンしてインライン SVG を検出し、スプライト参照を完全なシンボル定義に解決し、外部 SVG の URL を見つけ出し、SVG のデータ URI をデコードします。各 SVG はライブプレビュー付きのギャラリーに表示され、ライト、ダーク、市松模様の背景を切り替えて透明度を確認できます。
fill や stroke に currentColor を使用している SVG——周囲のテキストから色を継承させるアイコンによくあるパターンです——は検出され、フラグが付けられます。こうした SVG は生のコードを取得することで色のテーマ切り替えの挙動を保持できる一方、ラスター化されたスクリーンショットではキャプチャした瞬間にたまたま表示されていた色がそのまま焼き付いてしまいます。生の SVG コードをコピーしてコンポーネントにインライン化することも、プロジェクトですぐに使えるファイルとしてダウンロードすることもできます。
ページ上のすべてのソースから SVG を検出します：DOM 内のインライン <svg> 要素、img または object タグで読み込まれた外部 .svg ファイル、CSS background-image SVG、use/symbol スプライト参照（完全な SVG に解決）、base64 data URI エンコードされた SVG。
各 SVG をさまざまなサイズ（オリジナル、2x、4x）で、暗・明（白）・チェッカーボードの3種類の背景に対してプレビューできます。チェッカーボードは単色背景では見えにくい透明領域を明示します。
「SVG をコピー」をクリックして、viewBox、パス、グループ、すべての属性を含む完全な SVG マークアップを取得します。HTML、JSX、Vue テンプレート、または SVG スプライトファイルに直接貼り付けられます。コードはクリーンで適切にフォーマットされています。
適切な XML 宣言とエンコーディングを含む .svg ファイルとして個別の SVG をダウンロードできます。ファイル名は汎用的な「download.svg」ではなく、SVG の ID、クラス名、または aria-label に基づいて命名されます。
各 SVG にはソースタイプ（インライン、外部、スプライト、data URI）、viewBox の寸法、ファイルサイズ、DOM 内の位置が表示されます。サイトの SVG 実装戦略を理解するのに役立ちます。
ページが use href="#icon-name" 参照で SVG スプライトを使用している場合、SVG グラバーは各参照を完全な symbol 定義に解決します — use 要素だけでなく、完全なスタンドアロン SVG を取得できます。
優れたアイコンシステムを持つウェブサイトを訪問し、SVG アイコンセット全体を取得します。SVG グラバーはスプライト、インライン SVG、外部ファイルのアイコンを検出し、実装方法に関わらず完全なアイコンライブラリを収集します。
パートナーシップページ、ケーススタディ、プレスキット用に企業の SVG ロゴが必要ですか？モダンなウェブサイトのほとんどのロゴは SVG です。SVG グラバーは元のベクター品質でロゴを検出・抽出します — 無限にスケーラブルです。
本番サイトが複雑な SVG イラスト、アニメーション、データビジュアライゼーションをどのように実装しているかを学習します。生の SVG コードをコピーして、パスの構造、viewBox の設定方法、CSS アニメーションの適用方法を調べます。
新しいアイコンシステムに切り替えますか？参照サイトから SVG を取得し、SVG スプライトまたはコンポーネントベースのアイコンシステムに組み込みます。適切な viewBox 値を持つクリーンな SVG コードが統合すぐに使えます。
サイトでの SVG の実装方法を確認します — インライン（操作に適している）、外部（キャッシングに適している）、スプライト（効率に適している）のどれですか？SVG グラバーは各 SVG のソースタイプを表示し、SVG 戦略の最適化を支援します。
DevSuite Pro のフローティングドックを開き、SVG グラバーアイコンをクリックします。ツールがページ上のすべての SVG ソースをスキャンしてギャラリーを構築します。
ページで見つかったすべての SVG のサムネイルグリッドが表示されます。各エントリには SVG 名、ソースタイプ、viewBox の寸法が表示されます。
任意の SVG をクリックして拡大プレビューを開きます。暗・明・チェッカーボード背景を切り替えられます。プレビューのサイズを変更して SVG のスケーリングを確認できます。
「SVG をコピー」をクリックしてコードにインライン化するための生マークアップを取得するか、「ダウンロード」をクリックしてデバイスにスタンドアロンの .svg ファイルとして保存します。
ギャラリーに戻ってさらに SVG を探索します。カウントバッジにページで見つかった SVG の総数が表示されます。
