目的
拡張子「.svg」についてまとめる。
SVGファイルの概略
- 画像ファイルの拡張子の一種
- PNG, JPEG, GIFとは描画方法が異なる。
- PNGなどは「ラスタ形式」、SVGは「ベクタ形式」
- CSSやJavaScriptで動きをつけることができる。
- 画像なのにテキストで記述されている。→テキストエディタで編集が可能。
ベクタ形式
- 画像データの頂点の位置と、頂点をつないだ線、色、曲線などを数値化して再現したもの。
- 代表的なファイルはやSVGやPDFがベクタ形式。
- 画像データが数値として保存されているため、リサイズされても数値をリサイズされた比率に合わせることにより画像が劣化することがない。
- 複雑すぎると表現することが難しい場合がある。
まとめ
- 画像劣化がないのでSVGファイルはWebサイトのレスポンシブデザインに向いている。
- アイコンなどは積極的にSVGファイルを使用する。