SVG画像をChrome検証ツールで自分のPCに保存する

ホームページなどにあるSVG画像を、自分のパソコンに保存する方法をご紹介します。

私は模写するときによく行います。

この方法はsvg画像でなくても、jpegなどの他の拡張子の画像にも対応できますし
とっても簡単なのでおすすめです。

当たり前のことですが、あくまで私的使用目的として自分のローカル環境に保存し、その後破棄するようにしています。

あわせて読みたい

jsとsassで文字を一文字ずつ表示させる

スポンサーリンク

Chrome検証ツール・ネットワーク

ブラウザ画面上を右クリック→検証でChrome検証ツールを開きます。

ゼブラのサイトを使用しています。

コーディングをするときはだいたい「要素」のタブだと思いますが、「ネットワーク」をクリックします。

クリックしたあとに、もう一度リロードしてもよいかもしれません。

画像などが再び読み込まれて、左側の「名前」というところにズラーっと画像が縦にリストアップされます。

1番上のsvg画像の名前をクリック。

左側のプレビュータブをクリックするとその画像が表示されます。

その画像をPCのデスクトップなどにドラックするとあっという間にダウンロードできます。

urlからダウンロード

それ以外には「ヘッダー」タブをクリックすると「リクエストURL」という欄があります。

そこにURLがあるので、別のブラウザを開いてそのURLを開くと画像を取得することもできます。

下の画像はURLは隠してありますが、そこに表示されているはずです。

Chromeの拡張機能でも簡単にSVG画像をダウンロード「svg-grabber」というものがあるらしいので、そちらを使用してもよいかもしれません。

私は検証ツールを使いたいのでこちらの方法でしています。

コーディングのみだと要素タブを使用することがとても多いかもしれませんが、ネットワークタブはとても勉強になるので率先して使用したいですね。

スポンサーリンク

とーりん

毎日うんまい物食べるのが好き

TwitterFacebookLINE

横浜市を中心に、個人でチラシやリーフレット・名刺制作などを小さくしています。 人生には感謝がいっぱいなので、感謝を返していきたい、そんな思いから「さんくすデザイン」という名前にしました。 わたしは独学から始まったので、同じようにデザインを独学するみなさんを応援します。 デザインとは関係ないお話も気軽に投稿しています。どうぞよろしくお願いいたします。