SVG形式に対応しました

こんにちは。久しぶりの投稿となってしまいました。 Docurainに関しては順調に利用量が増えつつあり、嬉しい限りです。

この度、SVG形式の出力とSVG形式の画像の差し込みに対応しました。

Docurainでは元々、PDF / Excel / PNG / JPEG / GIF 形式での出力が可能でしたが、ここに今回SVGが加わったことになります。

一応説明しますと、SVG(Scalable Vector Graphics)は汎用的なベクターグラフィック形式で、レイヤーやラスタ画像の埋め込みなどにも対応しています。ベクター形式なので印刷や高DPI環境でもきれいな表示が可能です。XMLで定義されており、HTML上にインラインで埋め込むことも可能で、JavaScriptやCSSとの親和性も高いです。

Docurainからの出力でベクタ形式での出力ではPDFが存在しましたが、PDFは単体でダウンロードして扱うには特に問題ないものの、何か既存のシステム(Webシステム、Windowsクライアントアプリなど)と組み合わせると面倒です。帳票を出力したいというシステムでは、既存の自システム上でプレビューを表示させたいとかいう要求はよくあることでしょう。

Webブラウザ上で別ウィンドウで開くのではなくページの一部分に表示させたいといった場合は不可能ではないものの、ブラウザごとの挙動の差が大きいのである程度の試行錯誤が必要になると思われます。各種ネイティブアプリにおいても、PDF表示のためのコンポーネントを使用するか(有償のものが多い印象)、もしくはWebView的なもの(C#ならばWebBrowserコントロール)を利用することになると思われます。後者の場合はやはり試行錯誤が必要になるでしょう。

そこでSVGであればHTML上では通常の画像とほぼ同じように利用できるため、かなり扱いやすくなります。帳票としての用途だけでなく、1日単位、1時間単位などで更新される¹複雑なグラフをWebシステム上で表示したい、といった用途でも使いやすくなります。

ということで使ってみます。使うデータは前回の記事で作成したものです。

出力した結果は以下です。

おっ、余談ですがSVGな画像にCSSでshadowを落としていると要素ごとにちゃんと影が落ちるんですね。考えてみれば当たり前なのですが、初めて見たので感動しました。これを覚えていると表現の幅が広がりそうだな～と思いました。

ページを拡大表示して描画がなめらかになっていることを確認してみて下さい。

ちなみに出力ファイルサイズはPDFよりも大きくなる傾向があります。PDFの場合はテキストはそのままテキストデータ（と埋め込みフォント）として残っていますが、SVGの場合はすべての文字がパスに変換されますので。たとえば上記のガントチャートは310KBですが、PDFで出力したところ17.4KBで済みました。

続いて、SVG形式の画像の埋め込みを試してみます。

Docurainでは帳票テンプレートをExcelで、データをJSONで流し込みます。BASE64エンコードした画像をJSONに設定することで画像も動的に帳票に流し込むことができます。たとえば、何かの帳票の担当者氏名の横にそれぞれの担当者の印影を出したいとか…言われそうだよね？それ、意味あるの？って思うかも知れないけど、とりあえず言われそうだよね？そんなときでも大丈夫です。

ただ、SVG画像を動的に流し込む場合は、画像はラスタ形式に変換されます。これは、ExcelがSVGに対応していないためです。

とりあえずやってみましょう。以下のSVG画像を表示してみます。