- ベストアンサー
外部SVGファイルを埋め込むには
XHTML 1.1文書に外部image/svg+xmlオブジェクトを埋め込む場合、仕様上は <img src="alter.svg" alt="some description" width="88" height="31" /> で良いのでしょうか? ご回答よろしくお願い致します。
- _--_--_-_-
- お礼率74% (32/43)
- HTML
- 回答数3
- ありがとう数2
- みんなの回答 （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ファイルを指定してはいけない理由というのは無いのかもしれません。 つまり、(多くのブラウザは対応していないものの) 仕様上は問題ないということでしょう。 一応納得しました。ご回答有難うございました。
関連するQ&A
- 外部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
- 画像切り替え
<div> <img src="image1" alt="" width="300" height="300" /><br /> <img src="image1" alt="" width="80" height="80" /> <img src="image2" alt="" width="80" height="80" /> <img src="image3" alt="" width="80" height="80" /> <div> 下の小さい画像にマウスが乗ったら、上の大きい画像に表示させたいのですが、どのように組んだらよろしいでしょうか、よろしくお願いいたします。
- ベストアンサー
- JavaScript
- HTML文書の文法をチェックの事で
HTML文書の文法をチェックの事でお伺いします。 xhtmlでページを作成しています。 質問なのですがこのサイトで「Another HTML-lint gateway」（HTML文書の文法をチェックし、採点します） http://openlab.ring.gr.jp/k16/htmllint/htmllint.html 文法をチェックしているのですがアクセス解析のタグを付けていると、かなりマイナス点となってしまいます。 以下はあるアクセス解析のタグなのですが、なるべく減点されないようにするにはどうすればいいのでしょうか？ <!-- アクセス解析のタグ --> <img name="PageNo" src="dummy" alt="1" width="1" height="1"> <script type="text/javascript">document.write('<img src="http://*********/access/other/analyze.cgi?1_' + screen.width + 'x' + screen.height + '&' + screen.colorDepth + '&' + document.referrer + '" alt="" width="1" height="1">');</script> <noscript><img src="http://*********/access/other/analyze.cgi" alt="dummy" width="1" height="1"></noscript> <img name="home_url" src="http://*********/access/other" alt="dummy" width="1" height="1"><img name="1st-biz-img" alt="dummy" width="1" height="1"><SCRIPT type="text/javascript" src="http://*********/access/other/analyze/seidoku.js"></SCRIPT> <img name="1st-biz-img2" alt="dummy" width="1" height="1"><SCRIPT type="text/javascript" src="http://*********/access/other/analyze/taizai.js"></SCRIPT> <img src="http://*********/access/other/analyze/getrank.cgi" alt="dummy" width="1" height="1"> アドバス等ありましたら教えてください。よろしくお願いします。
- 締切済み
- HTML
- tableの作成方法について
よろしくお願いします。 表を以下のように作成しました。 表の横のラインに罫線を引きたいのですが記述方法が分かりません。 表の周りにはcssで記述して2pxの罫線を引いてあります。 どなた様か、ご指導の程よろしくお願いします <table> <tr> <td rowspan="3" class="b"><img src="img/wg.jpg" alt="パソコンノウハウ" width="190" height="250" /></td> <td class="c"><img src="img/txt21.gif" alt="" width="168" height="24" /><br /> </td> </tr> <tr> <td class="d"><img src="img/9.gif" alt="パソコンノウハウ" width="41" height="63" /> <img src="img/ten.gif" alt="パソコンノウハウ" width="21" height="63" /><img src="img/8.gif" alt="パソコンノウハウ" width="41" height="63" /> <img src="img/0.gif" alt="パソコンノウハウ" width="41" height="63" /><img src="img/0.gif" alt="パソコンノウハウ" width="41" height="63" /> <img src="img/en.gif" alt="パソコンノウハウ" width="131" height="63" /></td> </tr> <tr> <td class="e"><a href="http://www."><img src="img/enter_off.gif" alt="" width="349" height="83" /></a></td> </tr> ----------------------------------------------------------------ここに横の罫線を引きたいのですが記述方法が分かりません。 <tr> <td rowspan="3" class="b"><img src="img/wg.jpg" alt="パソコンノウハウ" width="190" height="250" /></td> <td class="c"><img src="img/txt22.gif" alt="" width="103" height="23" /><br /> </td> </tr> <tr> <td class="d"><img src="img/1.gif" alt="パソコンノウハウ" width="41" height="63" /><img src="img/0.gif" alt="パソコンノウハウ" width="41" height="63" /> <img src="img/ten.gif" alt="パソコンノウハウ" width="21" height="63" /><img src="img/8.gif" alt="パソコンノウハウ" width="41" height="63" /> <img src="img/0.gif" alt="パソコンノウハウ" width="41" height="63" /><img src="img/0.gif" alt="パソコンノウハウ" width="41" height="63" /> <img src="img/en.gif" alt="パソコンノウハウ" width="131" height="63" /> </td> </tr> <tr> <td class="e"><a href="http://"><img src="img/enter_off.gif" alt="" width="349" height="83" /></a></td> </tr> </table>
- ベストアンサー
- HTML
- 助けてください＞＜IE上で1pxのズレ
こんにちわ。 組んだテーブルに謎の１ｐｘがはいってしまいます。 ファイヤーフォックスでは正常なのですがIEでは1pxの隙間ができてしまうようで。 どなたか分かる方いらっしゃたらお願いします＞＜ <table width="660" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="2" valign="top"> <img src="img/test_01.jpg" width="660" height="177" alt=""></td> </tr> <tr><td rowspan="2" valign="top"> <table width="316" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="2"> <img src="img/test_02.jpg" width="316" height="46" alt=""></td> </tr> <tr> <td> <img src="img/test_05.jpg" width="144" height="47" alt=""></td> <td> <img src="img/test_06.jpg" width="172" height="47" alt=""></td> </tr> <tr> <td colspan="2"> <img src="img/test_08.jpg" width="316" height="169" alt=""></td> </tr> </table> </td></tr> <tr><td valign="top"> <table width="344" border="0" cellpadding="0" cellspacing="0"> <tr><td> <table width="344" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <img src="img/test_03.jpg" width="181" height="62" alt=""></td> <td> <img src="img/test_04.jpg" width="163" height="62" alt=""></td> </tr> <tr> <td colspan="2"> <img src="img/test_07.jpg" width="344" height="83" alt=""></td> </tr> </table> </td></tr> <tr><td> <table width="344" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <img src="img/test_09.jpg" width="160" height="62" alt=""></td> <td> <img src="img/test_10.jpg" width="184" height="62" alt=""></td> </tr> <tr> <td colspan="2"> <img src="img/test_11.jpg" width="344" height="23" alt=""></td> </tr> <tr> <td> <img src="img/test_12.jpg" width="160" height="32" alt=""></td> <td> <img src="img/test_13.jpg" width="184" height="32" alt=""></td> </tr> </table> </td></tr> </table> </td></tr> <tr><td colspan="2"> <table width="660" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="5"> <img src="img/test_14.jpg" width="660" height="141" alt=""></td> </tr> <tr> <td> <img src="img/test_15.jpg" width="130" height="150" alt=""></td> <td> <img src="img/test_16.jpg" width="130" height="150" alt=""></td> <td> <img src="img/test_17.jpg" width="140" height="150" alt=""></td> <td> <img src="img/test_18.jpg" width="130" height="150" alt=""></td> <td> <img src="img/test_19.jpg" width="130" height="150" alt=""></td> </tr> <tr> <td colspan="5"> <img src="img/test_20.jpg" width="660" height="40" alt=""></td> </tr> </table> </td></tr> </table>
- 締切済み
- HTML
- HTMLタグ
画像にもありますが、取り扱い商品・液晶モニタ・パソコンパーツなどの横に横2列縦3列のテーブル、その横に縦５列横1列のテーブルを付けたいのですが、どうしてもわかりません。 わかる方居ましたらお願いします。 現在こんな感じです <p><font color="#f70006"> <strong>他には無いアイテムがここにはあります</strong> </font> <br> <img style="WIDTH: 983px; HEIGHT: 102px" border="0" alt="" src="素材/top.png" width="1000" height="118"><br> <img border="0" alt="" src="素材/home.png" width="200" height="73"><img border="0" alt="" src="素材/商品一覧.png" width="200" height="73"><img border="0" alt="" src="素材/輸入.png" width="200" height="73"><img border="0" alt="" src="素材/買付.png" width="200" height="73"><img style="WIDTH: 169px; HEIGHT: 73px" border="0" alt="" src="素材/問合.png" width="170" height="73"><br> <br> <br> <br><img border="0" alt="" src="素材/取り扱い.png" width="164" height="49"><br> <img border="0" alt="" src="素材/液晶.png" width="164" height="49"><br> <img border="0" alt="" src="素材/ａｐａｒｅｒｕ.png" width="164" height="49"><br> <img border="0" alt="" src="素材/pasokon.png" width="164" height="49"><br> <img border="0" alt="" src="素材/周辺機器.png" width="164" height="49"><br> <img border="0" alt="" src="素材/マルチメディア.png" width="164" height="49"><br> <img border="0" alt="" src="素材/自動車.png" width="164" height="49"><br> <br> <br> <br> <img border="0" alt="" src="素材/サポート.png" width="166" height="63"><br> <img border="0" alt="" src="素材/輸入について.png" width="166" height="63"><br> <img border="0" alt="" src="素材/お問い合わせ.png" width="166" height="63"><br> <img border="0" alt="" src="素材/会社概要.png" width="166" height="63"> </p> 他にいい作り方など、オススメ等ありましたら何でもお願いします
- ベストアンサー
- その他（インターネット・Webサービス）
- CSSで縦長・横長の写真を一定に並べたい
写真のギャラリーのようなものを作成しています。 写真のサムネイルが200×150pxのものと150×200pxのものがあり、並びはランダムです。 この写真を正方形の方眼紙に並べるように配置したいと思っています。 テーブルで作成すれば楽なのですが、文書構造的にCSSで行いたいと思っています。 リストでマークアップして、それぞれのli要素を200pxの正方形にしてから、その中央に画像を表示させたいのですが… 縦長の写真はtext-align:center;で処理ができるので、できましたが、横長写真の上下位置が中央になりません。 横長写真が入っているli要素だけに対してクラスを指定すればできそうなのですが、数が多いので、一括で処理できないか、と奮闘しております。 試しにli要素に対してline-heightを200pxで指定し、img要素に対してvertical-alignをmiddleで指定してみたのですが、Firefoxではうまくいくものの、IE（8）でNGでした。 現在のソースは以下の通りです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ギャラリー</title> <style type="text/css"> <!-- #content { width: 612px; } #content ul { margin: 0px; padding: 0px; } #content li { list-style: none; line-height: 200px; float: left; height: 200px; width: 200px; text-align: center; border: 2px solid #009933; } #content li img { vertical-align: middle; } --> </style> </head> <body> <div id="content"> <ul> <li><img src="images/tate.gif" alt="縦" width="150" height="200" /></li> <li><img src="images/yoko.gif" alt="横" width="200" height="150" /></li> <li><img src="images/yoko.gif" alt="横" width="200" height="150" /></li> <li><img src="images/tate.gif" alt="縦" width="150" height="200" /></li> <li><img src="images/yoko.gif" alt="横" width="200" height="150" /></li> <li><img src="images/tate.gif" alt="縦" width="150" height="200" /></li> <li><img src="images/yoko.gif" alt="横" width="200" height="150" /></li> <li><img src="images/yoko.gif" alt="横" width="200" height="150" /></li> <li><img src="images/tate.gif" alt="縦" width="150" height="200" /></li> <li><img src="images/yoko.gif" alt="横" width="200" height="150" /></li> <li><img src="images/tate.gif" alt="縦" width="150" height="200" /></li> <li><img src="images/tate.gif" alt="縦" width="150" height="200" /></li> </ul> </div> </body> </html> どなたかお分かりになる方、いらっしゃいましたら、お知恵を拝借できれば幸いです。 よろしくお願い致します。
- ベストアンサー
- HTML
- SVGをobjectタグで埋め込み・表示させる方法
いつもお世話になっております。 HTMLにobjectタブを使いSVGファイルを埋め込み・表示させようとしていますが、 表示させることができません。 SVGファイル自体は正しく表示されます。 （ブラウザはIE9 Betaです） 過去にいくつか類似投稿がありましたの参考にしましたが、今一つ分かりません。 以下コードになりますが、記述が誤っている・足りない箇所がありましたら、ご指摘ください。 よろしくお願いします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"></meta> </head> <body> <div> <object width="200" height="40" data="sample.svg" type="image/svg+xml"> SVG表示失敗 </object> </div> </body> </html>
- ベストアンサー
- HTML
- IE以外のブラウザでスペース
お世話になります 現在、ホームページを作っているのですが <?xml version="1.0" encoding="EUC-JP"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <body style="margin-top:0px;"> <table cellpadding="0" cellspacing="0"> <tr> <td style="vertical-align: top;"><img src="img/01.gif" width="180" height="20" alt="画像1" /></td> <td style="vertical-align: top;"><img src="img/02.gif" width="180" height="5" alt="画像2" /></td> </tr> </table> </body> </html> とやったときに IE6.0では上にスペースなく表示されるのですが NN7.1やOpera、Firefoxなどでは画像2の方の上にスペースが入ってしまいます このスペースをなくす方法はないでしょうか？ よろしくお願いします
- ベストアンサー
- CSS
- XHTMLでは、インライン要素は必ずブロックレベル要素内に記述となっていますがこの場合は？
XHTMLについて教えてください。 XHTMLでは、インラインレベル要素は、必ずブロックレベル要素内で記述されなければなりませんが、こういった場合（以下参照ください）の書き方は、どちらが正しのでしょうか？ まずCSSを、 #hoge{ width:200px; background-color:#000000; } と設定したと仮定します。 で、XHTMLですが・・・ -----サンプル１----- <div id="hoge"> <p><img src="写真とか.gif" alt="" width="10" height="10" /></p> <h1>タイトル</h1> <p>テキストテキストテキスト・・・・・</p> </div> -----サンプル2----- <div id="hoge"> <img src="写真とか.gif" alt="" width="10" height="10" /> <h1>タイトル</h1> テキストテキスト </div> あと、ブロックid“hoge”内に一つだけインライン要素を配置する場合・・・ -----サンプル2----- <div id="hoge"> <p><img src="ボタン.gif" alt="" width="10" height="10" /></p> </div> -----サンプル2----- <div id="hoge"> <img src="ボタン.gif" alt="" width="10" height="10" /> </div> 要するに、CSSの設定を呼び出すために<div>で括っている場合は、それぞれのサンプル2のように既にブロックレベル要素内に収まっている」ということになるのでしょうか？ それとも、やはり、サンプル1のよう記述するのが正しいのでしょうか？ 説明が分かりにくくて申し訳ございませんが、ぜひアドバイスくださいますようお願いいたします。
- ベストアンサー
- HTML
補足
ご回答有り難うございます。 ブラウザのことを考慮するならば、objectが最も良い選択のようですね。 しかし、widthとheightを指定して画像を拡縮することもできるのでしょうか?