2020年09月22日

pngでもjpgでもないwebの画像ファイル

 WEBで使われる画像ファイルといえば、png、jpg、gifあたりを思い浮かべますが、今日であった画像ファイルはそれとは別でした。

prtimes.png

 一番上にあるロゴの画像ファイルをダウンロードすると、ファイル名が
logo_prtimes.svg
であり、エクスプローラーでも、画像ファイルとして認識されないので、画像を縮小したアイコンにならず、関連づけられているブラウザとなっています。

svg01.png


 ソースを見ると、
<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に指定)
posted by kewpie at 23:00| Comment(0) | TrackBack(0) | パソコン
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.sakura.ne.jp/tb/187970568
※ブログオーナーが承認したトラックバックのみ表示されます。
※言及リンクのないトラックバックは受信されません。

この記事へのトラックバック
コメントの投稿について
○お名前とコメント欄の記入は必須です。
○メールアドレスは任意です。記入されても公開はされません。管理人のみに知らされます。
○スパム防止のため、
・ホームページアドレス欄への記入はできません。
・コメント欄にURLは記入できません。
・スパムと思われる語を記入できません。
 これらをしようとすると、最終的に投稿完了できません。
○投稿完了後に、管理人の判断でスパムと判断した投稿は削除させていただきます。