How to create SVG using DOM


	イントロダクション

ドキュメントオブジェクトモデル (DOM) は、XMLドキュメントのためのAPIです。これはドキュメントの論理構造と、ドキュメントがアクセスされ操作されるための方法を定義するものです。このペーパーでは、SVGドキュメントを、DOM APIを用いて生成する方法を示します。


	まずはじめに

DOM APIでは、DOM実装のブートストラップを表すDOMImplementation と呼ばれるインターフェースを定義しています。このクラスの役割は、Documentを生成するメソッドを提供することで、特定のDOMの実装をブートストラップすることです。そして、具体的な Document がXMLドキュメントを表し、またElement、Attr あるいはXMLの内容といった様々なDOMオブジェクトのファクトリのように動作します。

How to get an instance of the DOMImplementation インターフェースのインスタンスを取得する方法は、あなたが使用しているDOMの実装によります。Batikでは、DOM実装はパッケージ org.apache.batik.dom.svg にあり、そのクラスの名前は SVGDOMImplementationです。以下の例では、具体的なDOMImplementation オブジェクトを取得する方法を示しています。


	import org.w3c.dom.DOMImplementation; import org.apache.batik.dom.svg.SVGDOMImplementation; DOMImplementation impl = SVGDOMImplementation.getDOMImplementation();

DOMImplementationのインスタンスを取得したら、あなたは誰の独自のコードにも依存することなくDOM APIを使用することが出来ます。


	Documentの生成

DOMImplementationを使えば、あなたはDocumentを生成することが出来ます。以下の例では、SVGドキュメントを生成する方法を示します。参考までに、Batikのドキュメントオブジェクトモデルの実装は、SVGドキュメントフラグメントも任意のXMLドキュメントも表すことが出来ます。以下のコードは具体的なDocumentオブジェクトを、DOMImplementationを用いて取得する方法を示します。ネームスペースURIとSVGのルート要素のローカルネームを選択することによって、我々はSVGドキュメントを生成しているのだということに注意してください。

import org.apache.batik.dom.svg.SVGDOMImplementation;
import org.w3c.dom.Document;

DOMImplementation impl = SVGDOMImplementation.getDOMImplementation();
// SVGDOMImplementationで利用できる定数を利用していますが
// "http://www.w3.org/2000/svg" を使うことも出来ます
String svgNS = SVGDOMImplementation.SVG_NAMESPACE_URI;
Document doc = impl.createDocument(svgNS, "svg", null);

SVGの Documentを生成したので、我々はこのドキュメントを必要に応じてSVGDocument (org.w3c.dom.svg パッケージで定義されています) にキャストする事も出来ます。


	SVG Documentのビルド

最後に、Document オブジェクトを用いて、SVGコンテンツを構築することが出来ます。さきほど生成したドキュメントは、一般的なXMLとSVGのどちらもサポートするのだということに注意してください。BatikのDOMの実装がSVG DOMの実装であるとはいえ、 SVG部分は完全に実装されたものではないので、DOM レベル2 コア機能だけが利用されるべきです。以下の例では、(400, 500)のSVGキャンバス上に、(10, 20)から、サイズ(100, 50)で配置された、赤い矩形を生成する方法を示しています。

import org.apache.batik.dom.svg.SVGDOMImplementation;
import org.w3c.dom.Document;
import org.w3c.dom.Element;

DOMImplementation impl = SVGDOMImplementation.getDOMImplementation();
String svgNS = SVGDOMImplementation.SVG_NAMESPACE_URI;
Document doc = impl.createDocument(svgNS, "svg", null);

// ルート要素の取得 (svg 要素)
Element svgRoot = doc.getDocumentElement();

// ルートsvg要素に属性widthとheightを設定
svgRoot.setAttributeNS(null, "width", "400");
svgRoot.setAttributeNS(null, "height", "450");

// 矩形の生成
Element rectangle = doc.createElementNS(svgNS, "rect");
rectangle.setAttributeNS(null, "x", "10");
rectangle.setAttributeNS(null, "y", "20");
rectangle.setAttributeNS(null, "width", "100");
rectangle.setAttributeNS(null, "height", "50");
rectangle.setAttributeNS(null, "style", "fill:red");

// svgルート要素に矩形を追加
svgRoot.appendChild(rectangle);

この例は次のSVGに等しいものです。 The example given has the following equivalent SVG.


	<svg width="400" height="450"> <rect x="10" y="20" width="100" height="50" style="fill:red"/> </svg>


	SVG ファイルからDocumentを生成する

Batikでは、SVG DOMツリーをURIから、InputStreamから、あるいはReaderから - SAXSVGDocumentFactoryを用いて生成することも出来ます。以下の例は、SVGドキュメントを生成する方法を示しています。 Batikのドキュメントオブジェクトモデルの実装は、SVGのドキュメントフラグメントも、どんな種類のXMLも、どちらを生成するためにも利用可能なのだということに注意し以下のコードは、具体的なDocument オブジェクトを SAXSVGDocumentFactoryを用いて取得する方法を示しています。

import java.io.IOException;

import org.apache.batik.dom.svg.SAXSVGDocumentFactory;
import org.apache.batik.util.XMLResourceDescriptor;

import org.w3c.dom.Document;

try {
    String parser = XMLResourceDescriptor.getXMLParserClassName();
    SAXSVGDocumentFactory f = new SAXSVGDocumentFactory(parser);
    String uri = "http://...";
    Document doc = f.createDocument(uri);
} catch (IOException ex) {
     // ...
}

SVG Documentを生成したら、このドキュメントを必要に応じて SVGDocument (org.w3c.dom.svg パッケージで定義されています)にキャストする事も出来ます。


	SVG DOMのレンダリング

BatikではSVG DOMツリーを様々な方法で利用する方法を提供しています。あなたのSVGドキュメントをレンダリングするためにすぐに用いることができるモジュールが2つあります。

JSVGCanvas -
JSVGCanvas はSVGドキュメントを表示することが出来るswingコンポーネントです。URIあるいはSVG DOMツリーを使用して(setSVGDocument メソッドを使用して)、SVGドキュメントを指定することができます。 JSVGCanvasの詳細情報については、JSVGCanvasのチュートリアルを参照してください。
ImageTranscoder -
ImageTranscoder はURI、InputStream、あるいはSVG DOM ツリーを引数にとって、ラスターイメージ(JPEG やPNG)を生成することが出来るトランスコーダです。 TranscoderInput をSVG DOM ツリーから生成すると、あなたのSVGコンテンツをラスターイメージに変換することが出来るようになります。詳細情報についてはトランスコーダチュートリアルを参照してください。