Как пользоваться: SVG в CSS конвертер
- Вставьте SVG-код, откройте файл
.svgили загрузите пример. - Оставьте включённой опцию Очистить SVG, чтобы удалить комментарии, метаданные и служебные атрибуты редакторов, и выберите URL-кодирование или Base64.
- Проверьте оба предпросмотра: обычное фоновое изображение и вариант с одноцветной маской.
- Скопируйте data URI или готовое CSS-правило и вставьте его в свою таблицу стилей.
Что такое data URI для SVG?
Data URI встраивает файл прямо в CSS вместо ссылки на него: background-image: url("data:image/svg+xml,…"). Для небольших иконок, разделителей, узоров и собственных чекбоксов это экономит HTTP-запрос, исключает мерцание отсутствующих изображений и держит ресурс рядом со стилями, которые его используют.
URL-кодирование или Base64
SVG — это текст, поэтому Base64 для него не нужен. Base64 увеличивает любой файл примерно на 33% и превращает его в нечитаемый набор символов, который плохо сжимается gzip или Brotli. SVG с URL-кодированием остаётся близким к исходному размеру и читаемым. Экранировать нужно лишь несколько символов:
| Символ | Кодировка | Зачем |
|---|---|---|
# | %23 | Иначе начинает фрагмент URL — цвета вроде #fff ломают изображение. |
% | %25 | Сам символ экранирования. |
< > | %3C %3E | Рекомендуется для совместимости со строгими парсерами. |
" | ' или %22 | Кавычки атрибутов заменяются на одинарные, чтобы CSS мог заключить URI в двойные кавычки. |
Base64 используйте только тогда, когда инструмент или фреймворк не принимает ничего другого. Карточки с размерами под предпросмотром показывают оба результата, чтобы вы могли их сравнить.
Перекрашиваемые иконки с mask-image
SVG, используемый как фоновое изображение, отрисовывается изолированно: CSS страницы не может изменить его заливку, а currentColor внутри него не следует за цветом вашего текста. Сниппет mask-image решает эту задачу: SVG используется только как трафарет и закрашивается через background-color: currentColor, поэтому одна иконка работает в любом цвете, при наведении и в тёмной теме. Строка -webkit-mask по-прежнему нужна для некоторых браузеров.
Очистка и ограничения
Очистка удаляет XML-декларацию, комментарии, <metadata>, <title> (в фоне он бесполезен), атрибуты Inkscape, Sodipodi и Sketch, а также лишние пробелы. Если атрибут xmlns отсутствует, он добавляется, так как без него браузер не отобразит изображение. Встраивайте только небольшие SVG (несколько килобайт): большие data URI раздувают каждый загружаемый CSS-файл и не кэшируются отдельно. Для сложной графики лучше подключить файл по ссылке. Нужен React-компонент вместо CSS? Используйте SVG в JSX; для растровых изображений см. Изображение в Base64.
Использование в Webflow
Панель Backgrounds в Webflow работает с загруженными изображениями, поэтому вставьте сгенерированное правило в тег <style> внутри элемента Embed или в пользовательский код страницы/сайта, а затем назначьте своему элементу соответствующий класс (например, icon).
Также ищут как: svg data uri, svg в data url, url кодирование svg, svg в base64, mask-image.
Инструменты, которые хорошо сочетаются с SVG в CSS конвертер
- Кодирование и декодирование URL — Выполняйте процентное кодирование текста для безопасного использования в URL, декодируйте закодированные строки обратно в читаемый текст и разбирайте любой URL на части и параметры запроса.
- Base64 кодер / декодер — Преобразуйте текст в Base64 и обратно с полной поддержкой UTF-8 (акценты, эмодзи), включите URL-safe Base64 или перетащите файл, чтобы получить его строку Base64 или data URI.
- Минификатор CSS — Вставьте таблицу стилей, чтобы мгновенно уменьшить её размер.
- Генератор CSS-анимаций — Создавайте CSS-анимации на таймлайне ключевых кадров.
Часто задаваемые вопросы
Почему не отображается мой SVG data URI?
# (в цветах вроде #fff), отсутствующий атрибут xmlns="http://www.w3.org/2000/svg" или непарные кавычки между url("…") в CSS и атрибутами SVG. Этот инструмент исправляет все три проблемы.Что лучше для SVG в CSS: URL-кодирование или Base64?
Можно ли изменить цвет фонового SVG-изображения через CSS?
mask-image и задайте background-color, который можно менять при наведении или в тёмной теме.Нужно ли указывать charset=utf-8 в data URI?
data:image/svg+xml,.