Конвертор от SVG в CSS фон – data URI код
Поставете или пуснете 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, без да поставяте съдържанието му в услуга на трета страна.
Случай на употреба: Сравнете URL-кодирани и Base64 data URI, когато избирате как да представите SVG в CSS.
Случай на употреба: Настройте background-size, background-repeat и background-position, след което използвайте визуализацията на живо, за да проверите резултата.
Случай на употреба: Приложете леко SVG минифициране, докато подготвяте SVG фон за CSS правило.