webサイトに表示されているアイコンの画像が取得できません

Question

githubのサイトで使用されている画像を保存したかった為、デベロッパーツールにて保存しようと思ったのですが、「application」タブの「Manifest」のicon欄には、似ているのですが、微妙に尻尾の部分に模様が入っており、実際にサイトのページで表示されているものとは違うものが表示されています。
また、「frames」のimagesの中にも、該当する画像はありませんでした。
探している画像は以下の画像です。

上記の画像を取得することは、できないのでしょうか？
ご存じの方おりましたら、教えて頂けたら幸いです。

Answer 1

デベロッパーツールで調べると、SVG であることがわかります。

Comments

[newyee]

ご返信おそくなってしまい、すみません。
svg画像の場合は、入手することはできないのでしょうか？

[退会済みユーザー]

jpeg などと異なり、path でリアルタイムに演算して、表示しているものです。ファイルとは異なるものなので、コードで表現するものです。「保存する」という概念が通じないものです。

Answer 2

ヒント：
faviconで検索すると、タブに使われているアイコン画像が得られます。同じ大きさです。
あとはico拡張子なので、bmpなどにオンライン上でも変換できるツールがあるので。
公開しない程度なら、それでも構わないと思いますよ?

Comments

[newyee]

faviconとどこかで、検索すれば、該当の画像が入手できるということでしょうか？

[hectopascal1013]

検索する場所は上の方のご指摘と一緒です。
ico画像のアドレスが分かり、別タブで読み込み保存し、icoをbmpなどに変換で入手完了です。

[newyee]

ご返信遅くなってしまいすみません。
検索する場所に関しまして、詳しく教えていただけませんでしょうか？

[hectopascal1013]

すいません。端折りすぎましたね。
今インターネットをご覧になっているのはPCからで良いでしょうか?
PCからですと、Google ChromeやＦirefox，その他ブラウザソフトと呼ばれる物からご覧になっていると思われます。
ブラウザソフトには、どれもデベロッパーツール、開発者ツールと呼ばれるものがあり、表示されているページの内部ソースコードをそのまま見ることができます。
私やShibuyaさんが探していたのもこのソースコード(=場所)からです。
ソースコードにはリンク先も書かれており、favicon画像のURLもそこにあります。

開発者(デベロッパー)ツールの呼び出し方は各種ブラウザ(閲覧)ソフトごとにも異なりますし、呼び出しのショートカットキーはOSごとにも異なります。

例:Mac GoogleChromeですとopt+command+Uあたりです。
ソコからcommand+Fで検索画面が出て、favicontと入力しヒットしています。URLから辿って、画像入手に成功しています。

他にも機能・使い方は様々ありますので、一度ネットで調べてみると面白いですよ?
https://blanche-toile.com/tools/chrome-firefox-devtools

[newyee]

ご丁寧に教えて頂きありがとうございます。
教えて頂きましたおかげで、favivonの画像をデバロッパーツールより入手することができました。
しかし、細かい部分かもしれないのですが、ご質問させて頂いた画像は、猫の部分が黒で背景が白となっています。デバロッパーツールの「elements」タブから確認しましたら、kosuke_shibuyaさんがご回答くださいましたように、「svg」画像となっており、URLは記載されていませんでした。
なんども申し訳ないのですが、ご質問させていただきました画像は入手することはできないのでしょうか？

Answer 3

簡単に取得できますよ！！

手順

1. chromeのデベロッパーツールで該当のソースコード(svgタグ)にマウスを合わせる。
2. 右クリックでEdit as HTMLをクリックする。
3. ソースコードをコピーする。
4. 任意のエディタにペーストし、index.html等適当な名前を付けて表示する。

番外
任意のエディタにペーストをし、hoge.svgとして保存するとsvg画像として使用することも可能です。

svg画像を取得する方法を記述しましたが著作権にお気を付けください。

Comments

[newyee]

ご回答ありがとうございます。
手順で教えて頂きました方法を試しましたら、表示させることができました！
ですが、番外の方でご回答くださった、方法を試したのですが、「This XML file does not appear to have any style information associated with it. The document tree is shown below.」このように表示がでて、その下に、svgタグ内に記載されたソースコードが表示されているのみで、画像は表示されませんでした...

[newyee]

ですが、無事表示させることができて、ホットしております。ありがとうございました。