LoginSignup
8
5

More than 5 years have passed since last update.

@ryuichi1208(渡部 龍一)inYYPHP

CanvasとSVGの違い

Last updated at Posted at 2019-03-18

CanvaとSVGの違い

SVG

  • ベクター形式で描画
  • 拡張子は「.svg」
  • 図形がDOM要素なのでJavaScriptとの相性がよい
  • ベクター形式なので拡大、縮小で図形の劣化がない
  • グラフィックスをXMLで表現する
  • 円を描く場合は白紙にコンパスで円を表現するといった描画
  • 高精細な円を表示できる
  • SVGは単独で装飾や変形によるアニメーションが可能

Canvas

  • HTML5の機能の一つ
  • ラスター形式(ビットマップ形式)で描画
  • 要素で描画領域を確保してJavaScriptで描画する
  • ビットマップ形式なのでピクセル単位での細かい描画が行える
8
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
8
5