web-dev-qa-db-ja.com

Webページで.svgファイルを使用する方法は？

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

imageimage-manipulationsvgadobe-illustrator
55
Parastar

IE（Flashプラグインが必要）を含むすべてのブラウザで動作するものについては、 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>
46
Erik Dahlström

ロゴや静的な図などのSVG画像を配置するだけであれば、Internet Explorerの古いバージョン（バージョン8以前）のフォールバックを提供するように注意する必要があります。

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

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

Imgフォールバックは、ブラウザがSVGを理解しない場合にのみロードされ、使用されます。

20
Caspar

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/" />
5
Brian McKenna

Svgをドキュメントにインラインで挿入することをお勧めします（html5テクニック）。 SVGファイルを開き、SVGタグとその中のすべてをコピーしてから、HTMLドキュメントに貼り付けます。

<html>
    <body>
        <svg></svg>
    </body>
</html>

塗りつぶしの色を変更したり、ぼかしなどのフィルターを適用したりするなど、CSSを使用してスタイルを設定できるという利点があります。もう1つの利点は、ドキュメント内にある場合、svgファイルを取得するために1つのhttpリクエストを保存することです。

たとえば、cssを使用してその位置を変更したい場合は、スタイル属性内にcssを配置する必要があります。外部のcssファイルにあるスタイルは、これがセキュリティ制限であるため、ほとんどのブラウザーに適用されません。例えば：

<svg id="mySVG" style="position: absolute; top: 200px; left: 200px;"></svg>

この手法は、IE8以前およびAndroid 2.3以降のブラウザーを除くすべてのブラウザーでサポートされています。

詳細については、インラインSVGの章を参照してください。

ページにインラインで配置したくない場合、最良の代替手段はオブジェクトタグであり、埋め込みタグの使用を避けるようです。

オブジェクトvs埋め込みvs imgタグの詳細についてはこちらをお読みください：

3
chrisweb

Raphaël—JavaScriptライブラリ 。 svgを使用し、幅広い効果をもたらす素敵なjavascriptライブラリ！

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

2
code-zoop

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);
}`
2
Jerome

「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>

（引用の終わり）

また、ボックスの外側をより深く考えるには、使用方法に応じて、1色のグラフィックスをwebfontに配置することもできます。 （例えばiconmoon.ioを参照）

1
Ideogram