SVG у Base64
Вставте SVG, data URI чи URL зображення або перетягніть файл. Інструмент сам закодує дані, декодує SVG data URI назад у розмітку й підготує готовий для CSS результат.
Вхідний код
Вставте SVG або закодований data URI. Також можна перетягнути файл чи завантажити зображення за URL.
Основний результат
Закодований результат з'явиться тут автоматично
Вставте щось ліворуч — і перетворення почнеться автоматично
Як працює SVG у Base64
Кодуйте SVG-файли в Base64 data URI або декодуйте їх назад у розмітку. Отримуйте готовий CSS для вбудовування.
SVG у Data URI
Закодуйте будь-який SVG-файл чи розмітку в Base64 data URI для вбудовування в CSS, HTML чи JavaScript. Мінус один HTTP-запит на кожну іконку.
Декодування назад у SVG
Вставте data URI, закодований у Base64, і інструмент миттєво витягне оригінальну SVG-розмітку. Переглядайте й редагуйте вбудовані SVG без сторонніх інструментів.
Готовий CSS
Отримайте CSS-фрагмент background-image, який можна одразу вставити у вашу таблицю стилів. Результат закодовано для URL і оптимізовано за розміром.
Кілька способів введення
Вставте SVG-код, перетягніть файл .svg або введіть URL на SVG. Інструмент сам визначить тип вхідних даних і одразу їх перетворить.
Часті запитання
SVG, вбудований як Base64 data URI, не потребує окремого HTTP-запиту, і це може пришвидшити завантаження дрібних іконок та елементів інтерфейсу. Особливо корисно в CSS, де SVG-розмітку не можна вставити напряму.
Так, Base64 додає приблизно 33 % до розміру. Для зовсім маленьких SVG (до 1–2 КБ) це зазвичай виправдано зекономленим HTTP-запитом. Більші SVG ефективніше віддавати окремими файлами з правильним кешуванням.
Обидва варіанти можна використовувати як data URI. SVG, закодований для URL, лишає розмітку читабельною і зазвичай менший за Base64. Base64 краще підтримується старими поштовими клієнтами й у деяких рідкісних випадках. Інструмент дає обидва варіанти.
Так. Прості іконки, складні ілюстрації, анімовані SVG — закодувати можна будь-яку валідну SVG-розмітку. Але SVG із зовнішніми посиланнями (підключеними зображеннями чи шрифтами) можуть некоректно відображатися, коли вбудовані як data URI.