SVGをcanvasで使う - Qiita

この記事はACCESS Advent Calendar 1日目の記事です。 こんにちは ACCESS開発本部IoT開発部の渡辺 (@sassy_watson) です。 今回は私がSVGをcanvasで使う方法についての記事を書こうと思います。 SVGとCanvas SVGはただのベクターグラフィックスというだけでなく、 マスクやクリップだったらグラデーションやフィルターだったり いろいろ高機能なのが魅力です。 ただ、XMLなのでJavaScriptでなにかしようするときのDOM操作が面倒くさいです。 一方、CanvasはAPIが簡単なのでJavaScriptで扱いやすいというメリットがあります。 SVGをCanvasで使う そこで、SVGで使いたい機能をSVGで書いて、canvasに貼り付けるというアプローチが考えられます。 素材はillustratorでつくって、Canvasでペタペタ貼