SVG(スケーラブル・ベクター・グラフィックス Scalable Vector Graphics)
SVGの基本的なこと 10分でわかるSVGの基本的なこと2 SVG入門
SVG point
- HTMLを標準化しているW3Cが策定している
- 中身はXMLベースのテキストファイル
- GIF, PNG, JPEGがビットマップ形式なのに対し、座標情報によるベクター形式のデータ
- 極度に拡大したり、Retinaなどの高解像度ディスプレイで表示しても、ビットマップデータに見られるようなジャギーが目立たない。
- 解像度に合わせて、スマホ用、高解像度用の画像ファイルをそれぞれ用意する必要がない。
- 直線や曲線を組み合わせて描画する画像に向いている。写真データには不向き。
- 透過やアニメーションにも対応している。
- XMLを手入力するのは酷なので、Illustratorなどのドローソフトで描いてSVGファイルに出力することが多い。
SVG歴史
実はSVGの規格自体はかなり以前から存在したのですが、長らくInternet Explorer(以降IE)からのサポートが得られず、利用が広がらなかった。 しかし、そのIEも最新のIE9でSVGに正式対応し、利用環境が整いつつある。 拡大してもジャギーが出ないSVGのベクトルグラフィックスは、さまざまな解像度への対応が望まれるモバイル機器向けのサイトや、最近はやりのレスポンシブデザインに適している。