SVG
SVGは
scalable
vector
graphics
の略
SVGはHTML5の関連技術なので
HTML5の仕様には含まれない
canvasでもSVGでも
イラストや図形が描ける
canvasとSVGの違いを紹介
まず、canvas
こちらはピクセルの集まりで
グラフィックを表現
次にSVG
こちらは座標点の集まりで
グラフィックを表現
このため、毎回描画するときに計算するので
canvasより遅い
あと
canvasは
ピクセルごとにエフェクト処理できるけと
SVGでは
ピクセル単位のエフェクト処理はできない
まるでメリットなしみたいだけど
SVGにもメリットがあり
少ないデータでどのようなサイズでも
グラフィック描画ができるという利点がある
これは、canvasだと
画像を縮小したら画像が潰れたり
拡大したら、ピクセルが大きくなり
輪郭がブロックみたいなかんじになる
よくあるパソコンとかで、
ドット絵を拡大したような状態になるものを
描画したいときに
SVGなら
毎回サイズにあわせて計算するから
ベストな状態になるというのが
利点
あと、Canvasは描画するときに
Javascriptの制御が必要だけど
SVGは
XMLベースなので
HTML内に
svg要素を書いて図形を描画できる