SVG REPORTS:svg帳票作成システム

Written by defghi1977@xbox.live. Powered by Sugar.js.

コンセプト

ベクタグラフィックのスクリーン表示にのみ注目されがちなsvgについて,印刷処理への応用を探ったものです.
web帳票を実現する場合,PDF等の印刷イメージを専用サーバーで生成する方法が多いのですが,充実したhtml5の機能を使えば同様の事が出来るはずです.
そこでcssやsvg・xmlの仕組みを駆使し,帳票出力システムとしての機能を実装して見ました.

特徴

本ツールの特徴としては次の点が挙げられます.

動作サンプル

フォームのサンプル
入力してね
項目1:
項目2:
項目3:contenteditableで編集可能なdiv要素(自動折り返しはできません.svg1.1の限界)
項目4:複数行テキスト(textAreaで実装した場合のみ有効)
画像のurlを指定:
インラインsvgをソースとする. by w3c SVG Logo SVG
qrコード:
レポートに出力…

どんなことができるの?

html5技術をベースとしているため,(がんばれば)どんな処理を行うことも可能です.外字であればwoffファイルを用意すればよく,バーコード出力も画像さえあればレポートに挿入することができます.また,svgソースの取り込みをサポートしているので,d3.jsで作成したグラフをレポートに挿入するといったことも可能です.
レポートのひな形の作成にはinkscape等のツールを用いるかsvgを手書きします.それを付属のレポートマッピングツールを介することでレポート設定を追加します.

ブラウザ互換性は?

ie10とfirefoxとchromeで動作します.
opera(presto)では動作しないようです(動作している?).safariでは基本動作はするものの,意図した通りの結果は得られません.
しかし「完璧」には動きませんし,古いバージョンで動作するかは全くわかりません.ie8以前は絶望的です.
※でも本格的にはまだ検証していないので,時々動かないバージョンになるかもしれません.(まだ)

バージョンアップとかするの?

少しずつ…ね?

ドキュメントは?

現状ソース見て!ブログ見て!
もうすこしまともなサンプルはもうちっと後で.

ライセンスは?

MITライセンスとしました.動作保証はありませんが,自由にお使いください.
その上で万が一にもお気に召しましたらこちらをポチって頂けると作者が小躍りします.