推論
Octiconsや Ye Olde CSS Spritesなどのアイコンフォントの目的と同様の HTTP リクエストを削減するために、LESS のメソッドを介して小さな縮小SVG (アイコン) を CSS にバンドルしています。data-uri
ただし、LESS はBase64でエンコードします。
これは、UTF-8 でデータ URI を指定できる SVG の場合には最適ではありません ( example )。
これが最適ではない理由は 3 つあります。
1: Base64 はテキストには適していません
Base64 の目的は、1 バイトあたり 6 ビットのみを使用してバイナリ データをエンコードし、テキスト ファイルに安全に埋め込むことです。これは PNG と JPEG には最適ですが、理由もなくテキスト ファイルが 33% 大きくなります。「これでいいのか」と思っている方gzipはご注意ください。
2: Base64 でテキストをエンコードするgzipと、効果が大幅に低下します
この理由を理解するには、次のことを考慮してください。
btoa('width') === 'd2lkdGg='
btoa(' width') === 'IHdpZHRo'
btoa(' width') === 'ICB3aWR0aA=='
実際の例として、実際の SVGを使って実験してみましょう。
$ wc -c *
68630 tiger.svg
25699 tiger.svg.gz
91534 tiger.txt
34633 tiger.txt.gz
gzip した後でも、まだ ~35% 大きくなっています。
3: 冗長性のいくつかの自由なソースを無視します
width上記の例について考えてみてください。すべての SVG にはこの部分文字列があり、SVG を CSS に埋め込む場合、おそらくこのキーワードは別の場所 (または別の場所) にあるgzip可能性があります。 Base64。
質問
data:Base64 の代わりに UTF-8 を使用してSVG を URI として LESS に埋め込むにはどうすればよいですか?
Gruntなどのビルド ツールを使用してこれを行うには何千もの方法を想像できますstyle: include:less all.lessが、Jadeビュー (開発中にこれを行います) や@import 'images.less';、より少ないファイルからのようなことを行うことができないため、ワークフローが中断されます。 .