ASCIISVG-IM という選択肢
ASCIIsvgの保守が現在ない状態で、SVG を簡単に使うことは難しい。 期待していたSVGGraph も残念ながらサポートページが消えてしまっている。そこで調べてみると、 ASCIIsvg-IM という、ASCIIsvg を大幅に書き直したライブラリがあることがわかった。このライブラリが使えるかどうか、試してみた。ASCIIsvg-IM については、 ASCIIsvg-IM.js Demo and Syntax (www.intmath.com)というページがある。 IM は、上記ページの Interactive Mathematics の頭文字を取ったのだろう。
以下のグラフィクスは、 ASCIIsvg-IM を使って表示したもので、下記サンプルはすべて上記ページにある（すべてではない）。
楕円、長方形、円弧
楕円や角の丸い長方形、円弧は次のように表示できる。
軸を等距離にしたグラフ
軸を等距離にしたグラフは次のようになる。
多角形
多角形は次のようにして書ける。
ループを使ったらせんの描画
螺線（らせん）を描画するには、ループを使えばいい。
ループを使った離散グラフの描画
グラフ理論で使う離散グラフを描画するには、ループを使えばいい。
点や線分、矢
点や線分、矢を描くことができる。
ベクトル
線分や矢と似ているベクトルも描くことができる。
数直線
数直線も描くことができる。
なお、上記リンクサイトでは、アニメーションや、スライダーを使った可変パラメータによる動的表示ページのデモンストレーションがあるが、私のこのページではまだできていない。
ASCIIsvg-IM の導入方法
以下、ASCIIsvg-IM を導入する方法を示す。
まず、下記のリンク先にある JavaScript ファイルを適当なディレクトリにダウンロードする。私は js ディレクトリにダウンロードした。
- https://www.intmath.com/includes/cssjs/ASCIIsvg-IM-2020-01-14.min.js
HTML は次のようになる。
<!doctype html>
<html lang="ja">
<head>
...
<script defer src="./ASCIIsvg-IM-2020-01-14.min.js"></script>
<script>
// 今まである要素の削除
removeEle("asvgSVG");
// 関数の定義
boardID = "asvg"; // HTML では <div id="asvg"></div> などが書かれている場所
xMin=0; xMax=6; yMin=0; yMax=8;
padding = 20;
boardWidthToHeight = 1;
initBoard(boardID, xMin, xMax, yMin); // スケールを同じにするので yMax を定義しない。
doGrids = 0;
axes(2,2,"labels",2,2);
stroke = "#165a71";
strokewidth = 2;
// Create an array of points
ptsArr = [ [0,0], [3,2], [5,1], [5,6]];
id = "poly";
polygon(ptsArr,id)
</script>
<body>
<div id="asvg"></div>
</body>
</html>