SVG（Scalable Vector Graphics）フォーマットの画像をHTML上でWebサイト上で表示する方法について調べる機会があったので、一般的なPNG画像などを表示する場合と比較してまとめておきます。
ベクター画像について
ベクター画像（ベクターがぞう、英: vector graphics）は、コンピュータグラフィックスなどにおいて、画像を円や直線などのような解析幾何学的な「図形」の集まりとして表現する表現形式である。平面をスキャンし、その各点の濃淡の集まりによって画像を表現する「ビットマップ画像」（ラスター形式）と対置される。
（参考：wikipedia）
ベクター画像は、ピクセルの集合で表現されたラスター画像とは違い、XML（Extensible Markup Language）ベースで2次元情報を数値化して記録しています。画像を表示する際に、画像の拡大率にかかわらずコンピュータが計算を行うことで画面上に画像を表示しているらしいです。
SVGフォーマットのベクター画像をHTMLでブログなどのWebサイト上に設置することで、PNGやJPEGフォーマットなどのラスター画像と比べて、鮮明な画像を表示することが可能です。
表示例については、本ページ下にあります。
ベクター画像を生成可能な環境
カメラで撮影した画像や、Windows付属のペイントなどから出力できる画像は、ビットマップ形式で保存されているためラスター画像に分類されます。
ベクター画像を生成可能なソフトには、以下のようなものがあります。
- Inkscape
- diagrams.net
SVG形式画像のHTMLでの表示
「image.svg」は、各々で対象の画像のファイルやURL等に置き換えてください。
<svg width="200" height="200">
<image xlink:href="image.svg" width="100%" height="100%">
</svg>
- 環境にもよるかもしれないが<image>タグは<img>タグに置き換えると表示できない
- 「href」は「src」では動作しない
widthやheightの値を変えることで、画像の大きさを調節できます。
ベクター画像表示例
画像を拡大しても、ドットが見えないはずです。
ラスター画像のHTMLでの表示
「image.png」は任意の画像ファイルやURLに置き換えてください。pngフォーマットだけではなく、jpgなどのフォーマットにも対応しています。
<image src="image.png" width="200" height="200">- <image>タグは<img>タグに置き換え可能
- 「src」は「href」では表示できない
ラスター画像表示例
画像を拡大すると、円の縁に細かなドットがあり画像が粗くなっていくことが分かるはずです。
