描画

SVGを使用してマンデルブロを描画してみました。
Canvasで点を描画する場合とSVGで点を描画する場合の比較のために作成したもので実用性はない。
Canvasを使用してマンデルブロを描画してみました。 下図は、複素座標(-1.33,-1)-(1.33,1)の範囲を320*240ピクセルの大きさで最大反復回数64回でJavascriptにより描画しています。 素のSVGには点を描画する関数が無いので1ピクセルの大きさの四角形で代用しています。 320*240ピクセルの点を1ピクセルの大きさの長方形で表現しているので、約77万個のrectエレメントが作成される。
IE11(64bit)で使用メモリーを見たところ82,796kbyteも消費していた。Canvasの場合36,504kbyteである。
右クリックでSVG形式で保存すると6Mbyte近くになる。
24bitカラーで無圧縮の場合320*240*3byte=225kbyteであり、png形式で保存すると約17kbyteとなる。
IEの場合、Canvasに比べて10倍ほどの速度差が発生する。
SVGで描画しているが、点で描画しているので拡大するとCanvasと同じようにギザギザに見える。


CPUWindowsブラウザ実行速度
Intel(R) Celeron(R) CPU G3900 @ 2.80GHzWindows 10 Edge 25.10586.0.0(64bit) 310ms
Intel(R) Celeron(R) CPU G3900 @ 2.80GHzWindows 10 Chrome 58.0.3029.96(64bit) 70ms
Intel(R) Celeron(R) CPU G3900 @ 2.80GHzWindows 10 Firefox 53.0(32bit) 162ms

ソースコード

本ページからSVGによるマンデルブロ描画にかかわる部分のみを抽出したhtmlのソースコードを以下に示します。
htmlのソースコードは本ページの最後のリンクよりダウンロードすることができます。