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

SVGをimg要素で

2010年9月10日
フロントエンド・エンジニア 渡邉

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が加わったことで、またひとつ、レンダリングエンジン間の足並みが揃ったといえるのではないでしょうか。