Batik

リンク

• 本家

• Image Transcoder Tutorial

• Apache batikによるSVG→PNG/JPEGへの変換方法

• How can I change the color model of an SVG image from RGB to CMYK and vice versa?

• Color management, CMYK, etc.

使い方

ここでは、SVGファイル（あるいはSVGのJava文字列）を読み込み、画像(PNG等）データを出力する方法について調べてみる。 可能であれば、SVGのDOMを操作し、例えば特定の要素の色を変更したあとで画像を出力する。

必要なものと簡単なプログラム

ここではMavenやIvyでの依存解決は行わない。

• batik-1.7.zipをダウンロードし、そのlibフォルダの中のjarをすべてとりこむ。
  依存関係図はhttp://xmlgraphics.apache.org/batik/install.htmlにあるが、これは古い模様。

• http://xml.apache.org/commons/の「XML Commons External 1.4.01 - zip」をダウンロードし、その中のxml-apis.jar、xml-apis-ext.jarをとりこむ。

あとは、http://xmlgraphics.apache.org/batik/using/transcoder.htmlのサンプル通りのプログラムを書けば動作する。

変換パラメータの設定

サンプルはJPEGへの変換の場合だが（JPEGTranscoder)、このほかにPNGTranscoderとTIFFTranscoderがある。 また、各トランスコーダで共通のものと固有のパラメータ設定がある。以下のドキュメントに記述がある。

• http://xmlgraphics.apache.org/batik/javadoc/org/apache/batik/transcoder/image/JPEGTranscoder.html

• http://xmlgraphics.apache.org/batik/javadoc/org/apache/batik/transcoder/image/PNGTranscoder.html

• http://xmlgraphics.apache.org/batik/javadoc/org/apache/batik/transcoder/image/TIFFTranscoder.html

共通のパラメータについては、例えばこれらの上位クラスである

• http://xmlgraphics.apache.org/batik/javadoc/org/apache/batik/transcoder/SVGAbstractTranscoder.html

に記述がある。例えば、PNG生成時にイメージの幅を60にするには、

    PNGTranscoder t = new PNGTranscoder();
    t.addTranscodingHint(SVGAbstractTranscoder.KEY_WIDTH, new Float(60));

などとする。

SVGの操作

上記ではファイル等からSVGを読み込み、それをそのまま画像にしていたが、読み込んだSVGに何らかの操作を施してから画像を作成したい。 以下のようにする。

    // ファイルを読み込み、Documentを作成する
    String parser = XMLResourceDescriptor.getXMLParserClassName();
    SAXSVGDocumentFactory f = new SAXSVGDocumentFactory(parser);
    Document doc = f.createDocument(new File("some.svg").toURI().toString());

    // Documentに対する操作を行う

    // Documentを指定してTranscoderInputを作成する
    JPEGTranscoder t = new JPEGTranscoder();
    t.addTranscodingHint(JPEGTranscoder.KEY_QUALITY, new Float(.8));     
    t.addTranscodingHint(SVGAbstractTranscoder.KEY_WIDTH, new Float(60));
    TranscoderInput input = new TranscoderInput(doc);

クリッピング

これはDOM操作の範疇だが、SVGの一部にクリッピングして画像を生成するには、例えば以下のような操作を行う。

    Node node = doc.getChildNodes().item(0);
    SVGOMSVGElement svg = (SVGOMSVGElement)node;
    svg.setAttribute("viewBox", "0, 0, 25, 25");