Webにsvgアイコンを実装する

Question

私は最高のソリューションを探しています。どのように.svgアイコンをWebに実装するのですか？

基本的には、私は自分の.psdにあるアイコンを実装する必要があるので、任意の形式を選択できますが、ベクターを持つことはいいです。だから私は.svgを選択しました。

問題は、その写真の色を変更する必要があるだけでなく、IEの主要なブラウザでもサポートされることを確認する必要があるということです。

今のところ私はタグ<オブジェクトを使用していますが、うまく動作しますが、私はブラウザのサポートについて確信していますし、単に色を変更することもできません。

この状況をどのように解決しますか？

.svgアイコンは非常に小さくてシンプルですが、フォントやアイコンに変換することも考えていますが、最適なワークフローを正しく理解する方法についてはわかりません。

また、私は.pngsを使用して考えていたが、そこに色の変更に伴う問題、そしてもちろん「scaleabnessは」ですが、私が何かを見つけることができません場合、私はおそらくこれで終わるだろう...

は、私は彼らが、スケーラブル着色されているよう....、（フォントのような...素晴らしいなど）のフォントでの作業のように個人的にと変換し、このように.PSDからこれらのアイコンを追加することができ、どこでも

を表示しましたフォントに近いでしょうか？

は、あなたの答えをありがとう:) http://caniuse.com/

共通のワークフローでSVGを実装するためのさまざまな方法について

Answer 1

チェックブラウザのサポート：

• 自動的にアイコンフォントへの.svgファイルを処理、利用可能にCSSの場合、Gulp
• .SVGコンテンツをHTMLにデータURIとして自動的に挿入します。サーバミドルウェア
個々のシンボルとして
• 挿入SVGシンボルとしてインラインページや参照にすべてのSVGアイコン
• 挿入1つのSVG文書にすべてのアイコン、およびSVGの「使用」で個別に参照してください - https://css-tricks.com/svg-use-with-external-reference-take-2/

Answer 2

だから私はしましたソリューションを見つけました

私は自分のフォントを.svgから生成しました。私たちは小さなアイコンで、フォントのようなものを扱うことは問題ありません。 私は、あなたの.SVGをアップロードし、あなたのフォントの名前のようないくつかのカスタマイゼーションを行い、マッピングし、あなたのページにそれらを追加し、で動作するように非常に簡単

http://fontastic.me/

を使用しました。