SVGView

SVG в CSS фон

Превращайте SVG в готовые к использованию фоны для кнопок, бейджей и UI паттернов. Копируйте и вставляйте мгновенно. Открывайте SVG файлы онлайн и конвертируйте сразу.

Добавьте SVG-файл перетаскиванием

или нажмите, чтобы выбрать, или вставьте код SVG

Только .svg файлы
Вставить код SVG с помощью Ctrl+V / Cmd+V

Почему стоит использовать инструмент SVG в CSS?

Сниппеты background-image

SVG в CSS генерирует URL для background-image из SVG мгновенно. Это экономит время, когда нужны переиспользуемые CSS для иконок, паттернов или UI декораций. Это также держит assets близко к стилям, которые ими управляют.

Вывод встроенных стилей

SVG в CSS предоставляет сниппеты встроенных стилей для быстрых прототипов и CMS блоков. Вставляйте вывод прямо в HTML или JSX и держите макеты легкими. Это полезно, когда нельзя добавить новые файлы или настроить шаг сборки.

Цвета, дружественные к темам

SVG в CSS работает с currentColor, чтобы SVG наследовали CSS цвет. Это делает вывод SVG в CSS совместимым со светлых и темных темами. Используйте CSS переменные для маппинга цветов к вашим токенам дизайна.

Готово к копированию

SVG в CSS обрабатывает кодирование, чтобы вы могли копировать URL без ручного экранирования. Это предотвращает ошибки с символами как #, % или кавычки в CSS. Это также избегает ошибок, когда SVG содержат градиенты или ID.

Быстрая локальная обработка

SVG в CSS работает локально и дает мгновенные результаты. Это держит assets приватными и избегает задержек при загрузке во время разработки. Локальная обработка быстрее при итерации над мн��жеством вариаций дизайна.

Приватность прежде всего

Инструмент держит файлы в браузере, поэтому ничего не загружается. Это безопасно для клиентской работы и внутренних дизайн систем. Это также хорошо работает в закрытых сетях.

Как конвертировать SVG в CSS фон

1

Загрузите ваш SVG

Перетащите файл или вставьте разметку для начала. SVG в CSS загружает исходник локально и подготавливает его к кодированию. Вы можете вставлять экспорт напрямую из дизайн инструментов. Открывайте SVG файлы онлайн и конвертируйте их сразу.

2

Сгенерируйте CSS сниппет

Запустите SVG в CSS для создания готового к использованию data URI. Выберите Base64 или URL кодировку в зависимости от размера файла и читаемости. URL кодировка часто короче для иконок с простыми путями.

3

Вставьте в CSS

Вставьте сниппет в background-image: url(...). Вывод SVG в CSS также работает во встроенных стилях и CSS переменных. Вы можете назначить его CSS пользовательскому свойству для переиспользования между компонентами.

SVG в CSS фон FAQ

Как использовать SVG как CSS фон онлайн?
Используйте SVG в CSS для конвертации файла в data:image/svg+xml URL, затем вставьте его в background-image: url(...). Это держит assets встроенными и избегает дополнительных сетевых запросов. Это полезно для маленьких иконок или паттернов, которые выигрывают от упаковки с CSS.
SVG в CSS: Base64 или URL-кодированный вывод?
SVG в CSS поддерживает оба. Base64 широко совместим, а URL кодировка короче для простых SVG и легче читается в контроле исходников. Если нужно редактировать SVG позже, URL кодировку легче инспектировать.
Нужно ли экранировать специальные символы для SVG CSS?
Нет. SVG в CSS обрабатывает кодирование для символов как #, % и кавычки. Это предотвращает невалидный CSS и экономит время при копировании и вставке. Это также избегает сломанных URL, когда SVG содержат ID или clip пути.
Можно ли использовать currentColor в CSS?
Да. SVG в CSS работает с currentColor, чтобы SVG наследовал CSS цвет от родительского элемента. Это полезно для темизации и дизайн токенов. Вы также можете комбинировать это с CSS переменными для гибких палитр.
Мой SVG загружается на сервер?
Нет. SVG в CSS работает локально в вашем браузере, поэтому файлы никогда не покидают ваше устройство. Это безопасно для приватных assets и клиентской работы. Локальная обработка также избегает ограничений по размеру файла, налагаемых инструментами загрузки.
Есть ли ограничение по размеру файла?
Вы можете обрабатывать SVG файлы до 10MB. Большие SVG создают длинные CSS строки, поэтому сначала рассмотрите оптимизацию, чтобы таблицы стилей оставались читаемыми. Для сложных иллюстраций рассмотрите использование обычного файла вместо data URI.
Стоит ли оптимизировать перед конвертацией?
Да. SVG в CSS лучше всего работает с оптимизированными файлами, потому что меньшие SVG производят более короткий CSS. Сначала запустите очистку или оптимизацию, затем конвертируйте. Это держит ваш CSS компактным и улучшает поведение кэша.
Можно ли использовать вывод в CSS переменных?
Да. Вывод SVG в CSS можно хранить в CSS переменных и переиспользовать между темами. Это упрощает замену фонов без редактирования множества правил. Используйте описательные имена переменных, чтобы таблицы стилей оставались поддерживаемыми.
SVG в CSS бесплатен для использования без скачивания?
Да. SVG в CSS бесплатен для использования в вашем браузере. Скачивание или установка не требуются.
Нужен ли аккаунт для использования SVG в CSS?
Нет. SVG в CSS работает мгновенно в браузере без регистрации, а файлы остаются локальными.

Связанные SVG инструменты

Используйте SVG в CSS с этими инструментами для оптимизации, перекрашивания или минификации assets перед встраиванием. Чистый исходник дает более короткие и надежные CSS строки.

SVG в Data URI

Генерируйте Base64 или URL-кодированные SVG data URI вместе с выводом SVG в CSS. Это полезно, когда хотите сравнить длину кодировок.

Открыть инструмент

SVG оптимизатор

Сжимайте SVG перед SVG в CSS, чтобы уменьшить длину CSS строки. Меньшие строки легче поддерживать в контроле исходников.

Открыть инструмент

Замена цвета SVG

Используйте currentColor и токены темы перед конвертацией SVG в CSS. Это держит фоновые assets согласованными с вашей дизайн системой.

Открыть инструмент

SVG минификатор

Уменьшайте пробелы, чтобы вывод SVG в CSS оставался компактным в таблицах стилей. Компактные строки легче встраивать и копировать.

Открыть инструмент

Связанный SVG-блог

Продолжите чтение практических материалов о рабочих процессах SVG, устранении проблем и продакшене.