私はSVG世界の初心者です。今日は実験を始めました。私は、プライマリグラフィックスがすべてスケーラブルで、すべてのディスプレイ解像度をサポートするモバイルサイトを作成しようとしています。SVGファイルを含める方法<input>背景
私の入力用のsvgファイル（現在はtype = "image"）を作成しましたが、驚いたことに私のコードエディタ（Coda）で期待通りの結果が得られました。テスト（モバイルSafari、DT Safari、DT FF）では、入力に壊れたイメージパスのプレースホルダが表示されます（ファイルをダウンロードするために右クリックすることができます）。
（html5）文書にSVGファイルを含めるにはどうすればよいですか？
Using SVG in background-imageを参照してください。入力で、背景画像を配置するためのCSSは、他の要素と同じである。
input { background-image:url('foo.svg') }
驚くばかりです。ありがとう！私たちは完全なサポートを待たなければならないと思う。 –
<img src="mysvg.svg ...
現在、すべてのブラウザレンダリングエンジンでサポートされていません。または、人々が使用しているブラウザーではサポートされていないと言ってください。
1> xmlインラインまたはhtmlインラインでxmlドキュメントとして配信されています...これも入力するとうまくサポートされません。
2>埋め込み、
3>オブジェクト
4>インラインフレーム（ページとしてヒット小さなパフォーマンスがダウンロードされる原因となる）
5> Googleのsvgwebも使用することができます。背景レイヤーとしてsvgwebを使用しようとはしていませんが、うまくいくはずです。
イメージよりも複雑なものを実行していない場合、スクリプトなどはありません。SVGWebはほぼすべてのブラウザで正しく表示されます。 VMLを使用して古いIEブラウザでのサポートを使用し、使用可能な場合はネイティブサポートを使用し、最後にFlashインターフェイスを使用してSVGを表示します。
"より複雑な"難しさは、ブラウザがsvgwebができることを含まず、それらのブラウザでサポートされていないことをしたいという基本的なネイティブサポートがある場合です。その後、フラッシュモードを強制する必要があります。
これは7年前の素晴らしい回答でした。 http://caniuse.com/#feat=svg-img –
またSVGインラインので、などを含むことができる：これは、IE 9に支持されている
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<h2>Red Circle via SVG</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
<circle id="redcircle" cx="50" cy="50" r="50" fill="red" />
</svg>
</body>
</html>
をFF 5、およびChrome 12ではなく、Safari 5をWin 7にインストールしてください。
確かに、これはバックグラウンドイメージではありませんが、これを修正するにはCSSを使用できます。
編集：Anders氏は「このインラインのsvgを背景イメージとしてどのように使用しますか？ LMGTFY、Anders。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
span { position: absolute; }
span.svg { z-index: -1; }
</style>
</head>
<body>
<h2>Red Circle via SVG</h2>
<div>
<span>
<p>Use CSS to position the circle and put it in the background "behind" the text.</p>
</span>
</div>
<div>
<span class="svg">
<svg id="svgelem" height="100" xmlns="http://www.w3.org/2000/svg">
<circle id="redcircle" cx="50" cy="50" r="50" fill="red" />
</svg>
</span>
</div>
</body>
</html>
はここで勝利7版Chrome 41がそれをレンダリングする方法は次のとおりです：ここでは答えは一つだ
この "インライン" svgを背景イメージとしてどのように使用しますか？ –
私は今、SVGのサポートは、モバイルブラウジングのために非常に完了していないことを学んだ、HTTPを参照してください：// caniuse。 com /＃cats = SVG。私は今これを実装するつもりはないが、私は答えを学ぶことが非常に興味がある。 –