URI経由のインラインSVG

私は自分のSVGイメージにデータURIを使用しようとしています。基本的なアプローチは、完全なデータURIを=に設定して、cssクラスのバックグラウンドプロパティの値を設定することです。URI経由のインラインSVG

.bg { 
    background: url('data:image/svg+xml;utf8,<svg ...> ... </svg>'); 
}

私の質問は、データURI値を別のファイルに分割し、そのファイルを自分のcssクラス内で参照する方法です。目標：すべてのデータURIを基本スタイルから分離して、CSSを馬鹿馬鹿しくしないようにします。

SVGを実装するためにURIを使用したことがないので、誰でものいずれかのアイデアを持っている可能性があります。本当にありがとう！ :)

P.S.これを自動化する良い方法があれば、私はこのプロジェクトにgulpとbootstrap sassを使用しています。

データuriをファイルとして保存してから参照します。もちろん、それはもはやその時点でのデータURIではなく、単なるURIです。 –

これは超基本的ですが、ファイルをどのように参照しますか。ファイルにどのような拡張子を付けるのですか？そのファイル内のSVGを1つだけ参照するにはどうすればよいですか？ –

あなたが置く場所によって異なります。明らかな拡張は.svgでしょうか？私は最後の質問を本当に理解していません。 –

私はgrunt-grunticonを使用することをお勧めします。これは必要に応じてpngにフォールバックするためのCSSクラスを生成します。それから、scssやsassを使ってアイコンを@extendすることができます。たとえば@extend .icon-undo;

希望すると便利です。がんばろう。

2016-10-14 16:31:28 tuck

答えて