Перейти до вмісту
TextArray
100% локально

Кодер URL-адрес SVG

Перетворіть розмітку SVG на готовий для CSS URI даних і декодуйте URI даних назад у SVG.

Введення
Вихід

Кодер URL-адрес SVG

Вставте SVG і отримайте URI даних, який можна перенести прямо в CSS, готовий для фонового зображення або маски. Замість base64 кодер використовує компактний підхід до кодування URL-адреси: він замінює подвійні лапки на одинарні, згортає пробіли та кодує у відсотках лише ті символи, які дійсно потрібні, тому результат залишається коротким і зрозумілим для людини. Це зберігає вашу таблицю стилів меншою за blob base64 і дозволяє розпізнавати фігури всередині URI.

Три формати виводу охоплюють типові випадки. Правило CSS загортає URI даних у фонове зображення: url("…"); так що ви можете вставити цілу декларацію. Голий URI даних дає лише значення для спеціальної властивості, src <img> або маски SVG. Форма base64 створює безпечний UTF-8 data:image/svg+xml;base64 URI для інструментів або кроків побудови, які очікують такого кодування, включаючи SVG з emoji або вузлами тексту з акцентами.

Перемкніть напрямок на декодування, і інструмент поверне будь-яку з трьох форм назад до необробленої розмітки SVG. Вставте правило CSS, голий URI даних або base64, і воно витягне SVG, щоб ви могли редагувати піктограму, яка існує лише в таблиці стилів. Підрахунок показує вхідний розмір, вихідний розмір і відсоткову зміну, тож ви можете відразу побачити, чи кодування зменшилося, чи збільшилося піктограму.

Все працює у вашому браузері. Ваша розмітка SVG ніколи не завантажується, тому ви можете кодувати приватні значки, логотипи та внутрішні ресурси, не залишаючи їх на своєму пристрої.

FAQ

Навіщо використовувати кодування URL замість base64 для SVG?
SVG, закодований URL-адресою, зазвичай менший за base64 і залишається читабельним, тому ваш CSS легший, і ви все ще можете бачити розмітку. Base64 також пропонується для інструментів, які його потребують.
Які є три формати виводу?
Повне правило CSS із фоновим зображенням: url(...), значення URI голих даних і безпечний UTF-8 для даних URI base64. Виберіть необхідну таблицю стилів або компонент.
Чи можу я повернути URI даних у SVG?
так Встановіть напрямок для декодування та вставки правила CSS, URI голих даних або base64; інструмент витягує та повертає оригінальну розмітку SVG.
Чому моє введення має починатися з <svg?
Кодування перевіряє, чи вхідні дані виглядають як SVG, тому випадкова вставка не стає пошкодженим URI даних. Приймається розмітка, що починається з <svg або <?xml.
Чи завантажено кудись мій SVG?
Ні. Перетворення повністю виконується у вашому браузері, і ваша розмітка ніколи не залишає ваш пристрій.