818 views
この記事は最終更新から 1709日 が経過しています。
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>
ここでラスタ画像とベクタ画像の特徴の違いを実感できる。
ベクタ画像の場合、表示サイズを変えてもギザギザにならない！
この理由は、以下のように画像フォーマットが異なるため。
・ラスタ画像では、１ピクセルごとに色を決めている。
・ベクタ画像では、頂点情報を元に表示時に中間点の位置を内挿計算して決めている。
よって…
ベクタ画像では、サイズ変更時に縁がギザギザにならない。