SVG в background-image для CSS
Встройте любой SVG в таблицу стилей закодированным data URI.
или перетащите файл / вставьте код ниже
Правило CSS
Результат появится здесь
Как это работает
- 1Вставьте код SVG или перетащите файл .svg.
- 2Инструмент кодирует его в URL внутри правила background-image.
- 3Скопируйте фрагмент CSS прямо в свою таблицу стилей.
Бесплатно, без регистрации и водяных знаков — всё работает локально в вашем браузере, поэтому файлы никогда не покидают компьютер.
Частые вопросы
Почему URL-кодирование, а не base64?
SVG в URL-кодировке меньше и остаётся читаемым в CSS; base64 тоже доступен, если он вам привычнее.
Когда стоит встраивать SVG в CSS?
Для небольших декоративных иконок и паттернов — это экономит HTTP-запрос. Крупную графику лучше держать отдельным файлом.