Java Solution FAQ：SVGとは何ですか？

　XMLとの連携・活用

SVGとは何ですか？

テンアートニ　中越智哉
2001/10/25

　SVGとは、Scalable Vector Graphicsの略で、その名前が示すとおり、スケーラブルなベクタ形式のグラフィックスを定義するための技術です。SVGはXMLやHTMLなどのインターネット関連の仕様を数多く策定しているW3Cによって作成された規格です。

　SVGの特徴は、以下のようなものです。

●スケーラブル
　ビットマップと違い、解像度に応じた品質で表示、印刷ができます。また、表示の拡大、縮小を行ってもドットのガタガタがでることがありません。

●オープンでスタンダードな規格
　 W3Cの手による規格ですから、特定ベンダが仕様を変えたりすることはありません。そのグラフィックスに関する仕様が、なぜXMLと関係があるのかというと、実は、このSVGは、記述形式としてXMLを採用しているのです。XMLを採用していることにより、以下のような利点があります。

プレーンテキストで記述できる
操作がしやすい(DOMなどによって生成、書き換え、読み取りができる）
XSLTなどを利用して容易に変換ができる
テキストを検索したり、選択したりすることができる

■SVGの使い道

　このSVGを、JavaによるWebアプリケーションでどのように用いたらよいのでしょうか？使い道は、いろいろあると思いますが、業務システムへの適用でまず思い付くのは、グラフなどの描画にSVGを利用するというものでしょう。これまで、JavaによるWebアプリケーションで、グラフなどを利用したいときには、Appletを使うか、サーブレットなどで画像ファイルを生成して読み込むという方法がありましたが、どちらも作成のコスト(負荷)が高く、メンテナンスも複雑になりやすいという問題がありました。前者の場合、グラフの内容を変更したい場合は、Javaのコーディングを修正する必要がありますし、後者の場合は、その修正はさらに複雑です。SVGを使うと、グラフを描画するコードを、Javaのコーディングから切り離すことができますので、そうった問題は解決できると考えられます。つまり、これはServletとJSPを用いて、ServletからHTMLのコーディングを切り離すのと似たような理屈です。

■SVGを使うための道具立て

　SVGによって記述された図形を見るには、そのためのプラグインやビューアが必要です。Webブラウザ上で、SVGを見るためには、現在のところ、Adobe SVG Viewer というプラグインが必要です。ただしこのプラグインは、Windows版とMacintosh版しか提供されていないため、そのほかのプラットフォームでSVGを見るためには、下記に挙げるようなフリーのビューアなどを入手する必要があります（これらはプラグインではないので、Webブラウザで表示することはできませんが、URLを入力して、SVGを表示させることは可能です）。

■SVGのサンプル作成から動作まで

　では、SVGを使ったサンプルを動作させてみましょう。このサンプルは、Webブラウザから値を入力して送信すると、送信内容に応じてグラフを作成するアプリケーションです。

・JSP+SVGによるグラフ作成

　XML文書に動的に値を設定する方法としては、XSLTがよく知られていますが、記法が複雑で、習熟しないとなかなか難しいのも事実です。ここでは、JSPを使って、SVG形式の文書を出力させてみましょう。

・JSPでXMLSVG形式の文書を作る

　JSPでSVG形式の文書を作るのは難しいことではありません。page directiveでMIMEタイプを適切に設定し、あとは、通常のSVG文書を記述していき、動的に値を設定したい部分があれば、そこをJSPタグで記述すればよいのです。

リスト1　パラメータ入力画面用HTML（svg_input.html）

<html>


            <head>


            <title>SVG Demo</title>


            </head>

<body>




            


            <h1>SVG Demo</h1>




            


            <form action="http://localhost/svg_demo.jsp" method="POST">




            


            <table border>


            <tr>


            <th>月</th><th>収入</th><th>支出</th>


            </tr>




            


            <tr>


            <td>１月</td>


            <td><input type="text" name="income-Jan"></td>


            <td><input type="text" name="expend-Jan"></td>


            </tr>




            


            <tr>


            <td>２月</td>


            <td><input type="text" name="income-Feb"></td>


            <td><input type="text" name="expend-Feb"></td>


            </tr>




            


            <tr>


            <td>３月</td>


            <td><input type="text" name="income-Mar"></td>


            <td><input type="text" name="expend-Mar"></td>


            </tr>




            


            <tr>


            <td>４月</td>


            <td><input type="text" name="income-Apr"></td>


            <td><input type="text" name="expend-Apr"></td>


            </tr>




            


            <tr>


            <td>５月</td>


            <td><input type="text" name="income-May"></td>


            <td><input type="text" name="expend-May"></td>


            </tr>




            


            <tr>


            <td>６月</td>


            <td><input type="text" name="income-Jun"></td>


            <td><input type="text" name="expend-Jun"></td>


            </tr>




            


            </table>




            


            <br>


            <input type="submit" value="グラフ表示">




            


            </form>




            


            </body>


            </html>

パラメータ入力画面

リスト2　SVG出力用JSP（svg_demo.jsp）

<?xml version="1.0" 

            standalone="no"?>


            <%@ page contentType="image/svg-xml;charset=Shift_JIS" 

            %>


            <svg width="640" height="480">

<desc><!-- put a description 

            here -->


            </desc>




            


            <g><!-- your graphic here -->




            


            <text x="250" y="50">SVG Created by JSP</text>




            


            <line x1="450" y1="40" x2="500" y2="40" 

            stroke="blue"/>


            <text x="510" y="45">Income</text>




            


            <line x1="450" y1="60" x2="500" y2="60" 

            stroke="red"/>


            <text x="510" y="65">Expenses</text>




            


            <line x1="50" y1="100" x2="50" y2="400" 

            stroke="black"/>


            <line x1="50" y1="400" x2="550" y2="400" 

            stroke="black"/>




            


            <text x="30" y="90">Amount</text>


            <text x="560" y="400">Month</text>




            


            <text x="100" y="420">Jan</text>


            <text x="180" y="420">Feb</text>


            <text x="260" y="420">Mar</text>


            <text x="340" y="420">Apr</text>


            <text x="420" y="420">May</text>


            <text x="500" y="420">Jun</text>




            


            <text x="20" y="150">250</text>


            <text x="20" y="200">200</text>


            <text x="20" y="250">150</text>


            <text x="20" y="300">100</text>


            <text x="20" y="350">50</text>


            <text x="20" y="400">0</text>




            


            <%


            int x0 = 100;


            int y0 = 400;


            int xs = 80;


            String[] month = {"Jan","Feb","Mar","Apr","May","Jun"};

 


            


            for(int i=0;i<5;i++) {


              int jx1 = x0+(i*80);


              int jx2 = x0+((i+1)*80);


              int income1 = (new Integer(request.getParameter("income-"+month[i 

            ]))).intValue();


              int income2 = (new   Integer(request.getParameter("income-"+month[i+1]))).intValue();


              int expend1 = (new Integer(request.getParameter("expend-"+month[i 

            ]))).intValue();


              int expend2 = (new Integer(request.getParameter("expend-"+month[i+1]))).intValue();


            %>


            <line x1="<%= jx1 %>" y1="<%= y0-income1 

            %>" x2="<%= jx2 %>" y2="<%= y0-income2 

            %>" stroke="blue"/>


            <line x1="<%= jx1 %>" y1="<%= y0-expend1 

            %>" x2="<%= jx2 %>" y2="<%= y0-expend2 

            %>" stroke="red"/>

<% } %> </g> </svg>

SVG出力画面

[参考URL]

AdobeのSVGに関するページ
 Apache XML Project Batik
IBM Alphaworks SVGView

「Java Solution FAQ」

Java Agile フォーラム新着記事

実運用の障害対応時間比較に見る、ログ管理基盤の効果 （2017/5/9）
　ログ基盤の構築方法や利用方法、実際の案件で使ったときの事例などを紹介する連載。今回は、実案件を事例とし、ログ管理基盤の有用性を、障害対応時間比較も交えて紹介
Chatwork、LINE、Netflixが進めるリアクティブシステムとは何か （2017/4/27）
　「リアクティブ」に関連する幾つかの用語について解説し、リアクティブシステムを実現するためのライブラリを紹介します
Fluentd＋Elasticsearch＋Kibanaで作るログ基盤の概要と構築方法 （2017/4/6）
　ログ基盤を実現するFluentd＋Elasticsearch＋Kibanaについて、構築方法や利用方法、実際の案件で使ったときの事例などを紹介する連載。初回は、ログ基盤の構築、利用方法について
プログラミングとビルド、Androidアプリ開発、Javaの基礎知識 （2017/4/3）
　初心者が、Java言語を使ったAndroidのスマホアプリ開発を通じてプログラミングとは何かを学ぶ連載。初回は、プログラミングとビルド、Androidアプリ開発、Javaに関する基礎知識を解説する。

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

注目のテーマ

Java Agile 記事ランキング

本日月間

＠IT

注目のテーマ

Java Agile 記事ランキング

転職／派遣情報を探す

年収６００万円！エンジニア向けの求人満載。転職希望者必見

エンジニアの転職なら【転職サーチ】