Кодуйте розмітку SVG як URL-кодований чи base64 data URI з готовими до вставки рядками background-image для CSS та <img>. Необов'язкова мінімізація.
— результат з’явиться тут —
— результат з’явиться тут —
— результат з’явиться тут —
Про цей інструмент
Вставте сиру розмітку SVG і отримайте data URI, який можна одразу вставити в CSS чи HTML. Він створює два кодування, і все генерується у вашому браузері, тож нічого не завантажується.
URL-кодований вивід замінює подвійні лапки на одинарні, запускає encodeURIComponent, а тоді відновлює кілька безпечних символів (пробіл, двокрапка, слеш, знак рівності), щоб зберегти його компактним і читабельним для людини. Base64-вивід кодує SVG у UTF-8 і пропускає його через btoa, даючи data:image/svg+xml;base64,… . Байтове порівняння показує, яке кодування менше; для більшості іконок перемагає URL-кодована форма.
Увімкніть мінімізацію, щоб прибрати коментарі й згорнути пробіли між тегами перед кодуванням. Скопіюйте рядок background-image для CSS чи рядок <img src> для HTML. Зверніть увагу, що лапки всередині SVG нормалізуються до одинарних, тож data URI можна безпечно обгорнути в подвійні лапки.
Поширені запитання
URL-кодування чи base64 — що використовувати?
URL-кодування зазвичай менше й лишається читабельним, що допомагає в налагодженні. Base64 непрозоріший, але універсально приймається; порівняння розмірів підкаже, що менше тут.
Чому мої подвійні лапки змінилися на одинарні?
Лапки атрибутів перетворюються на одинарні, щоб увесь data URI міг сидіти всередині url("…") чи src="…" в подвійних лапках без екранування. Обидва дійсні в SVG.
Чи змінює мінімізація вигляд SVG?
Ні. Вона лише прибирає коментарі й згортає пробіли між тегами й усередині них; відрендерений вектор ідентичний, просто менший.
Чи завантажується мій SVG кудись?
Ні. Кодування виконується повністю у вашому браузері за допомогою encodeURIComponent і btoa; розмітка ніколи не залишає ваш пристрій.