66

Web ページで .svg ファイルを実際に使用する方法を知りたいですか?

4

7 に答える 7

57

IE を含むすべてのブラウザーで動作するものについては、 svgweb クイックスタートとsvgweb プロジェクトのホームページを参照してください(フラッシュ プラグインが必要です)。

既存の svg ファイルを含める方法は多数あります。

  • <img src="your.svg"/>
  • <object data="your.svg"/>
  • <iframe src="your.svg"/>
  • <embed src="your.svg"/>
  • <div style="background:url(your.svg)">...</div>
于 2010-01-06T08:15:54.653 に答える
24

ロゴや静止図などの SVG 画像を配置するだけの場合は、古いバージョンの Internet Explorer (つまり、バージョン 8 以前) のフォールバックを提供するように注意する必要があります。

私が見つけた最良かつ最も簡単な方法は、フォールバックに .png または .jpg を使用し、通常の img タグを使用して配置することです。次に、data 属性を使用して SVG を配置し、img タグを object タグでラップします。

<object data="/path-to/your-svg-image.svg" type="image/svg+xml">
  <img src="/path-to/your-fallback-image.png" />
</object>

img フォールバックは、ブラウザーが SVG を認識しない場合にのみ読み込まれて使用されます。

于 2012-10-30T04:09:32.277 に答える
6

http://www.w3schools.com/svg/svg_inhtml.asp

最良の例:

<embed src="rect.svg" width="300" height="100"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />
于 2010-01-06T06:30:58.187 に答える
4

Caspar のアプローチは適切なものです。ただし、おそらくいくつかのスタイルを svg ファイル自体に適用したいので、フォールバックを CSS に移動します...

<object data="/path-to/your-svg-image.svg" type="image/svg+xml"  class="logo"> </object>

CSS

.no-svg .logo {
  width: 99px;
  height: 99px;
  background-image: url(/path-to/your-png-image.png);
}`
于 2013-12-20T13:26:58.287 に答える
3

Raphaël—JavaScript ライブラリ. svg を使用する素敵な JavaScript ライブラリで、さまざまな効果が得られます。

IEを含むほとんどのブラウザもサポート

于 2010-01-06T07:27:55.397 に答える
2

「code-zoop」からの回答に同意したいと思います。これは技術的にはあなたの質問への回答ではありませんが、解決策になる可能性もあります。関連するデータを HTML に直接入力することです。svg 要素として直接、または Raphaël-JS を使用して。

w3c-schools より:

SVG は、Firefox、Internet Explorer 9、Google Chrome、Opera、および Safari ですべてサポートされています。

<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" cy="50" r="40" stroke="black"
  stroke-width="2" fill="red"/>
</svg>

</body>
</html>

（引用終わり）

枠にとらわれず、使い方に応じて、単色のグラフィックをWeb フォントに入れることもできます。(たとえば、 iconmoon.io を参照)

于 2013-03-06T06:52:14.937 に答える