svgをhtmlに埋め込んで使いたい

質問

htmlにsvgを埋め込んで使いたいと思っています。

使い方としては、
http://www.tenman.info/svg/mysample/test1/index.html
のように使ってみたいと思います。

svgを埋め込んだhtmlは、とても少ないように感じるのですが、

ブラウザや、環境などで、表示できないケースがあるのではないかと心配で、実行に移せません。

SVGを使う上での問題点.注意点を教えてください。
特に、「こんな場合は、表示できなくなる。」と言う点を知りたいです。

回答No.2

himajin100000 · ベストアンサー

「SVG側の問題点」ではなく,俺があまり好きではない「ブラウザ側の実装状況」とかそういう観点からになるけど。

こういう書き方(直接svg要素が登場するケース)は問題ないけど

Firefox系にとって,SVGはまだ、imageではなくobjectです。
https://bugzilla.mozilla.org/show_bug.cgi?id=231179
なのでimg要素に指定したり,CSSのbackground-imageで指定したりしても反映されません。(SafariやOperaは可能です。可能ならグラデーション背景をもっと自然に書けそうなのになあ…。)

SVGのテキスト等は選択できません
https://bugzilla.mozilla.org/show_bug.cgi?id=292498

#なお,確かXHTMLのimg要素のalt属性などによって表示されたテキスト,
:before疑似要素や:after疑似要素等にcontentプロパティなどで指定して生成した文字列も選択できません。

https://bugzilla.mozilla.org/show_bug.cgi?id=12460

#svg:foreignObject要素に指定されたXHTMLの文字列は選択できたような気がする。

#svg:g要素等のtranform属性にrotateを指定してXHTMLの要素を含んだsvg:foreginObject要素を回転させようとしたとき,Flash等、プラグインを利用してレンダリングするタイプのものは回転しなかったような気がする。

##関係ない話題も回答に含めてて,ポイント狙いとしては微妙な気がするけど関心ある話題ではあるので経験上わかっていることを書かせてもらった。

お礼

>SVGはまだ、imageではなくobject
そういう考え方した事がなかったです。ぐっっと来るいい表現だと思います

>SVGのテキスト等は選択できません
確かに、実際に、ドキュメント作って、やってみると、すごく違和感がありますね。

>関心ある話題ではあるので経験上わかっていることを書かせてもらった。

経験者ならではの回答ありがとうございます。とても興味深かったです。

回答No.3

BlurFiltan

環境 OS：Windows Vista
ブラウザ：IE7

実地検証例です。

◎まず
http://www.tenman.info/svg/mysample/test1/index.html
に行ってみました。
下記【図１】の通り文字化けで画像など見えません。

◎次に
http://www.tenman.info/svg/
に行ってみました。
下記【図２】の通り帳など見えません。

◎次にそのページに書いてある通り

> もちろんInternet ExplorerならAdobeSVGビューアを
> インストールしないと見えませんよ。

ということで，
http://www.adobe.com/jp/svg/viewer/install/
に行ってみました。
【図３】の通り Win 98 - XP 対応のようです。

－－－－－－－

もちろんなんとかすれば，見えるようになると思いますよ。
私はこういうのをなんとかするのがかなり得意な方ですから。

しかし一般の方はこれ以上しようと思わないのではないかと思います。
つまり「変な見えないページ」で終わる可能性が大きいと思います。

お礼

スクリーンショットまで撮っていただいてありがとうございます。
とても解りやすいです。

>下記【図１】の通り文字化けで画像など見えません。
確かに、Shift_JISにエンコードされて、「いまどき、文字化けかよ。」と言うぐらい悲惨ですね。
IE7で見てみると私の環境では、UTF-8でエンコードされて正常に見えたのですが、text using referenced fontというsvg部分のレイアウトが崩れていることが解り、驚きました。

>下記【図２】の通り帳など見えません。
帳？蝶ですよね:)

>【図３】の通り Win 98 - XP 対応のようです。
そのプラグインが、すごく話題を呼んでいるとか、あの、文字化けのページをどうしてもみてみたいといった強い気持ちがないと、ダウンロードなんてしない。
Win 98 - XP 対応までなら、「やめておこう。」と思うのは当然かもしれません。

>つまり「変な見えないページ」で終わる可能性が大きいと思います。

直球ですね。わかりやすく教えてくれてありがとうございます。

回答No.1

ORUKA1951

一番の問題点は、IEのみ未対応ということでしょう。
<object>を使って最初にSVG、次の候補にSVGという形でよいかも・・未調査

お礼

object要素を使うか、もう少し思い切って、iframe等で済ますか等と言う点も、考えてみたいと思います。

回答、ありがとうございました。