SVGアイコンには、フォントアイコンよりもいくつかの利点があります。可変サイズのコンテナ要素に合わせて拡大縮小することができ、個々のパスの色を理論的に変更できます。私はまたInkscapeで簡単に作ることができるのが好きです：PSVGアイコンに移動する - コードからどのように分離するのですか？
しかし、アイコンファイルのように同じページに再利用できるようにSVGを移動するにはどうしたらいいですか？ ？
背景のプロパティはでSVGをサポートしていますが、それは私がSVGをHTMLに入れなければならないことを意味します。 「データ」文字列として配置すると、同じCSSファイルでパスの色を変更するにはどうすればよいですか？
詳細については、Sara SoueidanでSVGに関する多くの作業を行ってください。 recent article/talk she gaveにもダイジェスト情報がたくさんあるかもしれません。
Chris Coyerにも非常に有用なことがいくつかあります。
私は以前はSVGのアイコンではなくSVGで作業しましたが、しかし、私が持っている知識に基づいて、いくつか見て回って、ここで私が思い付いたものです（私は完全にあなたの質問を理解していないかもしれない場合は、より多くの質問を投稿してください）。
しかし、どのように、彼らは同じページに再利用することができますので、私は
CSSファイルにSVGを移動するが、それは私が
SVGがHTMLにSVGを配置する必要があるということです基本的にはXMLだから、なぜあなたがHTMLファイルにSVGを入れない方がいいか正確にはわからない。 SVGをHTMLファイルに入れると、SVGのスタイルに外部CSSまたは内部CSSを使用できます。ここにはsampleがあります。 CSSファイルで
<circle cx="100" cy="100" r="75" />
：HTMLファイルで
（あなたの中にHTMLファイルをCSSファイルをインクルード）
<style>
circle {
fill: deepPink;
transition: fill .3s ease-out;
}
circle:hover {
fill: #009966;
}
</style>
ここでは、<img/>タグを使用し、他の多くの第二の選択肢です。 <img/>タグを使用して別のファイルからSVGを使用する方法を説明するarticleがあります。そしてそれに付随するのはcodeです。また、jQueryプラグインsvginjectを使用していることにも注意してください。
ここには、SVGをHTMLから除外し、そのメリットを維持するためのその他のものはほとんどありません。options
これが役に立ちます。
背景イメージとしてSVGを使用すると、パスと塗りつぶしの色（AFAIK）を変更できません。ただし、白いSVGと背景色を使ってMetro-ishアイコンを作成することができます。これはまさにjQuery Mobile theming systemの機能です。
.icon {
display: inline-block;
width: 80px;
height: 80px;
background-size: 80%;
background-position: center;
background-repeat: no-repeat;
}
.icon-1 {
background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2014%2014%22%20style%3D%22enable-background%3Anew%200%200%2014%2014%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20style%3D%22fill%3A%23FFFFFF%3B%22%20points%3D%2214%2C5%209%2C5%207%2C0%205%2C5%200%2C5%204%2C8%202.625%2C13%207%2C10%2011.375%2C13%2010%2C8%20%22%2F%3E%3C%2Fsvg%3E");
}
.icon-bg-1 {
background-color: #800080;
}
.icon-bg-2 {
background-color: #DB7093;
}
.icon-bg-3 {
background-color: #CD853F;
}
.icon-bg-4 {
background-color: #B0E0E6;
}<span class="icon icon-1 icon-bg-1"></span>
<span class="icon icon-1 icon-bg-2"></span>
<span class="icon icon-1 icon-bg-3"></span>
<span class="icon icon-1 icon-bg-4"></span>別のオプションは、着色SVGを使用して、SVGの色を変更するCSS3 hue-rotate filterを使用することです。このプロパティはまだ広くサポートされていません。
注：色相の回転は「色」にのみ影響します。黒、白、灰色は影響を受けません。
.icon {
display: inline-block;
width: 80px;
height: 80px;
background-size: 80%;
background-position: center;
background-repeat: no-repeat;
background-color: #EEEEEE;
}
.icon-1 {
background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2014%2014%22%20style%3D%22enable-background%3Anew%200%200%2014%2014%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20style%3D%22fill%3A%23FF0000%3B%22%20points%3D%2214%2C5%209%2C5%207%2C0%205%2C5%200%2C5%204%2C8%202.625%2C13%207%2C10%2011.375%2C13%2010%2C8%20%22%2F%3E%3C%2Fsvg%3E");
}
.icon-hue-1 {
-webkit-filter: hue-rotate(0deg);
-moz-filter: hue-rotate(0deg);
filter: hue-rotate(0deg);
}
.icon-hue-2 {
-webkit-filter: hue-rotate(90deg);
-moz-filter: hue-rotate(90deg);
filter: hue-rotate(90deg);
}
.icon-hue-3 {
-webkit-filter: hue-rotate(180deg);
-moz-filter: hue-rotate(180deg);
filter: hue-rotate(180deg);
}
.icon-hue-4 {
-webkit-filter: hue-rotate(270deg);
-moz-filter: hue-rotate(270deg);
filter: hue-rotate(270deg);
}<span class="icon icon-1 icon-hue-1"></span>
<span class="icon icon-1 icon-hue-2"></span>
<span class="icon icon-1 icon-hue-3"></span>
<span class="icon icon-1 icon-hue-4"></span>しかし、彼らは、アイコンフォントのように、同じページに再利用し、まだこれらの利点の恩恵を受けることができますので、どのように私は、CSSファイルにSVGを移動するのですか？ SVGテンプレート
で
SVGテンプレートを作成することができます。
テンプレート（HTML）
<svg width="100px" height="100px" viewBox="0 0 100 100" class="hide">
<circle id="circle-tmp" cx="50" cy="50" r="50" />
</svg>
そのテンプレートは、私たちはそれを隠します。 （それでもDOM中）
.hide { display: none;} //css
使用（HTML）
<svg viewBox="0 0 100 100 class="circle-first">
<use xlink:href="#circle-tmp" />
</svg>
これは、ページ上の任意の場所に再利用することができます。
同じCSSファイルでパスの色を変更するにはどうすればよいですか？
簡単、ちょうどそれをスタイルする！ 例作業
CSS
.circle-first {
fill: #12bb34;
}
？ ここに行きます：Fiddle
ブラウザサポート？すべての大きなブラウザで確認してください、しかし、SVGをサポートしていませ100％：CanIUseIt
基本的にすべての回答から、少なくともまだスタイルリングにsvgを使用することはできません。私は使用物を知っていましたが、それは彼らが所属するアイコンを移動するのにはまだ役立ちません - では、CSSファイル:( – Alex
あなたが
htmlコードからsvgファイルのxml内容を遠ざけるたいようです。
これを満たすために、2つのシナリオはhtmlへsvgファイルを埋め込むことが可能です：<object data="~/img/file.svg" type="image/svg+xml"></object>要素を使用して
xmlは >たビューは次のようになりhtml==から分離されます （おそらくscoped）を使用してスタイリングできるhtmlとxmlの組み合わせターゲットページで<style scoped="scoped"></style> ）。<img src="~/img/file.svg"/>要素を使用して、だから、xmlはhtml==>から を分離されたビューはhtmlとcss がsvgファイルのxml内容に実行することはできませんでしょう。svgを採用する別の方法は、あなたが、このためにあまりにもをインラインスタイルシートを使用できるように<svg>タグを使用して、インライン技術、発言権を使用することです。しかし、あなたはより多くのためにここにhtml :)
からxml独立したいです情報： Using SVGおよびSVG Styling with CSS。
SVGアイコンの使い勝手を保つため、現時点では<svg>をHTMLページに含めるという選択肢はありません。
Chris Coyier's articleには、一般に認められているベストプラクティスが記載されています。 <symbols>として
ストアあなたのSVGアイコンの意味：それはのようなものだ
<svg id='my-icons'>
<symbol id='icon-puppy'> <!-- puppy icon goes here --> </symbol>
<symbol id='icon-kitty'> <!-- kitty icon goes here --> </symbol>
</svg>
アイコンを使用する必要がある場合は、アイコンの定義を参照：
<svg class='icon'>
<use xlink:href='#icon-puppy'/>
</svg>
This articleは、SVGファイルをHTMLのdynamicallに含める方法について説明していますy。
また、evil-iconsプロジェクトにいくつかの掘り下げを行うこともできます。あなたはsvgを使用するいくつかのきれいな方法を見つけるでしょう。
あなたのすべてのアイコンを1つのファイル "sprite.svg"にマージするのが一番のアイデアです。それぞれのアイコンは、IDが<symbol>のタグで囲む必要があります。次に、他の答えにコメントされているように、xlinkを介して必要なときにいつでもアクセスします。
sprite.svg全体を読み込むことで、読み込み時間と見栄えが向上します。
また、svg_element.svgのようなanmeを持つファイルに置くこともできます。このスタイル= "background：url（svg_element.svg）"のように使用してください。 – ambes
これはデータURL文字列を使用した場合とほとんど同じですが、各アイコンについて：P – Alex
「同じCSSファイルでパスの色を変更するにはどうすればよいですか」と説明してください。 –