最初は、ラスターの代わりにベクターを使用してスプライト手法を使用しようとしましたが、ここで2つの問題が発生しました。
- スケーリング。 任意のサイズのスプライト要素を使用して、正確に配置するには、タンバリンと踊る必要があります。 また、スプライト自体のサイズを変更するとき（たとえば、新しい要素を追加するとき）、すべてがクロールできます。
- HTMLコードには物理的にSVG画像がないため、CSSスタイリングオプションはありません。
次に、これらのbase64のエンコードとdata-uriの使用によるCSSでの画像の統合を思い出しました。 SVGでは、すべてがはるかに単純です。SVGイメージはXMLファイルであるため、base64でさえ必要ではないので、MIMEタイプをデータとして指定します：image / svg + xmlとSVGファイルの内容を1行に挿入します。
たとえば、ごみ箱アイコンをご覧ください。
彼女のコードは次のようになります。
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" viewBox="0 0 1850 1635" xmlns:xlink="http://www.w3.org/1999/xlink"> <g id="icon__cart"> <path fill="#101010" d="M1254 1163l-1203 0c-26,0 -51,-25 -51,-51l0 -131c0,-23 22,-51 51,-51l1075 0c22,0 36,-13 44,-30l96 -192c4,-9 1,-12 -8,-12l-1207 0c-22,0 -51,-25 -51,-51l0 -131c0,-23 23,-51 51,-51l1298 0c27,0 46,-13 56,-33l200 -401c9,-18 20,-29 41,-29l182 0c19,0 29,7 18,29l-554 1111c-5,10 -19,23 -38,23z"/> <circle fill="#101010" cx="207" cy="1453" r="181"/> <circle fill="#101010" cx="1062" cy="1453" r="181"/> </g> </svg>
したがって、data-uriの背景として使用すると、次のようになります。
.element_whis_svg_background { background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" viewBox="0 0 1850 1635" xmlns:xlink="http://www.w3.org/1999/xlink">...</svg>'); }
やってみます。 ChromeとOperaのすべてが素晴らしいですが、IE9-10-11、Safari、そして奇妙なことにFirefox-背景画像は表示されません。彼らはこの記録形式を理解しません。 問題が何であるかを調べ、SVGファイルのコンテンツのIEおよびその他の場合、RFC 3986標準に従って文字列のURIエンコードを実行する必要があることを見つけます。エンコードし、この構造を取得します。
%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201850%201635%22%3E%3Cg%20fill%3D%22%23101010%22%3E%3Cpath%20d%3D%22M1254%201163H51c-26%200-51-25-51-51V981c0-23%2022-51%2051-51h1075c22%200%2036-13%2044-30l96-192c4-9%201-12-8-12H51c-22%200-51-25-51-51V514c0-23%2023-51%2051-51h1298c27%200%2046-13%2056-33l200-401c9-18%2020-29%2041-29h182c19%200%2029%207%2018%2029l-554%201111c-5%2010-19%2023-38%2023z%22%2F%3E%3Ccircle%20cx%3D%22207%22%20cy%3D%221453%22%20r%3D%22181%22%2F%3E%3Ccircle%20cx%3D%221062%22%20cy%3D%221453%22%20r%3D%22181%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E
バックグラウンドでそれを置き換え、チェックします：
.element_whis_svg_background { background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2 ... svg%3E'); }
やれやれ、すべてうまくいく！ Nuance-この場合のエンコーディングは指定する必要はありません。 指定すると-IEでの動作が停止します。
そして最後に、アイコンの外観をカスタマイズするために、任意のプリプロセッサを使用し（私はLESSを使用しますが、それは重要ではありません）、アイコンクラスを混合（mixin）として配置します。 塗りつぶしの色を変更できるようにするには、エンコードされた行で塗りつぶし属性を見つけます。次のようなものがあります。
fill%3D%22%23101010%22
％23と％22の間は、目的のカラーコードです。ここで、変数を置き換える必要があります。 その結果、次の結果が得られます。
.icon__cart(@width, @height, @fill) { content: ''; display: block; width: @width; height: @height; background-size: contain; background-repeat: no-repeat; background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201850%201635%22%3E%3Cg%20fill%3D%22%23@{fill}%22%3E%3Cpath%20d%3D%22M1254%201163H51c-26%200-51-25-51-51V981c0-23%2022-51%2051-51h1075c22%200%2036-13%2044-30l96-192c4-9%201-12-8-12H51c-22%200-51-25-51-51V514c0-23%2023-51%2051-51h1298c27%200%2046-13%2056-33l200-401c9-18%2020-29%2041-29h182c19%200%2029%207%2018%2029l-554%201111c-5%2010-19%2023-38%2023z%22%2F%3E%3Ccircle%20cx%3D%22207%22%20cy%3D%221453%22%20r%3D%22181%22%2F%3E%3Ccircle%20cx%3D%221062%22%20cy%3D%221453%22%20r%3D%22181%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E'); }
この不純物は次のように使用されます（任意のサンプル）：
.block-whis-icon._cart { ...; &::before { .icon__cart(30px, 20px, '1d9fbb'); ...; } }
実際、それがすべてです。 このような不純物を含むLESS-（SASS、スタイラスなど）ファイルは、スプライトを完全に置き換えます。
SVGを最適化およびエンコードするために、GULP、gulp-svgo、およびgulp-data-uri-streamプラグインを使用しました。 はい、この方法ではアイコンのサイズ、塗りつぶしとストロークの色のみを変更できますが、ほとんどの場合これで十分です。