吉本集の個人ブログ
Web制作の技術について書いています。たまに日記も書きます。

【SVG】いろんな方法で埋め込こんでみる

2015年2月16日 / category : svg

SVGを埋め込み方法は、何種類かあります。
早速、埋め込みんでみます。

基本的に、サポートブラウザは次の通りです。

■サポートブラウザ
IE9~ / Chrome1.0 / Firefox1.5~ / Safari3.0.4~
Android3.0~ / Firefox Mobile1.0~ / Safari Mobile3.0.4~
※IE Phoneは未サポート

SVGタグを使用する

HTML
<svg width="100" height="105">
<rect width="100" height="105" fill="#e5000d" />
</svg>

SVGタグについては、後の記事で詳しく解説していきたいと思います。
SVG非対応ブラウザ用に代替画像を表示する方法として、foreignObjectタグを使用することができる

HTML
<svg width="100" height="105">
<rect width="100" height="105" fill="#e5000d" />
<foreignObject display="none"><img src="logo.png"/></foreignObject>
</svg>

背景画像として埋め込む(CSS)

CSS
background: url(logo.svg) left top no-repeat;

CSSでの非対応ブラウザの代替画像の表示方法は、クラス分岐とかでいけそうな感じ。

objectタグを使用する



HTML
<object type="image/svg+xml" width="100" height="105" data="logo.svg"></object>

objectタグで埋め込むと、SVG非対応ブラウザ用に代替画像を設定することができます。

HTML
<object type="image/svg+xml" width="100" height="105" data="logo.svg">
<img src="logo.png" width="100" height="105" />
</object>

という記事を見つけたのですが、、、、私のIE8では表示されませんでした、、、なぜ?

embedタグを使用する

HTML
<embed type="image/svg+xml" width="100" height="105" src="logo.svg"></embed>

SVG非対応ブラウザ用の代替画像の表示方法をどうしよう。

iframeタグを使用する

HTML
<iframe src="logo.svg" width="100" height="105"></iframe>

SVG非対応ブラウザ用の代替画像の表示方法をどうしよう。

imgタグを使用する

HTML
<img src="logo.svg" width="100" height="105" />

SVG非対応ブラウザ用の代替画像の表示方法をどうしよう。

いくつかの埋め込みを実際に試してみて、次のことが気になった。

1.ハイパーリンクの設定
2.スクリプトの制御問題
3.SVG非対応ブラウザ用の代替画像の設定
4.アニメーション動作

「1.ハイパーリンクの設定」「2.スクリプトの制御問題」に関しては、次の記事で検証してみる。

「3.SVG非対応ブラウザ用の代替画像の設定」
これについては埋め込み方法を調べながら同時に調べてみたが、設定が用意されているのはSVGタグのforeignObjectタグのみ。
objectタグに関しては、imgタグを用意することで対応できると書いてあったが、私のブラウザで表示されず・・・。
その他のCSS、embed、iframe、imgはどうしよう・・・という感じです。

「4.アニメーション動作」に関しては、後々検証してみます。

色々な記事を読むと、objectタグでの埋め込みが良い感じですが、
いまのところ、私の中ではsvgタグが優勢です。