こんにちは、SiTest事業部エンジニアの森永です。 HTML5において描画を行う方法としてサポートされており、よく使われているものとしてSVGとCanvasが挙げられます。これらが正式にサポートされWebサイトにおける描画が行えるようになり、幅広く使われるようになりました。 HTML5の正式勧告前から使用できるブラウザも多かったため既にご存じの方も多いかと思いますが、今回は改めてSVGとCanvasについて比較してみます。 SVGとCanvasでは描画の仕方、記述の仕方が違います。 【SVG】 ベクター形式で描画 図形一つ一つが<svg>タグの子要素であるDOM要素として記載される 図形の組み合わせを拡張子”.svg”の外部ファイルとして扱うことも可能 SVGファイルはAdobe Illustratorで読み出し、保存が可能 図形がDOM要素なのでJavaScriptでの変形などが行いや
![HTML5での描画を実現するSVGとCanvasを改めて比較する | SiTest (サイテスト) ブログ](https://cdn-ak-scissors.b.st-hatena.com/image/square/7bf6ec6c79f41e224a8c819e4dec83583549d75e/height=288;version=1;width=512/http%3A%2F%2Fsitest.jp%2Fimages%2Fsitest-ogp.png)