2012年9月27日木曜日

svgのフォールバック手法あれこれ


現状良くなってきたとは言え，svgをサポートしない環境というものはどうしても存在しているので，これらを無視して良いなら話は楽だけれど，そうじゃないケースも有ると思います．よってsvgの代替画像を用意し，場合により切り替えると言った処理を行う必要も出てくるのです．


ではどうすればいいかというと，これが中々面倒なんですね．というのもsvgを表示する方法がhtml5では
  • インラインsvg
  • iframe/object/embed要素
  • image要素
  • input[type=image]
  • background-image
 とこんなにもあるので，状況によって使い分ける必要があるのです．以下にそれぞれのパターンについてのフォールバック手法について考えてみましょう．
※但しここで考察する内容はあくまで実装を促すためのヒントであって，それほど検証はしていません．詳しい動作検証は各自で行なって下さい．

インラインsvgの場合・・・foreignObject要素を用いる


インラインsvgを使った場合はforeignObject要素を用いる方法があります．htmlにsvgを埋め込んだ後，そのsvgの配下にforeignObject要素を定義し，この中にフォールバック先のimg要素を設定しておきます．このままだとimg要素が表示されてしまうのでforeignObject要素にはdisplay="none"を設定し非表示としておきます．
svgの表示に対応しないブラウザではsvgに関わる要素が無視されるので直接img要素が表示されます．例を示します．
<!DOCTYPE html>
<html>
    <body>
        <svg>
            <foreignObject display="none">
                <img src="img.png"/>
            </foreignObject>
        </svg>
    </body>
</html>
※ie8とandroid2で動作を確認
※但し，svgが表示可能にもかかわらずフォールバック画像が読み込まれると言った可能性もあります．

object要素の場合・・・子にimg要素を挿入


object要素のもつフォールバック機構をそのまま利用すればよいはず．つまり，svg画像を読み込んだobject要素の配下にフォールバック画像を設定したimg要素を挿入しておけば良い．

それ意外の場合・・・javascriptを用いる


中々難しいというのが正直な所ですが，javascriptが動作するのであれば，domの実装状況を確認することでブラウザがsvgをサポートしているかどうかを確認することができます．
  1. document.createElementNSの有無を調べる
    svgに対応していないレガシーieにおいては上記メソッドは未定義である．
  2. 上記メソッドを用いてSVGSVGElementオブジェクトを生成し，そのプロパティ（例えばviewBox）の有無を調べる．
    android osにおける標準ブラウザはchromeと同じくレンダリングエンジンとしてwebkitを採用しているにもかかわらず，svgの出力に対応していない． 従って先ほどのdocument.createElementNSメソッドは定義されているものの，実際にはsvgの名前空間を解釈できず，得られたオブジェクトの中身は未実装となる．
この方法を使ってsvgをサポートしなければ画像の参照先を替えると言った処理を行います．
また，このような機能を持ったjavascriptライブラリも存在していますので，そちらを使うのも手です．
時刻:
ラベル: , ,

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)