一番上にあるロゴの画像ファイルをダウンロードすると、ファイル名が
logo_prtimes.svg
であり、エクスプローラーでも、画像ファイルとして認識されないので、画像を縮小したアイコンにならず、関連づけられているブラウザとなっています。
ソースを見ると、
<a href="https://prtimes.jp" class="header-logo__link">
<img src="/src/images/prtimes-jp/html/logo_prtimes.svg" alt="PR TIMES">
</a>
となっています。
従来の画像ファイルと全く同じく、
img src=
で簡単に指定できることが分かります。
当ブログのシステムは、画像ファイルと設定されていません。
logo_prtimes.svg
クリックすると、別のタブで開きます。(ただし白いロゴなので、一見すると見えません。)
手作業で埋め込んでみます。
ソース
<img src="http://qpbgm.sakura.ne.jp/sblo_files/qpbgm/image/logo_prtimes.svg" alt="埋め込みテスト">
サイズ指定をしてみます。
ソース
<img src="http://qpbgm.sakura.ne.jp/sblo_files/qpbgm/image/logo_prtimes.svg" alt="埋め込みテスト" width="400">
height=の指定はしてありませんが、縦横比が正しく保たれるようです。
svg(Scalable Vector Graphics)ファイルはベクトルデータで作られているのとことです。したがって、1つのファイルで様々なサイズでの汎用ができるということでしょう。また、大きな表示の時でもファイルサイズが小さくなります。
ファイルデータの転送時間を短くし、処理の負担は受信サイドに頼るという点で、web向きなのかも知れません。
最後に、 width="2000"を指定してみます。
一つ分からないのは、デフォルトのサイズはどのように決められるか、です。
何と、一般的なビットマップによる画像ファイルをsvgに変換してくれるサイトがありました。
https://www.vectorizer.io/
変換したファイルです。
(巾400に縮小指定)
背景色を透明にしたファイル。
(オリジナルサイズ/サイズ指定なし)
jpegファイルを手作業で32色に減色したpngファイルを変換したもの。
(巾400に縮小指定)
(巾1000に指定)