2011年05月05日

SVG in HTML 02 ~ファイル読込表示編~

01章で述べた通りSVGの正体はXMLベースのベクター画像である．従って，テキストエディタで規約に従った記載をして拡張子を"SVG"にして保存すれば画像を作ることが可能である．棒人間を描くとか，簡単な内容であればテキストエディタで全部書いても良いが，私が目標としているようなWEBコンテンツを全部SVGで構成するとか，内容がトンでもなく複雑なことになる場合は当然専用のツールを用いて雛形となるSVGを製作した方が効率が良い．そこでSVGを吐き出せることで有名なAdobe社のIllustratorを使って…といきたいが，お金が無いので無料のInkscapeというソフトウェアを使って次のようなサンプル画像を製作した．(無駄に解像度は1920x1080)

Inkscapeが吐き出したSVGファイルをテキストエディタで開くと，いかにも人工的な書き方がされていて至る所に無駄な記載が発見できるので，そういった箇所を手作業で修正．その結果，次のようなテスト用SVGファイルが完成した．

→ テスト用SVGファイル (ソース)

このSVGファイルを"object"タグを使った昔ながらの方法で読み込ませるHTMLファイルを製作し，各主要ブラウザでの再現具合を確認してみた．

→ objectタグによるSVGファイル読込HTML (ソース)

表示できないなどの論外な現象は見られないが，IE9のみ"ぼかし"効果が再現されない．これは見栄えするWEBコンテンツを製作する上で重要な要素なので致命的といえる．相変わらずIEは困ったさんですね．

投稿者 zeratinman : 2011年05月05日 22:50