とても基本的なことでありますが
「svg と canvas はどう違うのか？」
について調べたことをまとめておこうと思います。

ベクター形式とラスター形式

コンピュータ上で「２次元の絵」書こうと思った場合、どのような方法が考えられるでしょうか？

ざっくり言うと、
ラスター形式は（別名ビットマップと言います）、小さな点の集合を集めて絵を描く方法です。
対して、ベクター形式は、図形の集合を集めて絵を描く方法です。

svg vs canvas performance にフォーカスした場合

ベクター形式です。

図形は dom 要素（div タグみたいなもの）です。従って、図形に対して（div 要素などと同じように）マウスクリックなどのイベントに対するコールバック処理を容易に追加することができます。

「この三角形がクリックされたら」みたいな処理は、「このタグがクリックされたら」という処理と同じような形で作成できます。このような「図形を対象としたイベント駆動型の処理」をしたいなら、svg がいいでしょう。

svg を jpg, png 画像に変換するためには、自分で変換処理を書く、又は、ライブラリを利用しなければなりません。

ラスター形式です。

図形はビットマップなので、jpg, png 画像に変換することが容易にできます。

「お絵描きアプリ」のようなものの利用者は、作成した絵を png などで保存し、作品を多数の人に見てもらいたいと思うものですので、canvas の利用が適していると言えます。

svg で得意であった、「図形を対象としたイベント駆動型の処理」を容易に作成することができません。