聴く耳を持たない(片方しか)聴く耳を持たない(片方しか)読者になる聴く耳を持たない(片方しか)この広告は、90日以上更新していないブログに表示しています。2015への参加記事です。id:rikuo)が担当します。デジパ株式会社」を投稿されています。Calendarはまだまだ空きもあるので、気軽にご参加ください。alt="代替テキスト">このようにimg要素やCSSのbackground-imageなどで使えます。GIF画像など)と同様に代替テキストが表示されるだけで、SVGだからといって特別変わった挙動をするわけではありません。SVGは画像ファイルという側面もありますが、実態はXMLを基盤にした画像記述言語ですから、HTML5では直接HTML内に記述するインラインSVGが使えます。GIF画像などとは異なりSVG独特の利用方法です。そんなインラインSVGをSVG未対応の古いブラウザではどのように扱うのか?といったところをこの記事ではまとめてみました。......なぜなら、img要素のようにシンプルな挙動では無いんですよね。手元にあるSVG未対応のこれらの環境で検証しました。Explorer8は実機で試せる環境が無かったためにIE11の開発ツールのエミュレータと一応、参考としてWindows98SEのIE6でも動作の確認を行っています。SVG未対応の環境として最も多くの割合を占めていたIE8については来年1月にサポート終了が決定しています。今回のノウハウはあまり役に立たないのですが、良い機会なのでここでまとめておこうと思った次第です。簡易目次ほとんどの要素は描画されないテキストノードは描画されるtitle要素は「HTMLのtitle要素」として扱われるa要素は「HTMLのa要素」として扱われるimage要素は「HTMLのimg要素」として扱われるforeignObject要素とはstyle要素、script要素の扱いまとめほとんどの要素は描画されないSVG*1の仕様では80の要素が規定されています。その内の71の要素についてはSVG未対応ブラウザでは何も表示されません。vkernSVG未対応の環境ですから表示されないの当然ですし、以降で紹介する他の要素とは異なり中途半端に表示されないのである意味扱いやすいとも言えます。テキストノードは描画されるdesc要素、metadata要素、text要素*3などの要素で記述されたテキストノードはSVG未対応ブラウザではそのまま表示されます。Explorer11でのスクリーンショット)(開発ツールによるIE8のエミュレーション)特にdesc要素やmetadata要素はSVGに対応した環境であれば表示されない要素のため、意図しない情報が画面に現れてしまうことになります。title要素は「HTMLのtitle要素」として扱われるtitle要素もテキストノードなのですが、この場合はHTMLの同名のtitle要素として扱われます。このように、HTMLのtitle要素をわざと記述しない場合の挙動が分かりやすいでしょう。Explorer11でのスクリーンショット)(開発ツールによるIE8のエミュレーション)ブラウザのタイトル部分に、インラインSVG内の「title要素の文字列」が表示されているのが確認できます。通常であればHTMLのtitle要素が記述されているはずなので、その場合は重複したHTMLのtitle要素として扱われ、無視されます。a要素は「HTMLのa要素」として扱われるa要素もHTMLで同名のa要素として扱われます。SVGに未対応な環境ではXLink名前空間宣言を扱えないため、リンク先へ移動することはできませんがHTMLのa要素へ書いたスタイルシートが適用されます。Explorer11でのスクリーンショット)(開発ツールによるIE8のエミュレーション)image要素は「HTMLのimg要素」として扱われるimage要素は画像ファイルなどを表示できるSVGの要素ですが、これをSVG未対応のブラウザはimg要素として扱います。red;}デモページ前述の通りXLink名前空間接頭辞をSVG未対応の環境では適切に扱えないため、img要素として扱われたimage要素はそのままでは画像を表示できません。Explorer11でのスクリーンショット)(開発ツールによるIE8のエミュレーション)xlink:hrefで指定した画像は表示されていませんが、img要素へ設定したCSSが適用されているのが分かります。この挙動は他の要素と大きく異なるため厄介ではありますが、これを敢えて利用したfallbackもあります。height="150"/></svg>デモページSVGに対応したブラウザならSVGファイルが表示され、またSVG未対応のブラウザだとimg要素として扱いsrc属性のフォールバック画像を表示する仕組みです。Android2.3.xではSVG要素にborderが設定してあるとこのようになります。実際の使用例としてはニューヨークタイムズでこの手法を使ってフォールバックを行っています。規定されていませんからvalidではなくなるものの、SVG未対応のブラウザではalt属性もきちんと機能するため実用的な手法ではあります。foreignObject要素とはforeignObject要素はSVG以外の名前空間のものを含められます。具体的には例えばp要素やspan要素などHTMLの要素をforeignObject要素内では記述できます。height="75"><p>HTMLのp要素の文字列。このように長い文章の場合も折り返して表示されます。</p></foreignObject></svg>デモページSVG未対応のブラウザの場合は、foreignObject要素自体は描画されませんが子要素はそのまま表示されます。(Chrome46でのスクリーンショット*4)(開発ツールによるIE8のエミュレーション)そこでこれを利用したフォールバックの手法もあります。display="none"><p>フォールバックの文字列</p></foreignObject></svg>これはSVGに対応したブラウザではpath要素などの図形を表示して、display=noneなforeignObject要素を含む子要素も表示しないSVGに未対応なブラウザはpath要素などは表示できず、foreignObject要素も表示しないが子要素は表示するという動作になります。to-Rstyle要素、script要素の扱いインラインSVG内で記述されたstyle要素、script要素は、SVG未対応ブラウザではそれぞれHTMLの要素として扱われます。HTMLの要素と共通のCSSというのは少ないため、これによる不具合はあまり無いと思うのですが、一応頭の片隅にでも気に留めておくと良いでしょう。まとめ以上、SVG未対応のブラウザでのインラインSVGの挙動についてまとめてみました。同じSVG未対応の環境でも各ブラウザによってボックスモデルの差異などはあるものの、基本的にはほとんど変わらない動作をしています。インラインSVGが全て表示されない、というのならばまだ良いのですが、desc要素などSVG対応のブラウザでは表示されないはずの要素が画面に出てしまうのは戸惑いやすい部分ではあります。最初にも書きましたが、現在SVGに対応した環境は9割近く普及しており、そして来年1月にはIE8のサポート終了も決まっています。それを鑑みるとこうした知識やノウハウは徐々に必要なくなってきそうですね。2014の第23日目の参加記事です。2014の参加記事です。3はてなブログをはじめよう!rikuoさんは、はてなブログを使っています。ブログを報告する引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。