SVG в Data URI

Конвертор SVG в Data URI преобразует SVG-разметку в оптимизированную строку data URI, которую можно встроить непосредственно в атрибуты img src HTML, свойства CSS background-image или переменные JavaScript без необходимости отдельного HTTP-запроса для SVG-файла. URL-кодированные data URI обычно предпочтительнее Base64 для SVG, поскольку они компактнее и остаются частично читаемыми в инструментах разработчика браузера. Инструмент опционально минифицирует SVG-разметку перед кодированием для уменьшения итогового размера data URI.

Все инструменты категории Конвертер

Как использовать

Вставьте SVG-код в область ввода, и data URI мгновенно генерируется в панели вывода. Выбирайте между URL-кодированием и Base64 с помощью переключателя формата: URL-кодирование даёт более компактный результат для большинства SVG, тогда как Base64 безопаснее для SVG-контента, содержащего нестандартные символы, которые могут нарушить разбор атрибутов HTML. Скопируйте полную строку data URI и вставьте её в значение CSS background-image url(), атрибут HTML img src или константу JavaScript.

Примеры использования

• •Встраивание SVG-иконок как CSS background-image data URI в таблицы стилей компонентов для устранения лишних HTTP-запросов к небольшим векторным ресурсам
• •Встраивание логотипов компании и маркетинговых иллюстраций как data URI в шаблоны HTML-писем, где загрузка внешних изображений заблокирована почтовыми клиентами
• •Конвертация SVG-фавиконов, иконок приложений и курсоров в data URI для встроенного встраивания в одностраничные HTML-документы и расширения браузера
• •Встраивание критического SVG-контента выше линии сгиба как data URI для устранения блокирующих рендеринг сетевых запросов при начальной загрузке страницы
• •Назначение SVG-масок, паттернов и фильтров как data URI в CSS для самодостаточных, переносимых таблиц стилей компонентов