(79) 【SVG画像】WEBブラウザにSVG画像を表示する。

投稿者: | 2020年2月7日

この記事は最終更新から 625日 が経過しています。

1. やりたいこと

過去25年ぐらい JPEGや GIFなどのいわゆるラスタ画像をWEBブラウザに表示してきた。
実現方法は簡単で、以下のように IMGタグを使って簡単に表示できる。

<img src="./image.jpg">

今回は初めて
ベクタ画像を WEBブラウザに表示してみたい。

ベクタ画像は過去12年ほど Adobe Illustratorで作り続けているが、WEBブラウザで表示する機会はなかった。

2. やってみる

(1) ベクタ画像を作成する。

Adobe Illustratorで以下のような星形のベクタ画像を作成した。
縁は黒い線、中身は黄色で塗りつぶした。

出来上がったベクタ画像を SVG画像として出力する。

(2) ベクタ画像を WEBブラウザ上に表示する。

上記(1)で作成したベクタ画像ファイルをWEBサーバーにアップロードし、以下のような HTMLで表示する。
JPEGや GIFなどのラスタ画像と同様に IMGタグで表示する。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>00079 demo1</title>
</head>
<body>

<img src="./svgimg1.svg">

</body>
</html>

(3) ベクタ画像の表示サイズをいろいろと変えてみる。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>00079 demo2</title>
</head>
<body>

<img src="./svgimg1.svg" style="height:100px">

<img src="./svgimg1.svg" style="height:200px">

<img src="./svgimg1.svg" style="height:300px">

</body>
</html>

ここでラスタ画像とベクタ画像の特徴の違いを実感できる。
ベクタ画像の場合、表示サイズを変えてもギザギザにならない!

この理由は、以下のように画像フォーマットが異なるため。
・ラスタ画像では、1ピクセルごとに色を決めている。
・ベクタ画像では、頂点情報を元に表示時に中間点の位置を内挿計算して決めている。

よって…
ベクタ画像では、サイズ変更時に縁がギザギザにならない。


カテゴリー: SVG

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)