- ベストアンサー
外部SVGファイルを埋め込むには
XHTML 1.1文書に外部image/svg+xmlオブジェクトを埋め込む場合、仕様上は <img src="alter.svg" alt="some description" width="88" height="31" /> で良いのでしょうか? ご回答よろしくお願い致します。
- みんなの回答 (3)
- 専門家の回答
質問者が選んだベストアンサー
SVGは、jpgやgif、pngと同じ画像フォーマットですので、 <img src="alter.svg">でも、対応しているブラウザであれば表示できると思いますが、 古いブラウザが<img src="alter.png">としても表示できないのと同様に、対応していないブラウザでは表示できないと思います。 現状では<object>が良いのではないでしょうか。 多くのSVG対応ブラウザ、またはプラグイン使用で表示できますし、XHTMLでvalidです。 <object type="image/svg+xml" data="alter.svg" classid="clsid:377B5106-3B4E-4A2D-8520-8767590CAC86"> <img src="alter.png" alt="some description" /> </object> ただしNetscape4.xは、type属性があると<object>と代替要素(この場合は<img>)の両方を表示してしまうというバグがあるらしいです。 今では世界的にも利用者数、数百人らしいブラウザですが、、、 HTML4.01/XHTMLにinvalidですが、 <object>未対応<embed>対応ブラウザにも対応させるには、embedを使うのがいいと思います。 <object> <embed> <noembed><img></noembed> </object> (いろいろ省略)
その他の回答 (2)
imgが使えるので在れば大きさ指定の属性は使えるでしょう。 <img src="" alt="" title="" width="" height=""> と・・・
お礼
あ、申し訳ありません。 私が質問したのはobjectのwidthとheightについてでした。 しかし、Google Chromeがimg要素+SVGをサポートしているようなのでimgで行きたいと思います。ご回答ありがとうございました。
SVGファイルは扱った事が無いのですが。 http://www.techscore.com/tech/RichClient/svg/1.html 参考に成るかは不明ですが・・・
お礼
IEではembed, Firefoxではiframeと書いてありますね。 しかし、両方ともXHTML 1.1では定義されていない要素だと思いました。 私もimg要素ではpngくらいしか指定したことがありません。 NEXTindexでもSVGは話題に上ってないですね。 http://www.nextindex.net/web/XHTML11/img.html miya2000氏はimg要素でSVGを参照しているようです。 http://twitter.com/miya2000/statuses/883106605 Opera 9.5がサポートしていることを考えれば、仕様上も大丈夫なのでしょうか。 ウィキペディア日本語版での使用例も発見しました: http://ja.wikipedia.org/w/index.php?title=BB%E3%82%B3%E3%83%BC%E3%83%89&oldid=19654278 次のPDF文書の末尾にも、img要素による指定の例が出されています。 http://www.sec.co.jp/rd/svg/xmlpress2svg.pdf そもそも、img要素の目的は画像の埋め込みですから、そこにSVGファイルを指定してはいけない理由というのは無いのかもしれません。 つまり、(多くのブラウザは対応していないものの) 仕様上は問題ないということでしょう。 一応納得しました。ご回答有難うございました。
補足
ご回答有り難うございます。 ブラウザのことを考慮するならば、objectが最も良い選択のようですね。 しかし、widthとheightを指定して画像を拡縮することもできるのでしょうか?