svgを表示する魔法なんて存在しない-SVGMagic解説

ここ最近，svg非対応のブラウザで「魔法のように」svgを表示できるjQueryプラグインなるものとしてSVGMagicを紹介しているサイトが見受けられますが，ちょっと待ってくださいよっと．
その動作原理を解説しないってのはフェアじゃないよという記事．
※脊髄反射で公開しているので間違いがあるかも知れません．

svg非対応な環境で”svg”を表示させる方法アレコレ

html5仕様に正式に取り込まれたsvgですが，その普及を妨げている原因としてsvgを表示できないwebブラウザが依然としてある程度のシェアを保っているということが挙げられます．ie8とかandroid2系ブラウザとか…

svgを使う上でこれらの環境を無視するというのも一つの手なんですが，そういうわけにも行かないケースもあるわけです．じゃあどうするかというと大体次の対処策が考えられます．

• 静的な方法
  • 事前ラスタライズ
    事前にsvg画像をpng画像としておき，環境によって切り替える方法．
• 動的な方法
• vmlによる擬似svgレンダリング
  jsによりsvgの内容をvmlに変換して表示する方法．（ie8+sie）
• canvas要素による擬似svgレンダリング
  jsによりsvgの内容をcanvas要素にレンダリングして表示する方法．（canvg等）
• サーバーサイドsvgラスタライズ
  svgをサーバーサイドでpng形式などに変換して内容を置き換える

何れにせよsvgをどこかで別の画像形式に変換しなければ逆立ちしたってsvgを表示することは出来ない筈なのです．

SVGMagicはサーバーサイドsvgラスタライズを行う

それではSVGMagicはどのようなことを行っているのでしょうか？
答えは簡単で，「サーバーサイドsvgラスタライズ」を行っているだけです．つまり，SVGMagic側で用意してくれているwebサーバーにてImageMagickを走らせ，svg→png変換を行っているのです．

これはライブラリ配布元で解説していることなのですが，どうにも国内ニュースサイトにおいてはそれほど気にしていないようです．しかし動作原理上様々な問題を孕んでいます．

• SVGMagicのサービスはいつまで続くのか
  開発者側で勝手にサービスを停止することが有り得る
• 第三者にsvgコードが渡ることになってしまう
  そのsvgの中に他者に渡したくない情報が含まれている可能性はないか
• e.t.c

正直なところ実運用に耐える構成ではありませんし，動作検証を行う際にも細心の注意が必要となるでしょう． こう言った危険性に言及せず単なる便利なライブラリとして情報発信してしまう態度はあまりよろしくなかろうと筆者は考えます．

ではどうすれば

これらは何れも配布元のコードをそのまま使ったことに依る問題ですから，自前でPHPサーバーを立て，そこでsvgのラスタライズ処理を行うようにするのが良いでしょう．幸いなことに開発者のgithubではクライアントサイドのjsモジュールのみならず，サーバーサイドのPHPスクリプトも公開しています．この内容を自前のサーバー向けにカスタマイズした上で導入すべきです．

そもそもSVGMagicを使う必要はあるか

こうなると，実際に利用するには中々面倒なライブラリであることがわかります．その一方でsvgを利用する度にサーバーとの通信が発生するなど必ずしも使い勝手が良いわけでもありません．アイディアとしては非常に面白いものですが，用いるsvg画像の種類が少ない内はそのメリットを享受することが出来ないでしょう．逆にwikipediaのようなsvgを多量に扱う環境では有効な手法と言えます．つまりSVGMagicが活きる環境は非常に限られている事になります．

まとめ

• svg非サポート環境でsvgを利用するには画像変換処理を行う必要がある．
• 不可能なことを可能としているからにはカラクリがある．
  表面だけ見て判断するのは危険．その危険性を無視して広めるのはもっと危険．
• SVGMagicはサーバーと通信するので，素のまま使うには問題がある．