Рассуждение

Я объединяю небольшие минимизированные SVG (значки) с моим CSS через метод LESS data-uri, чтобы уменьшить HTTP-запросы, аналогичные назначению шрифтов-иконок, таких как Octicons или старые CSS-спрайты.

Однако LESS кодирует их в Base64.
Это неоптимально в случае SVG. , который может быть URI данных в кодировке UTF-8 (пример).

Есть три причины, почему это неоптимально:

1: Base64 глуп для текста

Цель Base64 — кодировать двоичные данные, используя всего 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

Даже после сжатия он все еще примерно на 35% больше.

3: Он игнорирует некоторые бесплатные источники избыточности.

Подумайте о примере width выше. Каждый SVG будет иметь эту подстроку, и если вы встроите SVG в CSS, у вас, вероятно, будет это ключевое слово где-то еще (или в других), от которого gzip может быть полезно (потому что именно так Кодирование Хаффмана работает), но не в том случае, если оно скрыто Base64.

Вопрос

Как встроить SVG в LESS как data: URI, используя UTF-8 вместо Base64?

Я могу представить тысячу способов сделать это с помощью инструментов сборки, таких как Grunt, но это нарушает мой рабочий процесс, потому что я не буду возможность делать такие вещи, как style: include:less all.less из представления Jade (я делаю это в процессе разработки) или даже просто @import 'images.less'; из меньше файла.