SVG

SVGはXML中の2Dグラフィックスを表現する言語です．SVGもMathMLと同じようにW3Cが公式に推薦しています( http://www.w3.org/Graphics/SVG/)．SVGはwebMathematica のユーザに数多くの利点を提供します．まず，ベクトルベースのフォーマットなので結果が一般的な画像形式によるよりも高品質であることがしばしばあります．これは，印刷を考慮した際に特に重要な点です．次に，いろいろなタイプの画像で，実際のファイルサイズが特にイメージフォーマットに比べて小さくなります．さらに，SVGは数多くの動的・インタラクティブな機能をサポートします．Mathematica はグラフィックスからSVGを生成することができます．このセクションではSVGを使ったWebの使い方の例を見てみます．このセクションの例題を見るためにはSVGをサポートするブラウザを使う必要があります．これにはネイティブサポートを提供するAmayaブラウザ(http://www.w3.org/Amaya/)を使うか，あるいはAdobeのプラグイン(http://www.adobe.com/svg)を使うとよいでしょう．

webMathematica には，Adobeのプラグインに接続するために必要なタグを加えるサポートをするユーティリティパッケージが付いています．このセクションではwebMathematica でのこのパッケージの使い方についても簡単な例題で説明します．

SVGを使ったプロット

この例題のソースはwebMathematica/Examples/SVG/Plot.jspにあります．これは基本的な例題Plot.jspに大変よく似ています．前述のようにwebMathematica をインストールするとhttp://localhost:8080/webMathematica/Examples/SVG/Plot.jspでこのJSPに接続することができます（ご自分のサーバに接続するURLはこれとは多少異なる場合もあります）．

以下はソースからの抜粋です．

<form action="Plot.jsp" method="post">
<msp:allocateKernel>
<msp:evaluate>
   Get["MSP`SVG`"];
</msp:evaluate>
Enter a function:
<input type="text" name="fun" size="24" value =
"<msp:evaluate> MSPValue[ $$fun, "Sin[x]^2"] </msp:evaluate> "
>
Enter a number:
<input type="text" name="x1" size="24" value =
"<msp:evaluate> MSPValue[ $$x1, "10"] </msp:evaluate> ">
<br>
<br>
<msp:evaluate>
   MSPBlock[ {$$fun, $$x1},
      SVGShow[ Plot[$$fun, {x, 0, $$x1}]]]
</msp:evaluate>
<hr>
<input type="submit" name="btnSubmit" value="Evaluate">
</msp:allocateKernel>
</form>

これは基本的な例題Plot.jspに非常に似ています．違いは，こちらではSVGのサポートパッケージがロードされており，SVGのプロット関数SVGShowが使われている点です．これがうまくできたなら，Adobeのプラグインが提供する機能を使ってみたいと思われるでしょう．

SVGアニメーション

SVGは多くのアニメーションとインタラクション機能をサポートしています．この例ではSVGのアニメーションの使い方を見てみましょう．

この例題のソースはwebMathematica/Examples/SVG/NDSolvePlot.jspにあります．前述のようにwebMathematica をインストールするとhttp://localhost:8080/webMathematica/Examples/SVG/NDSolvePlot.jspでこのJSPに接続することができます（ご自分のサーバに接続するURLはこれとは多少異なる場合もあります）．

ソースには方程式，始点と終点，初期条件を集めるたくさんの入力フィールドを設定するHTMLフォームが含まれています．これらは，微分方程式を解き結果をSVGでフォーマットしたプロットにして返す関数にフィードされます．このSVGは関数SVGDisplayを使って表示されます．SVGDisplayはパッケージMSP`SVG`で定義されています．以下はプロットを挿入するコードです．

<msp:evaluate>
   MSPBlock[ {$$eqn, $$t0, $$init1, $$init2, $$t1},
      svg = NDSolveToSVG[ $$eqn, {$$init1, $$init2}, {$$t0, $$t1}] ;
      SVGDisplay[ svg, {400, 300}]]
</msp:evaluate>

SVGを作る関数の実際の定義は下記をご覧ください．これは微分方程式を解き結果をプロットし，それから関数XML`SVG`GraphicsToSymbolicSVGを使って結果のSVGを表すシンボリックXMLを生成します．次に，結果のプロットを表す点を求め，これらの点を使ってこれらの点上を動く赤いボールのSVGのアニメーションを作ります．このアニメーションがSVGに挿入され新しい結果を形成し，プロットされます．

NDSolveToSVG[ eqn_, init_, lims_List]:=
   Module[ {sol, dep, t, int, t0, t1},
      {o, dep, t} = EquationToVariables[ eqn] ;
      {t0, t1} = lims ;
      sol=NDSolve[Append[init, eqn], dep, {t, t0, t1}];
      {int0, int1} = Part[dep /. First[ sol], 1, 1];
      If[ t0 < int0, t0 = int0];
      If[ t1 > int1, t1 = int1];
      p=ParametricPlot[ {dep[t], dep'[t]} /. sol, {t, t0, t1}, ImageSize -> 400];
      xml = XML`SVG`GraphicsToSymbolicSVG[p];
      pts="M"<>
            First[Cases[ xml,
         XMLElement["polyline", {"fill" -> _, "points" -> x_}, _]->x, Infinity]];
      newElem=XMLElement["circle",
            {"cx"->"0", "cy"->"0", "r"->".1", "fill"->"red", "stroke"->"blue",
         "stroke-width"->"0.01"},
      {XMLElement[
      "animateMotion", {"dur"->"6s", "repeatCount"->"indefinite",
      "rotate"->"auto", "path" -> pts}, {}]}];
      newXML=xml/.x:XMLElement["polyline", ___] -> Sequence[x, newElem] ;
      ExportString[newXML, "XML"]
   ]

SVGを使ってインタラクティブな結果を得る方法は他にもたくさんあります．例えば，JavaScriptはSVGツリーとインタラクトしこれを操作して，マウスがグラフィック上に来たときにポップアップするようなインタラクティブな機能をサポートすることができます．