Як вставити SVG у CSS

Q: Це експорт у PNG?

Ні. SVG лишається вектором усередині URI data:image/svg+xml. Для растра потрібен конвертер зображень.

Навіщо класти SVG у таблицю стилів

Маленькій іконці не завжди потрібен окремий файл і окремий запит. Data URI тримає малюнок усередині CSS, а браузер і далі малює його як вектор. Це інша задача, ніж експорт у PNG: форма лишається різкою на будь-якому розмірі, і окремий файл картинки викладати не треба.

Конвертер SVG у CSS перетворює розмітку SVG на такий URI просто в браузері. Ви вибираєте пресет: голий url(...), рядок background-image, повніше правило тла, маркер списку або клас. Нічого не відправляється на сервер.

Крок за кроком

Відкрийте конвертер SVG у CSS. Вставте SVG у поле або перетягніть файл .svg у зону завантаження. Для цього способу годиться коротка іконка. Велика ілюстрація роздує таблицю стилів.
Виберіть пресет у блоці «Пресети виводу». «Базовий Background Image» — зручний старт: одне оголошення background-image. «URL обгортка» дає лише url('...'), якщо решта правила у вас уже є. «Просунутий Background Image» додає повтор, позицію і розмір.

SVG вставлено в конвертер, вибрано базовий Background Image, поруч прев’ю іконки
Сторінка показує два прев’ю: іконку як тло CSS і вихідний SVG поруч. Нижче блок «Згенерований CSS код» тримає правило. «Копіювати CSS» кладе його в буфер. «Завантажити .css» зберігає файл.

Живе прев’ю SVG як тла і правило background-image з data URI
Вставте правило в елемент, на якому має бути іконка. Задайте цьому елементу ширину і висоту, інакше фоновій картинці нікуди малюватися.

Що змінює конвертер

Інструмент прибирає XML-оголошення і коментарі, згортає зайві пробіли і кодує розмітку для URL. Результат починається з data:image/svg+xml;charset=utf-8,. SVG лишається текстом усередині адреси, а не окремою растровою картинкою.

«Просунутий Background Image» потрібен, коли іконка має стояти в куті. Горизонталь і вертикаль приймають left, center або right і top, center або bottom, плюс зміщення. Від’ємне зміщення від правого краю стає позицією calc(100% - …). Розмір тла приймає contain, cover або довжину.

Поради

Тримайте SVG невеликим. Data URI їде разом із кожною таблицею стилів, куди він потрапив. Іконки на кілька рядків — відповідний розмір.
Розмір боксу задайте у своєму CSS. Згенерований рядок не ставить width і height.
Починайте з базового пресету. Зайві властивості тла легко додати потім, а прев’ю оновлюється одразу.
Дивіться вихідне прев’ю. Якщо SVG зламаний, ця панель покаже помилку замість малюнка.
Розмітка лишається в браузері. Вставлений логотип нікуди не надсилається.

Поширені запитання

Це експорт у PNG?

Ні. SVG лишається вектором усередині URI data:image/svg+xml. Для растра потрібен конвертер зображень.

З якого пресету почати?

З «Базовий Background Image», якщо потрібне тло в CSS. З «URL обгортка», якщо потрібне лише значення url(...). «CSS Bullets» пише правило list-style-image. «Всередині класу» обгортає тло в .svg-icon.

SVG завантажується на сервер?

Ні. Кодування йде в браузері.

Іконку можна поставити в кут?

Так. Виберіть «Просунутий Background Image», задайте горизонталь і вертикаль і додайте зміщення. Прев’ю і готове правило оновляться разом.

Інші інструменти

SVG у CSS: інструмент із цього гайда.
Favicon Generator: зібрати повний набір іконок з однієї картинки.
Конвертер одиниць CSS: перевести px у навколишній верстці.
Веб-інструменти: решта сервісів категорії.

Спробувати

Відкрийте конвертер SVG у CSS, вставте іконку і скопіюйте правило тла.