Конвертер SVG в фон CSS: код data URI CSS
Вставьте или перетащите SVG, чтобы создать готовый к использованию CSS background-image с data URI. URL-кодирование — предпочтительный вариант для минимального, читаемого результата, также доступен Base64. Выберите стиль кавычек, примените лёгкую минификацию SVG, задайте background-size, background-repeat и background-position, затем проверьте живой предпросмотр.
Конвертер SVG в фон CSS превращает разметку SVG в готовое к использованию объявление CSS background-image, содержащее data URI. Вставьте или перетащите SVG, чтобы создать вывод, затем используйте живой предпросмотр для его проверки. Это полезно, когда нужно использовать SVG как фон CSS, а не ссылаться на него как на отдельный файл изображения.
Конвертер предлагает URL-кодирование и Base64 для data URI. URL-кодирование предпочтительно для минимального, читаемого результата, а Base64 доступен как альтернатива. Также можно выбрать стиль кавычек, применить лёгкую минификацию SVG и задать background-size, background-repeat и background-position. Эти параметры помогают сформировать сгенерированный CSS и предпросмотр, не меняя основную цель преобразования.
SVG — это векторный формат изображений на основе разметки, а CSS используется для описания правил оформления веб-страниц. Data URI представляет контент внутри URI, позволяя содержимому SVG появляться в значении CSS background-image. Преобразование между этими представлениями помогает, когда нужно поместить SVG в таблицу стилей как фон и настроить его отображение свойствами фона CSS.
Конвертер работает полностью в вашем браузере: ваш ввод обрабатывается на вашем устройстве и не отправляется на сервер. Он также работает офлайн после загрузки страницы, так что вы можете преобразовывать SVG без активного подключения. Разработчики и DevOps-инженеры могут использовать его для быстрых преобразований за рабочим столом или на другой машине, ничего не устанавливая локально.
Шаг 1: Вставьте или перетащите ваш SVG в область ввода. Конвертер использует этот контент для создания data URI CSS background-image.
Шаг 2: Выберите URL-кодирование или Base64 для data URI. URL-кодирование предпочтительно для минимального, читаемого результата.
Шаг 3: Настройте доступные параметры, включая стиль кавычек и лёгкую минификацию SVG. Задайте background-size, background-repeat и background-position по необходимости.
Шаг 4: Проверьте живой предпросмотр, чтобы оценить результат, затем скопируйте сгенерированный CSS для использования в вашем проекте.
Пример использования: Преобразуйте SVG в CSS background-image для таблицы стилей без установки локального инструмента.
Пример использования: Подготовьте фоновую графику, работая на машине, где нет вашей обычной среды разработки.
Пример использования: Преобразуйте внутренний SVG, не вставляя его содержимое в сторонний сервис.
Пример использования: Сравните data URI с URL-кодированием и Base64 при выборе способа представления SVG в CSS.
Пример использования: Настройте background-size, background-repeat и background-position, затем используйте живой предпросмотр для проверки результата.
Пример использования: Примените лёгкую минификацию SVG при подготовке SVG-фона для правила CSS.