SVG グラバーは、ウェブページ上のすべての SVG を検出します — インライン SVG 要素、外部 .svg ファイル参照、SVG スプライト（use/symbol パターン）、SVG data URI。各 SVG をさまざまなサイズでプレビューし、明暗両背景での透明度を確認し、生の SVG マークアップをコピーするか、最適化された SVG ファイルをダウンロードできます。
SVG はモダンなウェブサイトのあらゆる場所に存在します — ロゴ、アイコン、イラスト、装飾グラフィック、データビジュアライゼーション — しかし抽出は意外と困難です。インライン SVG は HTML に直接埋め込まれているため「画像として保存」ができません。SVG スプライトは use/symbol 参照を使用しており、スタンドアロンファイルとして解決されません。img src や CSS で読み込まれた外部 SVG は、ネットワークタブを開かなければ検査できません。SVG グラバーはこれらすべてのソースを自動的に処理します。DOM でインライン SVG をスキャンし、スプライト参照を完全な symbol 定義に解決し、外部 SVG URL を見つけ、SVG data URI をデコードします。各 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 の総数が表示されます。
DevSuite Pro を無料でインストールして、ブラウザで 39 以上の開発者ツールを利用しましょう。
