SVG URL кодировщик

Почему SVG в CSS не кодируют в Base64

Base64 нужен, когда двоичный файл (PNG, шрифт, PDF) приходится протащить через место, где допустим только текст. SVG двоичным не является, это обычная разметка, и в правило CSS её можно положить как есть. Достаточно экранировать символы, которые ломают значение url() : угловые скобки, кавычки, решётку в цветах. Именно это и делает кодировщик выше.

Выигрыш двойной. Base64 раздувает данные примерно на треть, а экранирование добавляет считаные проценты, так что строка выходит короче. И она остаётся читаемой: в экранированном SVG видно теги и цвета, так что поправить заливку можно прямо в CSS, не перекодируя картинку заново. Что такое Base64 и когда он всё-таки нужен, рассказано в статье про кодирование Base64.

Где пригодится встроенный SVG

• Иконки в псевдоэлементах. Стрелка или галочка через content зависит от шрифта и съезжает по базовой линии, а фон с SVG выглядит одинаково везде. Разбор самих псевдоэлементов есть в статье про псевдоклассы и псевдоэлементы CSS.
• Мелкая декоративная графика. Паттерны, разделители, галочки в списках. Каждая такая картинка отдельным файлом даёт лишний сетевой запрос, а встроенная приезжает вместе со стилями.
• Экономия на запросах. Приём даёт заметный эффект именно на мелочи в единицы килобайт. Крупную иллюстрацию встраивать не стоит, она раздует CSS, который блокирует рендер, и попадёт в кеш вместе со стилями вместо собственного.