Следуйте этому рабочему примеру, а затем адаптируйте те же элементы управления к своему собственному изображению. Открыть Компрессор SVG.
Загрузите статический SVG или вставьте код
Откройте компрессор SVG и выберите файл SVG или попробуйте образец. Образец — это svg-compressor.svg, иконка орбиты размером 985 байт с viewBox 512 × 512, градиентной заливкой, заголовком и описанием. Используйте «Вставить SVG», если код уже находится в редакторе или буфере обмена.
Инструмент принимает до 20 файлов размером до 2 МБ каждый. Он анализирует полный документ SVG и удаляет стандартные декларации документа SVG без загрузки внешних файлов. Поврежденный XML, пользовательские декларации сущностей и внутренние подмножества документа отклоняются. Очень сложные файлы также могут достичь лимита элементов или времени обработки.
Этот рабочий процесс создает статическую векторную графику. Скрипты, обработчики событий, внешние ресурсы, анимация и встроенные растровые изображения удаляются. Превью оригинала уже очищено, поэтому его не следует интерпретировать как неограниченную визуализацию всех функций исходного файла.
Сохраните копию оригинала SVG. Интерактивная иллюстрация или SVG, содержащий фотографию, — это другой сценарий использования, отличный от статической векторной иконки.
Сравните результат и установите десятичную точность
Две панели превью показывают очищенный оригинал и оптимизированный результат. Размеры рядом с «Оригинал» и «Оптимизировано» и сводка в байтах сравнивают исходный файл с готовым результатом. Инструмент сообщает об увеличении, если оптимизация делает конкретный файл больше, вместо того чтобы обещать уменьшение каждый раз.
Откройте настройки и установите десятичную точность на 2 для примера. Точность варьируется от 1 до 5 и начинается с 3. Более низкие значения могут упростить числовую геометрию, но могут сместить тонкие кривые, небольшие зазоры или выровненные края. Увеличьте значение, если превью теряет важные детали.
Этот образец использует простую геометрию, поэтому точность 2 сохраняет узнаваемую форму. Другие SVG со сложными десятичными координатами могут измениться сильнее. Просмотр оптимизированного кода SVG показывает фактический текст, который будет скачан; это не отдельное представление оригинала.
Проверьте вектор при его предполагаемом размере отображения и при большем увеличении. Незначительное смещение может быть трудно заметить на маленьком эскизе.
Пример из этого руководства
Попробуйте образец: svg-compressor.svg, 985 байт, viewBox 512 × 512. Десятичная точность 2; включены сохранение доступных заголовков/описаний и сокращение внутренних идентификаторов; адаптивные размеры и читаемая выходная разметка отключены. Загружено SVG: 635 байт.
- Исходный SVG
- 985 байт
- Оптимизированный SVG
- 635 байт
- Измеренное уменьшение
- 35.5%
- Сохраненный контекст
- Заголовок, описание и viewBox 512 × 512
Сохраняйте описания и учитывайте внешние идентификаторы
Оставьте включенной опцию «Сохранять доступные заголовки и описания» для этого примера. Это сохраняет заголовок и описание SVG, удаляя при этом избыточные метаданные редактора и упрощая подходящий код. Это разные виды информации, и их не следует считать взаимозаменяемыми.
Опция «Сокращать внутренние идентификаторы» включена по умолчанию. Оптимизатор обновляет ссылки внутри SVG, но внешние CSS или JavaScript могут по-прежнему полагаться на исходные идентификаторы. Отключите эту опцию, если файл является частью более крупного приложения, которое именует свои элементы, и протестируйте готовый SVG в этом контексте.
Оставьте опции «Адаптивные размеры» и «Читаемый выходной код» выключенными для этого примера. «Адаптивные размеры» удаляют фиксированную ширину и высоту, когда координатный viewBox может обеспечить масштабируемость. «Читаемый выходной код» добавляет отступы и полезен для обслуживания, но может увеличить размер текста.
Для отдельного файла иконки очистка внутренних идентификаторов обычно проходит без проблем. Для внешне скриптованной диаграммы сохранение идентификаторов может быть важнее, чем несколько сэкономленных байт.
Скачайте и проверьте готовый вектор
Выберите «Старт», затем «Скачать». Готовый результат весит 635 байт по сравнению с исходным файлом в 985 байт: уменьшение на 35.5%. Его заголовок и описание сохранены, а отображаемое сравнение отрендерено из подлинного источника и скачанного SVG.
В статье оба вектора отображаются в 1,024 пикселях для четкой иллюстрации результата; их логический координатный размер остается 512 × 512. Большее превью не добавляет растровый контент в сохраненный SVG. Проверьте фактический вектор на целевой странице перед заменой существующего рабочего актива.
Один файл скачивается как SVG с исходным базовым именем. Пакет скачивается как один ZIP-архив с нумерованными суффиксами для дублирующихся имен файлов. Обработка происходит в браузере. Сохраните исходный файл, если хотите попробовать другие настройки оптимизации позже.
Экономия размера файла измеряется только по этому образцу. Уже оптимизированный SVG может показать незначительное улучшение или стать немного больше.
Часто задаваемые вопросы
Будет ли оптимизированный SVG выглядеть точно так же?
Оптимизатор стремится сохранить статический вид, но округление и удаление неподдерживаемого контента могут изменить файл. Сравните превью и протестируйте сохраненный SVG в вашем проекте.
На что влияет десятичная точность?
Она управляет точностью, используемой для геометрических данных и путей. Меньшие значения могут уменьшить размер, но могут исказить мелкие детали. По умолчанию используется 3.
Сохраняются ли заголовок и описание?
Да, по умолчанию. Оставьте включенным параметр «Сохранять доступные заголовки и описания», чтобы сохранить эти элементы SVG.
Почему отсутствуют скрипты или растровые изображения?
Этот инструмент создает статический векторный вывод. Скрипты, события, внешние ресурсы, анимация и встроенные растровые изображения намеренно удаляются при очистке.
Можно ли сохранить идентификаторы, на которые ссылается CSS?
Отключите «Сокращать внутренние идентификаторы», если внешний код зависит от конкретных идентификаторов. Проверьте оптимизированный файл на целевой странице перед заменой оригинала.
Загружаются ли файлы SVG для оптимизации?
Нет. Инструмент выполняет синтаксический анализ и оптимизацию в браузере и загружает результат локально.
Можно ли загрузить SVG с DOCTYPE?
Стандартная декларация документа SVG принимается и удаляется без получения внешнего идентификатора. Пользовательские декларации сущностей и внутренние подмножества документа отклоняются.
Сделайте вектор легче, получив результат, который можно проверить.
Попробуйте пример или используйте свой файл, и проверьте результат перед публикацией.
