web-dev-qa-db-ja.com

SVGコンテンツをHTML内に配置する最良の方法

私の調査から、svgファイルをHTML内に配置する方法は3つあることがわかります。

embedの使用：

<embed src="plot1.svg" width="500" height="320" type="image/svg+xml" />


objectの使用：

<object data="plot1.svg" width="500" height="320" type="image/svg+xml" />


iframeの使用：

<iframe src="plot1.svg" width="500" height="320"> </iframe>


私は3つすべてをテストリグ（Django組み込み開発サーバー、Firefox 3.6でページをレンダリングする）で実験しました。この明らかに無菌の環境下では、3つのw/r/tパフォーマンスまたは解像度の違いに気づきませんでした。

私の質問は、これらの1つが他の2つよりも優れているかどうか、そうである場合、どちらが優れているかです。答えはもちろん事実に依存するかもしれませんが、私は関連するものに限定しようとしました：

通常、ユーザーの操作に応じて作成されたデータ（時系列など）をウェブサイトに頻繁に表示します。そのユーザーアクションに基づいて、データベースへの呼び出しが行われ、返されたデータがクランチされてプロットエンジンに送信されます。これにより、静的イメージがレンダリングされ、ページに埋め込まれます。これは非常に標準的なものです。

これは問題なく機能しますが、これらのグラフにいくつかのインタラクティブな機能を追加したいと思います（たとえば、ツールチップ、ハイパーリンクされた軸ラベル、プロット内のポイントのグループを強調表示）。一部のグラフはかなり洗練されており（たとえば、マルチパネル条件付け）、これらの機能を含むJavaScriptグラフライブラリが見つかりません。最後に、同じプロットライブラリ（Rのラティス）を使用することにしましたが、各グラフをsvgでレンダリングし、本質的にXMLを直接操作するJavaScript関数で構成される後処理ステップでユーザーインタラクション機能を追加しました。

htmlxmlsvg
23
doug

<embed>通常は避けます。 HTML4で非推奨になり、適切なフォールバックコンテンツを許可せず、IEでいくつかの問題が発生しています。

<object>を使用すると、SVGをサポートしていないブラウザ用の代替HTMLコンテンツを含めることができます。 <iframe>は、.svgファイルのダウンロードを求めるプロンプトにフォールバックします。どちらが最適かは、おそらくアプリケーションによって異なります。

最新のブラウザー（IEバージョン9以降）を含む）のもう1つの方法は、Webページをapplication/xhtml+htmlとして提供し、ページ自体にSVG要素を含めることです。

12
bobince

私にとって最良の方法はこれです

<svg id="circle" height="60" width="60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
  <image x="0" y="0" height="60" width="60"  xlink:href="huge-red-circle.svg" />
</svg>

ここで例を見ることができます

ソース： http://edutechwiki.unige.ch/en/Using_SVG_with_HTML5_tutorial

11
JALF