Здесь появится картинка
Появится здесь
Появится здесь
Почему SVG в CSS не кодируют в Base64
Base64 нужен, когда двоичный файл (PNG, шрифт, PDF) приходится протащить через место, где допустим только текст. SVG двоичным не является, это обычная разметка, и в правило CSS её можно положить как есть. Достаточно экранировать символы, которые ломают значение url() : угловые скобки, кавычки, решётку в цветах. Именно это и делает кодировщик выше.
Выигрыш двойной. Base64 раздувает данные примерно на треть, а экранирование добавляет считаные проценты, так что строка выходит короче. И она остаётся читаемой: в экранированном SVG видно теги и цвета, так что поправить заливку можно прямо в CSS, не перекодируя картинку заново. Что такое Base64 и когда он всё-таки нужен, рассказано в статье про кодирование Base64.
Три способа подключить SVG
Инлайн-разметка, экранированная (или Base64) строка в CSS и внешний файл решают разные задачи, вот чем они отличаются:
| Способ | Размер | Кэшируется отдельно | Анимация |
|---|---|---|---|
| Инлайн SVG в HTML | Без накрутки | Нет, живёт в разметке страницы | Полная, доступны CSS- и JS-анимация, стили из документа |
| Base64/URL в CSS | +10–35% к весу файла | Нет, живёт в CSS-файле | Только то, что описано внутри самого SVG |
| Внешний .svg-файл | Без накрутки | Да, отдельным запросом | Только то, что описано внутри самого SVG |
Где пригодится встроенный SVG
- Иконки в псевдоэлементах. Стрелка или галочка через
contentзависит от шрифта и съезжает по базовой линии, а фон с SVG выглядит одинаково везде. Разбор самих псевдоэлементов есть в статье про псевдоклассы и псевдоэлементы CSS. - Мелкая декоративная графика. Паттерны, разделители, галочки в списках. Каждая такая картинка отдельным файлом даёт лишний сетевой запрос, а встроенная приезжает вместе со стилями.
- Экономия на запросах. Приём даёт заметный эффект именно на мелочи в единицы килобайт. Крупную иллюстрацию встраивать не стоит, она раздует CSS, который блокирует рендер, и попадёт в кеш вместе со стилями вместо собственного.