• ベストアンサー

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

htmlにsvgを埋め込んで使いたいと思っています。 使い方としては、 http://www.tenman.info/svg/mysample/test1/index.html のように使ってみたいと思います。 svgを埋め込んだhtmlは、とても少ないように感じるのですが、 ブラウザや、環境などで、表示できないケースがあるのではないかと心配で、実行に移せません。 SVGを使う上での問題点.注意点を教えてください。 特に、「こんな場合は、表示できなくなる。」と言う点を知りたいです。

  • XML
  • 回答数3
  • ありがとう数8

質問者が選んだベストアンサー

  • ベストアンサー
回答No.2

「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等、プラグインを利用してレンダリングするタイプのものは回転しなかったような気がする。 ##関係ない話題も回答に含めてて,ポイント狙いとしては微妙な気がするけど関心ある話題ではあるので経験上わかっていることを書かせてもらった。

exists
質問者

お礼

>SVGはまだ、imageではなくobject そういう考え方した事がなかったです。ぐっっと来るいい表現だと思います >SVGのテキスト等は選択できません 確かに、実際に、ドキュメント作って、やってみると、すごく違和感がありますね。 >関心ある話題ではあるので経験上わかっていることを書かせてもらった。 経験者ならではの回答ありがとうございます。とても興味深かったです。

その他の回答 (2)

  • BlurFiltan
  • ベストアンサー率91% (1611/1754)
回答No.3

環境 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 対応のようです。 －－－－－－－ もちろんなんとかすれば，見えるようになると思いますよ。 私はこういうのをなんとかするのがかなり得意な方ですから。 しかし一般の方はこれ以上しようと思わないのではないかと思います。 つまり「変な見えないページ」で終わる可能性が大きいと思います。

画像を拡大する
exists
質問者

お礼

スクリーンショットまで撮っていただいてありがとうございます。 とても解りやすいです。 >下記【図１】の通り文字化けで画像など見えません。 確かに、Shift_JISにエンコードされて、「いまどき、文字化けかよ。」と言うぐらい悲惨ですね。 IE7で見てみると私の環境では、UTF-8でエンコードされて正常に見えたのですが、text using referenced fontというsvg部分のレイアウトが崩れていることが解り、驚きました。 >下記【図２】の通り帳など見えません。 帳？蝶ですよね:) >【図３】の通り Win 98 - XP 対応のようです。 そのプラグインが、すごく話題を呼んでいるとか、あの、文字化けのページをどうしてもみてみたいといった強い気持ちがないと、ダウンロードなんてしない。 Win 98 - XP 対応までなら、「やめておこう。」と思うのは当然かもしれません。 >つまり「変な見えないページ」で終わる可能性が大きいと思います。 直球ですね。わかりやすく教えてくれてありがとうございます。

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

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

exists
質問者

お礼

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

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. XML

関連するQ&A

  • SVGについて

    HTML上でベクトル画像を表示する方法ということでSVGを見つけたのですが、その概要についてお聞きしたいと思います。例えばどれだけのブラウザがサポートしているのか、表示・製作するために特別なプラグインなどが必要ななのか、現在の普及度・・・などです。 最初はVMLを見つけて「いい！」と思ったのですが、ブラウザがIE5.5以上と非常に限定的なのがネックでした。その点SVGならかなり普及している、という情報だけ手に入ったのですが、その先が分かりません。皆様からの情報を募りたいと思います。 先に言ったようにブラウザが限定的だったり、表示にプラグインが必要なのは困ります。JavaScriptのようにほとんどのブラウザがサポートし、かつプラグイン不要で動作して欲しいのです。もしSVGがこれを満たし得ない場合、代わりとなる言語がありましたらそちらも情報をいただけると幸いです。 よろしくお願いします。

    • 締切済み
    • XML
  • ＸＨＴＭＬでのＶＭＬとＳＶＧの使い分けについて

    お世話になります。 今まで、ＨＴＭＬのＣａｎｖａｓタグを使って、ＨＰにグラフィック描画をしてきました。 ＩＥでは、Ｃａｎｖａｓがそのまま使えませんでしたので、ＥｘＣａｎｖａｓ．ｊｓ　を使って描画をしてきました。 最近、このＥｘＣａｎｖａｓ．ｊｓは、ＶＭＬを使って描画を実現している事を知りました。 さらに、最近では、標準化されたＳＶＧというＷ３Ｃの規格がある事を知りました。 ＳＶＧにより動的にＪａｖａＳｃｒｉｐｔ等で描画するサンプルが色んなＨＰに出ていましたので試してみましたが、ＩＥ８では、基本的には機能しませんでした。 「基本的には機能しなかった」というのは、Ａｄｏｂｅ等のプラグインをインストールするとＩＥ８でも問題無く、機能するようになりましたので、その様に書かせていただきました。 ただ、プラグインをインストールする事を、ＨＰを見ていただく多数の人にしていただく事はできませんので、他の方法が必要かと思っております。 一方、ＶＭＬも幾つかのＨＰでサンプルがありましたので、試してみたところ、ＩＥ８とＦｉｒｅｆｏｘでは、機能しましたが、ＯｐｅｒａやＣｒｏｍｅでは、機能しませんでした。 いろんなＨＰの解説でも、ＶＭＬは、ＩＥのみで可能な機能で、ＳＶＧは、ＩＥではネイティブにはサポートされていないと言う様な事が書かれていました。 つきましては、次の２点について、ご教示いただきたいと思い、質問させていただきました。 （１）　ＩＥでは、ＶＭＬをその他のブラウザではＳＶＧを使うように切り替えて機能を実現しようと考えておりますが、その様な考え方でよいでしょうか？ （２）　今後の流れとして、ＳＶＧは、やはりｘｍｌファイルで実現される描画ファイルのフォーマットということで、ＩＥを含めた全てのブラウザで動的に扱える機能にはならないのでしょうか？ これから、どの様に進めていこうかと、思案している次第です。 どうぞ、ご教示いただければと思います。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • 外部SVGファイルを指定時のJavaScript

    外部SVGファイルを指定している場合のJavaScriptの書き方 はじめまして。SVGを勉強中のとりがらと申します。 以下のような構成でHTML・SVGを作成しています。 （添付した図の通りです） 　　【XXX.html】 　　・embedタグでroot.svgを埋め込み。 　　【root.svg】 　　・ellipseオブジェクト 　　・useタグのchild.svgオブジェクト1 　　・useタグのchild.svgオブジェクト2 　　【child.svg】 　　・circleオブジェクト 　　・rectオブジェクト このような場合、XXX.htmlに記述したJavaScriptにて、 『root.svg』内『useタグのchildオブジェクト1』の『rectオブジェクト』の色 を変えたいと考えております。 そこで、XXX.htmlに下記のようなJavaScriptを書いたのですが、 child.svg内の四角の要素を取得する時点で、エラーが発生してしまいました。 > svgSub2.getElementById is not a function このような場合、どのようにJavaScriptを書けばよいのでしょうか？ SVGの記述の方がおかしいのでしょうか？ どなたか解決策のご教示の程、よろしくお願いいたします。 +============================== + 環境 +------------------------------ ・WindowsXP ・Firefox 19.0 +============================== + 呼び出しhtml +------------------------------ <!DOCTYPE HTML> <html> <head> 　　<script language="javascript" type="text/javascript"> 　　　　function OnButtonClick(){ 　　　　　　<!-- Root.svg内の楕円の色変更(OK) --> 　　　　　　var svgdocMain = document.getElementById("idRoot").getSVGDocument(); 　　　　　　var svgMainDaen = svgdocMain.getElementById("idRootObj0"); 　　　　　　svgMainDaen.setAttribute("fill", "#00FFFF"); 　　　　　　<!-- Child.svgオブジェクト1を非表示(OK) --> 　　　　　　var svgSub1 = svgdocMain.getElementById("idRootObj1"); 　　　　　　svgSub1.setAttribute("display", "none"); 　　　　　　<!-- Child.svgオブジェクト2内の四角の色変更(NG) --> 　　　　　　var svgSub2 = svgdocMain.getElementById("idRootObj2"); 　　　　　　var svgSubRect = svgSub2.getElementById("idChildObj1");　<!--←エラー発生--> 　　　　　 svgSubRect.setAttribute("fill", "#FFFFCC"); 　　　　} 　　</script> </head> <body> 　　<form><input type="button" value="テスト" onclick="OnButtonClick();"/></form> 　　<embed id="idRoot" type="image/svg+xml" src="root.svg" /> </body> </html> +============================== + root.svg +------------------------------ <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" 　　y="0px" width="800px" height="800px" viewBox="0 0 800 800" enable-background="new 0 0 800 800" xml:space="preserve" 　　id="svg_root" > 　　<!-- 1.ROOT楕円 --> 　　<ellipse fill="#00FF00" cx="20" cy="40" rx="15" ry="25" id="idRootObj0"> 　　</ellipse> 　　<!-- 2.Child.svg1 --> 　　<use xlink:href="child.svg#svg_child_g" x="0" y="100" id="idRootObj1" /> 　　<!-- 3.Child.svg2 --> 　　<use xlink:href="child.svg#svg_child_g" x="0" y="200" id="idRootObj2" /> </svg> +============================== + child.svg +------------------------------ <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" 　　height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve" 　　id="svg_child"> 　　<g id="svg_child_g"> 　　　　<!-- 1.CHILD四角 --> 　　　　<rect fill="#FF00FF" x="50" y="50" width="40" height="40" id="idChildObj1"> 　　　　</rect> 　　　　<!-- 2.CHILD円 --> 　　　　<circle fill="#00FF00" cx="50" cy="100" r="26.5" id="idChildObj2"> 　　　　</circle> 　　</g> </svg>

    • ベストアンサー
    • HTML
  • XHTML1.1+MathML2.0+SVG1.1をブラウザで表示したい。

    XHTML1.1 MathML2.0 SVG1.1 XML1.0 これを含むコンテンツをブラウザで表現する方法を探 しています。 XHTMLを文書の全体的な配置や意味の定義に使い、色や、配置にCSSを使い。 数字表記にはMathMLを。 ベクター画像にはSVGを使用し。 他のプログラムが使用するデータをXMLとして内包するページを作成しようと思っています。 XML1.0に関しての仕様は大体抑えたので、HTMLをXMLで再定義したものであるXHTML1.1でウエブページを作ろうとしたところなぜか巧く表示できません。 ページは"整形式XML"としては正しく作成しました。 ブラウザはIE6.0です。 使用する前にパラメータ エンティティを定義しなければなりません。リソース 'http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd' の実行エラーです。ライン 85、位置 2 %xhtml-prefw-redecl.mod; -^ というエラーメッセージが返されました。 ファイル拡張子は、xmlとしました。 ページは、人間だけでなく、他のプログラムへ対しても意味を持つようにしたいので、中にXMLのデータを挟みこめることは必須です。 この条件での、ウエブページ制作を詳しく解説しているサイトは無いでしょうか？

    • 締切済み
    • XML
  • apache にて index.htmlと指定して表示できません

    [環境] Fedora Core6 Apache/2.2.4 [現象] /var/www/html​ にテスト用 index.html を配置して ブラウザより http://192.168.1.150/ と指定して表示するとindex.htmlの内容のページが表示されました。 http://192.168.1.150/index.html と指定するとサーバがみつかりませんでした。 と表示されました。 どのようにしたら表示できるようになりますでしょうか？ 何か思いつくことがありましたら、ご指摘のほど よろしくお願い致します。

  • ロリポップでのＣＧＩファイルの使用について

    ホームページ作成ソフトで、携帯用サイトを作りサーバーにアップロードしたのですが、 ブラウザで確認するとエラー４０３がでてしまいます。 ソフトのユーザーサポートに問い合わせたところ、プログラムには問題がないので、 サーバーとＣＧＩの関係で問題があるのではとの事でした。 エラー表示の注記に <CGIを利用の場合は「index.cgi」 の名前のファイルが無い場合、エラーが発生いたしますのでご注意ください。> とあったので、 試しにｃｇｉのファイル名に「index.cgi」と入れてみたのですが、同じエラーが表示されてしまいました。 この場合、うまくブラウザに反映させるにはどのようにすれば良いのでしょうか。 利用環境・状況は次の通りですので、よろしくお願いいたします。 ■ＯＳ windowsＸＰ ■ブラウザ ＩＥ ■アップロードしたファイル 「htmlファイル１つ」と「cgiファイル１つ」 ちなみに、htmlファイル単体ではブラウザに表示されるようです。

  • IE6 でHPが正しく表示されない部分があります

    ドリームウィーバーでサイトを作っております。 下記アドレスで、ブラウザ表示チェックをした際、 http://ipinfo.info/netrenderer/index.php IE6でサイトを表示すると、mainコンテンツ部分が表示されていない ようなのです。当HPはhttp://chloe.gozaru.jp/です IE7では問題なく表示出来ています。 なぜIE6ではエラーが出るのでしょうか。教えてください。

  • index htmlをディレクトリの上に置くやり方をおしえてください

    今忍者の無料ホームページを作成中です。 しかし何かのミスでブラウザからＵＲＬが表示されません。 忍者に質問しましたら以下返信メールを頂きました。 index html がホームぺージ￥testと言うフォルダーの中に 保管されていてしまっているためデフォルトの方が反映されています。 index html ファイルをホームページ￥testより取り出し ホームページ￥testのアップロードされているディレクトリの上 に置くようにしてくださいとのことです。しかしやり方が今一 わかりません。おしえてください。

  • ＣＧＩの実験環境について

    ＣＧＩの実験環境としてApachをC:\にインストールして、http.confを編集（ユーザーデレクトリの変更、サーバー名の設定、ＣＧＩの許可）を行いました。 そしてApachを起動させるとrunning...と出て動作はしています。 テスト用のHTML（index.html）をC:\Apach\testの中に入れて、ブラウザでアドレス部分をhttp：//127.0.01/^test/としてもindex.htmlが表示されず、ページが 見つかりませんと出てしまいます。どこの設定が悪いのでしょうか？ 接続はLANを使用にしてあります。 ローカルループバックもMsDosからping127.0.0.1と打ち込むと動作表示され問題 なさそうです。 perlの場所はC:\usr\local\binです。

    • ベストアンサー
    • CGI
  • CGIのパスについて？

    ＨＴＭＬで表示するタイプのＢＢＳのパスについて教えて下さい。同じフォルダー( xx )の中にＣＧＩファイル( bbs.cgi )とＨＴＭＬで表示する部分のファイル( index.html )と、プログラムには関連の無い只の案内ファイル( info.html )があります。index.html とinfo.html 間は問題ないのですが、フォーム（別ページでの呼出し。bbs.cgi ?mode=formでの呼出し。）ページからinfo.html へは”info.html ”でリンクを張ると、できません。タスクバーに・・xx/bbs.cgi /info.html /となります。そこで、”../info.html ”でリンクを張ると、そちらへ移動できますが、info.html からフォームへ戻るパスを”bbs.cgi ?mode=form”や”http://wwｗ・・・bbs.cgi ?mode=form”(絶対パス)で書くと、１回目は戻れますが、行ったり来たりが出来ません。フォーム→info.html →フォーム→　(ダメ)info.html 。パスはどう書けば良いのでしょうか？ちなみにローカルでのテストです。２回めのinfo.html へのタスクバー表示は１階層上を指しています。少し分かりにくくてすみません。要は行ったり来たりできるパスの書き方を教えて下さい。ｍ(＿＿)ｍ

    • ベストアンサー
    • CGI

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する