Smart Communication Design Company
ホーム > ナレッジ > Blog > Web標準Blog > 2010年9月 > SVGをimg要素で

Web標準Blog

Web標準Blogでは、Web標準の利用に興味のあるWebサイト管理者、Webデザイナーの方向けに、Web標準を利用するための手法やノウハウ、参考になるリソース等を、国内外を問わずご紹介します。

2010年9月10日

SVGをimg要素で

フロントエンド・エンジニア 渡邉

IE9が(ある程度までの)実装を決め、昨今注目を集めつつあるSVG。Gecko(Firefoxなど)でも、レンダリングそのものは以前よりサポートされてきました。

しかし、Geckoでは外部SVGファイルをimg要素を使って参照することはできませんでした。次のマークアップ断片のようにSVGファイルを参照しようとしても、レンダリングされなかったのです:

<p><img src="foobar.svg" alt="Foo Bar" /></p>

そのため、object要素やiframe要素を使って参照する必要がありました。

この問題はBug 276431として解決が図られてきました。また、HTML5仕様のimg要素src属性値定義では、Noteとして(スクリプトを含まない)SVGを参照できることが明記されました。

そしてつい先日、パッチが適用されました。このまま何事もなければFirefox 4(Gecko 2.0)以降から利用できるようになります。

外部SVGファイルのimg要素による参照は、以前よりWebKit(Safari・Chromeなど)とPresto(Opera)ではサポートされていましたし、IE9でもサポートされています。これらにGeckoが加わったことで、またひとつ、レンダリングエンジン間の足並みが揃ったといえるのではないでしょうか。