Chromeの開発者ツールで背景画像に設定されたSVGファイルをダウンロードする方法:メモ

やったらできたのでメモ。

書いている途中で当記事の内容が非常にどうでもいいなと気づいたのですが、後日同じことをしたくて検索しそうなので念のため自分用に残します。

実現したいこと

• CSSのbackground-imageに指定されたSVG画像をブラウザのみで取得する

ChromeからのSVG画像ダウンロードの方法は検索すればいくつもでてきると思いますが、今回試した方法はブラウザの開発者ツールのみで実行可能です(先行情報あったらごめんなさい)。

取得方法1

1. 開発者ツールを開く
2. Networkタブで該当の画像名を探す
3. 画像名をクリックする
4. 右側画面がHeadersタブになっていると思うので、ここをPreviewタブにする
5. プレビューに表示されている画像をドラッグしてローカルのフォルダーにドロップ
6. download.svgという名称でダウンロードされる

手に入れたSVG画像がブラウザに表示されている画像と本当に同じなのかは、ブラウザに画像のURLを入れて「ページのソース」を開き、ダウンロードしたSVG画像をテキストエディタなどで開いて比較すれば確認できると思います。

取得方法2

1. ブラウザに画像のURLを入れて表示させ、「ページのソース」を開く
2. 出てきたコードをテキストエディタ入力して保存する

取得方法1を書いた際に気がつきましたが、パスがわかっていれば開発者ツールを開く必要すらないですね…。

結び

素材支給が難しい場合はどうにかして手に入れなければならないので、こういう方法も時には必要になるかなと。

なお、今回この方法を用いたのはクライアントご自身のサイトですし、書くまでもないとは思いますが権利侵害になる使い方はやめましょう。