SVG для кодирования URI данных

• Почему?
• Что это?
• Факты

Почему?

Сохраните запрос сервера, вставив содержимое SVG прямо в код. Закодируйте содержимое SVG как data URI и используйте его в качестве источника изображения. SVG будет отображен прямо из кода без запроса к серверу.

Что это?

Этот инструмент позволит:

• Кодируйте только небезопасные символы
• Удалите лишние пробелы
• Удалите комментарии
• Удалите объявление 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-запросы)
• Встраивание небольших файлов по-прежнему удобно для объединения небольших изображений в один файл