第1回はSVGの基礎知識を、第2回と第3回でIE9がサポートする範囲(予定含む)を中心にSVGの書き方を解説しました。最終回となる今回はSVGを実際に活用していく上でのノウハウを解説したいと思います。
HTMLなページへのSVGの埋め込みテクニック
第1回で解説しましたが、SVGは画像フォーマットでもあり、InkScapeなどのグラフィカルなインターフェースを持ったアプリケーションで作成することができます。そのsvgファイルをページに読み込むにはobjectタグを使う方法が一般的です。しかし、この方法ではobjectタグはiframeのように親ページと子ページで独立したDOMを構築するため、SVGを動的に扱いたい場合には適しません。そういった場合、svgファイルをXMLHttpRequestで読み込む方法がオススメです。
まずはシンプルにresponseXMLを使う方法です。この方法はFirefox, Opera, Safari, Chromeなどで動作します。残念ながらIE9 Platform Preview 3(以降、IE 9 pp3)では動作しませんが、正式版がリリースされるまでに対応する可能性は高いと思われます。
responseXMLの代わりにDOMParserを利用する方法もあります。DOMParserが文字列をDOMに変換する処理を担います。XMLHttpRequest以外をソースにすることもできますし、変換前に文字列の状態で手を入れるといったことも可能です。ただし、IE 9 pp3ではDOMParserが定義されていないためこの方法は動作しません。DOMParserは元々Firefoxの独自拡張であり2010年7月時点で標準化はされていないため、将来的な対応には不安があります。
これ以外に、OperaとFirefoxがサポートしているdocument.load(DOM Level 3 Load and Saveより)や、XSLTProcessor(IEの場合MSXML2.XSLTemplate)などを使う方法もありますが、今回は省略します。
現時点では、次のようにIE 9以外はresponseXML、IE 9はresponseTextをinnerHTMLに入れる方法が有効です。なお、IE 9 pp3はXMLHttpRequestのonloadにも対応していないため、代わりにonreadystatechangeを使う必要があります。
グラフの作成
この連載のまとめとして、SVGを使った折れ線グラフを描いてみます。データは気象庁 | 観測開始からの毎月の値より、東京の一日あたりの平均気温の月平均値の過去135年分を用います。
まずはシンプルにpolylineを使って描いてみます。
ここでのポイントはviewBoxで1つの値を何ピクセル相当にするか調整している点です。グラフの表示エリアを幅450px、高さ120pxとして、viewBoxを150px、40pxにしてあるので、実際には3倍に拡大されて描画されることになります。
このままでは情報が少ないので補助線などを追加してみます。
グラフの領域をクリックしたときにSVGの親要素のサイズを画面に合わせて拡大するようにしました。svg要素はデフォルトで親要素いっぱいに表示を広げるため、グラフも拡大されることになります。
さらに、ラベルを追加してみます。なお、最小フォントサイズの関係でviewBoxを大きめにするように変更を加えています。
さらに、マウスの位置に合わせてその年をハイライトしつつ値を表示してみます。
ここで、やや複雑な処理が登場しました。ここでやろうとしていることは「マウス座標から現在の年を取得すること」なのですが、マウスの座標とSVG上の(viewBoxの影響などを受けた)座標があるため、単純に現在の年を取得することができません。
そこで、getScreenCTMを使ってマウス座標とSVG上での座標の違いを修正します。getScreenCTMで取得するマトリックスは、aとdが倍率、bとcが傾き、eとfが移動量を表します。
なお、IE 9 pp3ではマウス座標を親要素の位置で修正する必要があったため、IE 9 pp3用の処理を入れています。
最後にグラフに簡単なアニメーションを追加してみます。
折角なので、上記とほぼ同じようなグラフを描くRaphael用のコードも用意しました。
まとめ
SVGの基礎知識から具体的な書き方までざっくりと解説してみましたがいかがでしたでしょうか? SVGはスマートフォンや、PC向けでもRaphaelを用いることで、今から使える技術の1つです。是非この機会にSVGを役立てて頂ければ幸いです。短い間でしたが、ありがとうございました。