ただし,SVG 部分までスクロールするとかなり重くなり,なかなか表示されない. 特に,タブを切り替えてまた戻ってくるときにもしばらく待たされる. さらに,関係ないタブまで表示が遅くなったりする. Chrome 一度描画されれば,SVG 部分も Firefox の場合ほどは重くない. Microsoft Edge 複数回再読込したあげく,表示に失敗した. なお,SVG 描画を無効にして読み込むと,canvas 部分は正しく描画される. 結論 canvas はビットマップベース,SVG はベクターベースという違いはあるため,単純には比較はできないものの(SVG のほうが,見た目は高精細になる) 10 万本もの直線を描画する必要がある場合は,SVG を用いると処理が重くなりすぎるため,canvas を使ったほうがよさそうである. コード 以下のコードを実行すると, <!DOCTYPE html>