Онлайн-конвертер SVG в Data URI позволяет быстро преобразовать SVG-код в формат Data URI для использования в CSS, HTML и inline-стилях. Инструмент способен очищать код от комментариев, xml артефактов и doctype, что делает его удобным для оптимизации загрузки страниц и уменьшения количества HTTP-запросов.
Конвертация SVG в Data URI часто используется для задания изображений в background-image, mask-image, content и других CSS-свойствах. Такой подход повышает производительность сайта и упрощает внедрение иконок и графики без дополнительных файлов.
Наш SVG-конвертер работает полностью онлайн — вам не нужно устанавливать программы или регистрироваться. Достаточно вставить SVG-код получить готовый Data URI для вставки в проект.
Немного о возможностях
Этот инструмент позволяет:
Кодировать только небезопасные символы;
Удалять лишние пробелы;
Удалять комментарии;
Удалять объявление XML;
Удалять объявление doctype;
Заменять двойные кавычки одинарными;
При необходимости добавлять пространство имен XML.
Интересные факты
Добавление небольшого SVG в качестве URI данных сохранит HTTP-запрос;
Встроенные файлы должны быть закодированы в URI, чтобы избежать конфликта с разделителями URL и протоколами;
Используйте encodeURIComponent для кодирования обычных текстовых файлов, используйте base64 для кодирования двоичных файлов;
SVG - это обычные текстовые XML-файлы, JPG/PNG/GIF - двоичные файлы;
При использовании кодировки Base64 размер файла увеличивается примерно на 30%, а кодировка URI может быть оптимизирована для повышения производительности;
SVG-файлы можно оптимизировать, особенно вручную;
SVG-файлы с кодировкой URI хранятся в архиве лучше, чем в base64, поскольку их содержимое более повторяющееся;
Включите сжатие SVG в формате gzip на вашем сервере;
Ограничьте использование встроенных файлов файлами небольшого размера ~1 КБАЙТ;
Вы почти никогда не должны встраивать файлы размером более 4 КБАЙТ;
Встраивание в CSS - это процедура, блокирующая рендеринг;
Встроенные SVG-файлы нельзя кэшировать;
Не встраивайте слишком много изображений, предпочитайте SVG-спрайты из кэшируемого внешнего SVG-файла;
HTTP 2 (параллельные ответы) сделает встраивание устаревшим (если вы намеревались сохранять только HTTP-запросы);
Встраивание небольших файлов по-прежнему удобно для объединения небольших изображений в один файл.