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

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

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

Введення
Вихід
Пов'язані інструменти
Кодування та декодування URLКодування та перетворення
Кодування та декодування Base64Кодування та перетворення
Мініфікатор CSSІнструменти розробника
Перетворювач кольорівІнструменти розробника
ключ i18n дифІнструменти розробника
Конвертер TOML в JSONІнструменти розробника
Кодер 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 або вузлами тексту з акцентами. Опція типу MIME відкриває той самий кодувальник для будь-якого вмісту: виберіть text/plain, text/html, text/css, application/json чи інший тип, і вставлене стане data URI цього типу. Лише image/svg+xml стискає пробіли й замінює подвійні лапки на одинарні — ці два прийоми вкорочують розмітку, але псують звичайний текст і JSON. Незображувальні типи ще й обходяться без обгортки background-image і повертають голий url("…").
Перемкніть напрямок на декодування, і інструмент поверне будь-яку з трьох форм назад до необробленої розмітки SVG. Вставте правило CSS, голий URI даних або base64, і воно витягне SVG, щоб ви могли редагувати піктограму, яка існує лише в таблиці стилів. Підрахунок показує вхідний розмір, вихідний розмір і відсоткову зміну, тож ви можете відразу побачити, чи кодування зменшилося, чи збільшилося піктограму. URI може прийти й загорнутим у HTML-тег <img> або <link>, із явним набором символів у заголовку.
Все працює у вашому браузері. Ваша розмітка SVG ніколи не завантажується, тому ви можете кодувати приватні значки, логотипи та внутрішні ресурси, не залишаючи їх на своєму пристрої.
FAQ
Навіщо використовувати кодування URL замість base64 для SVG?
SVG, закодований URL-адресою, зазвичай менший за base64 і залишається читабельним, тому ваш CSS легший, і ви все ще можете бачити розмітку. Base64 також пропонується для інструментів, які його потребують.
Які є формати виводу?
Чотири: правило CSS, голий data URI, HTML-тег <img> та HTML-тег <link> — rel=icon для SVG, rel=stylesheet для CSS. Відсоткове або Base64-кодування діє на всі чотири, а параметр набору символів записує charset у заголовок.
Чи можу я повернути URI даних у SVG?
так Встановіть напрямок для декодування та вставки правила CSS, URI голих даних або base64; інструмент витягує та повертає оригінальну розмітку SVG.
Чому моє введення має починатися з <svg?
Кодування перевіряє, чи вхідні дані виглядають як SVG, тому випадкова вставка не стає пошкодженим URI даних. Приймається розмітка, що починається з <svg або <?xml.
Чи завантажено кудись мій SVG?
Ні. Перетворення повністю виконується у вашому браузері, і ваша розмітка ніколи не залишає ваш пристрій.