Как сжать файл svg для веб-сайта

Обновлено: 21.11.2024

Многие интерфейсные дизайнеры используют SVG, потому что они позволяют ускорить загрузку страницы. Но иногда сложные файлы SVG могут иметь большой размер. В этой статье я расскажу о всех возможных способах удаления байтов из вашего SVG, чтобы вы могли ускорить загрузку своего веб-сайта.

Прежде чем мы углубимся в мельчайшие детали удаления байтов, давайте рассмотрим быстрое решение, которое работает с множеством простых вариантов использования.

Предположим, у вас есть несколько готовых значков, код SVG которых невелик, а экономия будет ограничена. Я бы просто взял SVG OMG и покончил с этим. Вы вставляете свой код SVG в инструмент, и он автоматически удаляет код доступа, используя некоторые из методов, подробно описанных ниже. Это может занять значок размером от 0,5 КБ до 0,4 КБ: экономия 20%, и вся эта работа выполняется менее чем за минуту. Звучит как победа.

Если у вас есть файл большего размера или вас интересует оптимизация Hyper SVG, давайте рассмотрим различные способы, которыми мы можем избавиться от этих байтов.

Инструменты, которые я использую для уменьшения размера файла SVG

Illustrator
Полезные инструменты и параметры меню: инструмент сглаживания, упрощенный контур, составной контур
Редактор кода
Иногда лучше оптимизировать вручную
Astute Graphics
Плагин VectorFirstAid (плагин премиум-класса), начните с бесплатной 7-дневной пробной версии
SVG OMG
Помогает в общем процессе сокращения байтов
Редактор путей SVG
Уменьшение или преобразование абсолютных и относительных путей

Каждый возможный способ уменьшить размер файла SVG

Оптимизация SVG может быть довольно сложной. Есть много соображений, потому что SVG состоят из многих элементов, и процесс создания векторов не всегда учитывает, что на выходе будет браузер.

Я упорядочил список на основе методов, которые я считаю эффективными и которые, скорее всего, помогут уменьшить размер файла. Чем дальше вы спускаетесь по списку, тем меньше вероятность того, что метод будет полезен или потеряет значимые байты из вашего файла. Но мы пытаемся продумать все возможные тактики, чтобы уменьшить любое количество персонажей, даже если метод сработает только в редких случаях. Включено все возможное.

Используйте меньше точек привязки
Каждая точка привязки добавляет несколько символов на ваш путь. Вы часто можете пропустить опорную точку без особой визуальной разницы. Программное обеспечение Vector больше заботится о точности и часто добавляет много опорных точек, даже в ситуациях, когда они не нужны. Визуальная очистка опорных точек в вашем векторном программном обеспечении намного проще, чем после сохранения SVG. После сохранения SVG поиск избыточных точек в коде подобен поиску иголки в стоге сена. Я пользуюсь инструментами Smooth и Pen в Illustrator, чтобы вручную упростить контуры. Для сложных форм и ситуаций, когда слишком много опорных точек для ручной обработки, я использую меню упрощенного пути или даже лучше: у Astute Graphics есть инструмент для автоматической очистки бесполезных опорных точек, который упрощает этот процесс.

Удалите любой элемент или привязки, которые находятся вне поля зрения
Элементы могут быть невидимыми, находиться за пределами области просмотра и полностью скрываться за другими элементами. Во всех этих случаях, если эти элементы SVG ничего не добавляют визуально, они увеличивают размер файла без всякой причины. Эта идея также применима к комментариям в вашем коде. Например, Illustrator автоматически добавляет заметки об экспорте в файлы SVG, которые увеличивают размер файла SVG. Удалите этот закомментированный код!

Упрощение скрытых участков
Если часть пути находится за другим элементом или за пределами области просмотра, удалите невидимые кривые и привязки. В приведенном ниже примере мы не только смогли безопасно удалить точку привязки, но и удалили инструкцию кривой между этим разделом.

Округление
Если вы используете Adobe Illustrator, Inkscape или любую другую векторную программу для создания SVG, вы заметите, что вывод часто изобилует большими десятичными знаками, такими как 300,78000001. Отрезание значительной части этих десятичных знаков часто не приводит к заметной разнице в изображении при рендеринге в браузере. Возможно, вам придется провести некоторые пробы и ошибки, чтобы получить хороший баланс между упрощением и точностью. В приведенном выше примере я бы с уверенностью удалил «000001» вручную. Но я мог бы поэкспериментировать с удалением цифр, пока не округлю до 301. Используя SVG OMG, вы можете контролировать уровень точности, который контролирует, сколько десятичных знаков используется в ваших атрибутах SVG. Я нахожу это проще, чем выполнять эту работу вручную или выбирать количество знаков после запятой в диалоговом окне при первом сохранении SVG. Вы можете уменьшить потребность в округлении, используя приемы проектирования, такие как размещение опорных точек на целых пикселях.

Объединить отдельные пути
Если у вас есть несколько путей, которые наложены друг на друга и имеют одинаковый стиль, вы можете объединить их в один путь. В иллюстраторе выберите все фигуры и выберите «Объект» > «Составной контур» > «Создать». С помощью кода вы можете разместить несколько путей в атрибуте d="" одного элемента.

Используйте классы CSS для применения сложных стилей
Если вы применяете несколько атрибутов к одному элементу, символы могут складываться. Однако в тот момент, когда вы применяете этот сложный класс к нескольким элементам, вы начинаете видеть экономию. Однако имейте в виду, что CSS не работает внутри URI данных.

Группируйте элементы с одинаковыми стилями
Если у вас есть три элемента с фиолетовой заливкой, вы можете просто поместить их в групповой тег, и вам понадобится только один атрибут заливки, чтобы воздействовать на все три элемента. Это может работать для большинства атрибутов и даже для классов CSS.

Использовать элемент для повторяющихся фигур
Элемент создает копию определенного элемента или группы элементов. Все, что вам нужно, это идентификатор, а затем вы можете изменять атрибуты или преобразовывать (масштабировать, вращать и переводить). Чем больше дубликатов, тем больше экономия. Обратите внимание, что специально для Illustrator атрибут должен читаться как xlink:href="" вместо простого href="" для правильной работы.

Используйте идеальную форму
Пути, как правило, лучше всего подходят для рисования, но когда дело доходит до некоторых округлых форм, рассмотрите возможность использования обычных вместо них. Путь, скорее всего, будет лучше, чем многоугольник или прямоугольный элемент, но редко будет короче круга.

Простые опорные точки
Если ваша опорная точка имеет кривую, для описания отдельной кривой потребуется 4–7 чисел. Сравните это с точкой привязки без изгибов, которой нужны только две координаты, и вы быстро поймете, что это сокращает количество инструкций на 50% и более. Прямые линии с одинаковыми координатами X или Y используют только одно число. Это связано с тем, что если вы используете инструкцию пути, которая полностью выровнена по горизонтали или вертикали, вашему пути потребуется только одно число для этой инструкции пути.

Объединить опорные точки
Некоторые из инструментов, перечисленных в методе «меньше опорных точек», решают эту проблему, но не в 100% случаев, поэтому эта проблема заслуживает упоминания. Программное обеспечение Vector может создавать странные странности. Я видел случаи, когда есть две точки привязки, одна над другой. У одного есть частичная кривая, ведущая к координате, а другой контролирует кривую, уходящую от координаты. Это должно быть объединено в одно.

Вот как соединить эти две точки привязки в одну привязку:

Сначала убедитесь, что они имеют одни и те же координаты. Выберите их обоих и нажмите CTRL+ALT+J, чтобы поместить их в одну координату (выберите обе для оси), которая рассчитывается по их среднему значению.
Объедините всю фигуру (путь), чтобы убрать те точки привязки, которые теперь точно перекрывают друг друга. Это должно превратить эти два якоря в один, сохранив при этом кривую.

Разумно выбирайте между заливкой и обводкой
Есть ситуации, когда лучше всего подойдет заливка, а в других случаях обводка будет производить меньше кода. Если вы наметите обводку, инструкция пути, скорее всего, создаст почти вдвое больше опорных точек. Но иногда невозможно добиться конкретного дизайна с помощью штриха SVG, так как возможности ограничены. Выбор правильного режима поможет вам уменьшить размер файла.

Удалите ненужные запятые и пробелы
Хотя запятые и лишние пробелы могут сделать большой двоичный код более читаемым для людей, они часто не нужны. Например, с путями вам никогда не нужен пробел рядом с буквой, а их координаты не нуждаются в запятых. Также обратите внимание, что пробелы не нужны перед отрицательными числами. Например M 250, -125 V 375 L 40, 60 можно сократить до M250-125V375L40 60 .

Избегайте создания рисунков вручную
Вместо того, чтобы дублировать полосу для создания полос, создайте настоящий узор из полос. Элемент шаблона будет повторять фигуры для вас и явно уменьшит размер файла по сравнению с добавлением сотен одинаковых фигур.

Избегайте десятичных знаков
*Этот метод ситуативен, так как потенциально может сделать ваш файл еще больше.*
Если у вас есть значок SVG размером 50x50 пикселей, а точка привязки имеет координату [20.5, 30.1], вместо этого из-за необходимости округления, если вы изменили размеры на 500x500px, точка привязки теперь будет падать на [205, 301] . Это устранит два символа (десятичное число) в координате.

Используйте команду кратчайшего пути
Если координаты вашего пути находятся близко друг к другу, использование относительного пути может помочь вам опустить несколько цифр здесь и там. Как правило, сочетание относительных и абсолютных команд будет короче, чем чистый относительный или абсолютный путь.

Избегайте отрицательных чисел
Это похоже на избегание десятичных знаков, за исключением того, что этот метод вызывает меньше беспокойства, вызывая увеличение файла. Идея состоит в том, чтобы не размещать вашу систему координат там, где будут отрицательные координаты. Единственное беспокойство заключается в том, что иногда это будет отталкивать вас дальше от [0,0], создавая большие числа в ваших координатах. Но если ваш путь танцует выше и слева от [-1,-1] , вы удаляете символ из каждой точки X и Y.

Используйте короткие идентификаторы и имена классов
Использование длинных описательных имен классов делает код более читабельным, но добавляет больше символов в ваш файл. Это не сэкономит много, если только имя класса не используется в связке. Обратите внимание, что это может иметь неприятные последствия, если вам нужны описательные имена классов. По умолчанию Illustrator использует короткие имена классов, такие как .st10, и если вы поместите несколько встроенных SVG в один и тот же HTML-документ, повторяющиеся имена классов будут целочисленными друг с другом.

Советы по дизайну в Illustrator:
Используйте режим привязки к пикселям Illustrator для построения на пикселях, так как при этом выводятся целые числа. Обратите внимание: когда вы используете обводку 1, 3 или любое нечетное число, Illustrator автоматически размещает координаты пути посередине между пикселями, потому что SVG может размещать обводку только в середине пути (а не внутри или снаружи). В идеале вы можете избежать таких координат, как [1,5, 8,5], просто используя четную черту 2, 4, 6 и т. д.

Бесплатный онлайн-оптимизатор изображений SVG. Сжимайте изображения SVG в современных браузерах, таких как Chrome, Opera и Firefox.

Отправить ссылку для скачивания

Нажмите Ctrl+D, чтобы сохранить его в закладках, чтобы не искать его снова

Добавить это приложение в закладки

Отправьте нам свой отзыв

Интегрируйте функцию сжатия SVG в свои проекты

Высокоэффективное сжатие изображений с помощью собственных API
Добавьте сжатие изображений в свой проект/решение
100 % частные локальные API. Ваши файлы обрабатываются на ваших собственных серверах
Межплатформенное развертывание

SVG Файл масштабируемой векторной графики

Файлы SVG представляют собой файлы масштабируемой векторной графики, в которых используется текстовый формат на основе XML для описания внешнего вида изображения. Слово «масштабируемый» относится к тому факту, что SVG можно масштабировать до разных размеров без потери качества. Текстовое описание таких файлов делает их независимыми от разрешения. Это один из наиболее часто используемых форматов для создания веб-сайтов и печатной графики для достижения масштабируемости.

SVG объединяет кураторов, коллекционеров и авторов через протокол, ориентированный на курирование NFT. Пользователи могут создавать свои собственные выставки любых NFT на основе Ethereum, формируя сеть культурных отношений.

Как сжать изображения SVG с помощью Aspose.Imaging Compress

Нажмите внутри области перетаскивания файлов, чтобы загрузить изображения SVG, или перетащите файлы изображений SVG
Вы можете загрузить максимум 10 файлов для операции.
Ваши изображения SVG будут автоматически сжаты
Вы также можете указать собственные параметры сжатия для каждого изображения SVG.
Ссылка для скачивания сжатых изображений будет доступна сразу после завершения операции сжатия.
Вы также можете отправить ссылку на сжатый файл изображения на свой адрес электронной почты
Обратите внимание, что файл будет удален с наших серверов через 24 часа, а ссылки для скачивания перестанут работать по истечении этого периода времени.

❓ Как сжать изображение SVG?

Во-первых, вам нужно добавить файл изображения SVG: перетащите файл изображения SVG или щелкните внутри белой области, чтобы выбрать файл. Затем настройте параметры сжатия и нажмите кнопку «Сжать». После завершения процесса вы можете загрузить файл результатов.

🛡️ Безопасно ли сжимать изображения SVG с помощью бесплатного приложения Aspose.Imaging Image Compress?

Да, ссылка для скачивания файлов результатов будет доступна сразу после завершения операции. Мы удаляем загруженные файлы через 24 часа, и ссылки для скачивания перестают работать по истечении этого периода времени. Никто не имеет доступа к вашим файлам. Сжатие изображения абсолютно безопасно.

Единственное исключение из приведенных выше политик возможно, когда пользователь решает поделиться своими данными через форум с просьбой о бесплатной поддержке, в этом случае только наши разработчики имеют доступ к ним для анализа и решения проблемы.

💻 Можно ли сжать изображения SVG в Linux, Mac OS или Android?

Да, вы можете использовать бесплатное приложение Aspose.Imaging Image Compress в любой операционной системе с веб-браузером. Наш сервис работает онлайн и не требует установки какого-либо программного обеспечения.

🌐 Какой браузер следует использовать для сжатия изображений SVG?

Для сжатия изображений SVG можно использовать любой современный браузер, например Google Chrome, Firefox, Opera, Safari.

❓ Могу ли я использовать полученное изображение в коммерческих целях?

Несмотря на то, что наши приложения бесплатны, вы не ограничены в коммерческом использовании полученных изображений, избегая при этом нарушения прав третьих лиц на исходные изображения. Например, вы можете создать NFT (не взаимозаменяемый токен) из своего изображения и попытаться продать его на торговых площадках NFT.

Другие поддерживаемые методы сжатия

Вы также можете сжимать файлы других форматов. См. список ниже.

СЖАТИЕ JPG Сжимайте JPG с высоким выходным качеством в режиме онлайн.
СЖАТИЕ JPEG Сжатие JPEG с высоким выходным качеством OnLine
СЖАТИЕ JP2 Сжатие JP2 с высоким качеством вывода OnLine
СЖАТИЕ J2K Сжатие J2K с высоким качеством вывода в режиме онлайн.
СЖАТИЕ JPEG2000 Сжатие JPEG2000 с высоким выходным качеством OnLine
СЖАТИЕ BMP Сжимайте BMP с высоким качеством вывода в режиме онлайн.
СЖАТИЕ DIB Сжатие DIB с высоким качеством вывода в режиме онлайн.
СЖАТИЕ TIFF Сжатие TIFF с высоким качеством вывода в режиме онлайн.
СЖАТИЕ TIF Сжатие TIF с высоким качеством вывода в режиме онлайн.
СЖАТИЕ GIF Сжатие GIF с высоким выходным качеством OnLine
СЖАТИЕ PNG Сжатие PNG с высоким качеством вывода в режиме онлайн.
СЖАТИЕ APNG Сжимайте APNG с высоким качеством вывода в режиме онлайн.
СЖАТИЕ WEBP Сжатие WEBP с высоким качеством вывода в режиме онлайн.
СЖАТИЕ EMF Сжимайте EMF с высоким качеством вывода в режиме онлайн.
СЖАТИЕ EMZ Сжатие EMZ с высоким качеством вывода в режиме онлайн.
СЖАТИЕ WMF Сжимайте WMF с высоким качеством вывода в режиме онлайн.
СЖАТИЕ WMZ Сжимайте WMZ с высоким качеством вывода в режиме онлайн.
СЖАТИЕ SVG Сжимайте SVG с высоким качеством вывода в режиме онлайн.
СЖАТИЕ SVGZ Сжимайте SVGZ с высоким выходным качеством в режиме онлайн.
СЖАТИЕ DICOM Сжатие DICOM с высоким качеством вывода в режиме онлайн.
СЖАТИЕ DCM Сжимайте DCM с высоким качеством вывода в режиме онлайн.
СЖАТИЕ DNG Сжатие DNG с высоким качеством вывода в режиме онлайн.
СЖАТИЕ ODG Сжатие ODG с высоким качеством вывода в режиме онлайн.
СЖАТИЕ OTG Сжатие OTG с высоким качеством вывода OnLine
СЖАТИЕ CDR Сжимайте CDR с высоким качеством вывода в режиме онлайн.
СЖАТИЕ CMX Сжатие CMX с высоким качеством вывода в режиме онлайн.
СЖАТИЕ TGA Сжатие TGA с высоким качеством вывода в режиме онлайн.

Загрузите изображение, выберите тип формата сохранения и нажмите кнопку «Применить». Вы получите ссылку для скачивания, как только изображение будет сжато.

Он работает на всех платформах, включая Windows, Mac, Android и iOS. Все файлы обрабатываются на наших серверах. Для вас не требуется установка плагинов или программного обеспечения.

Разработано Aspose.Imaging. Все файлы обрабатываются с помощью API Aspose, которые используются многими компаниями из списка Fortune 100 в 114 странах.

Минимизируйте и встраивайте шрифты, чтобы сэкономить 80 %* полосы пропускания, экспортируйте изображения в различные форматы.

Новое в Nano: добавлена возможность конвертировать и сжимать файлы DXF

Перетащите файлы SVG/DXF в любое место на этой странице

До 10 файлов, не более 5 МБ, поддерживаются форматы svg, svgz и dxf

1 svg сжат и подсчитывается.

Помогите нам улучшить Nano!

К сожалению, у Nano, похоже, возникли проблемы с минимизацией SVG. Пожалуйста, помогите нам сделать Nano лучше, отправив нам эти файлы, и мы свяжемся с вами в ближайшее время!

Спасибо, мы свяжемся с вами в ближайшее время.

* встроенный шрифт не учитывается при расчете сохраненного размера

Что делает нано?

Nano использует методы сжатия без потерь для сжатия неэффективных кодов SVG путем удаления ненужных данных, что приводит к тому же изображению, но с большими различиями в размере файлов!
* В среднем размер уменьшается более чем на 80 % при сжатии gzip

Уменьшить SVG на 22 %* меньше, чем у конкурентов

Помимо оптимизации вашего SVG до очень маленького размера, Nano также сжимает ваши шрифты (если есть) и встраивает их за один шаг, что приводит к сокращению рабочего процесса и очень маленьким изображениям SVG, которые используют меньше пропускной способности и загружаются быстрее!
* В среднем на основе более чем 2800 тестовых файлов svg

Перейдите на Pro и сэкономьте больше времени с Nano!

Сжимайте неограниченное количество SVG прямо на рабочем столе с помощью модуля NPM

Массовое сжатие целых папок. Интеграция в процессы сборки для автоматического сжатия

Дополнительные параметры сжатия, удаление водяных знаков, файлов и ограничений по размеру

Экспорт SVG, совместимого с WordPress

Зачем встраивать шрифты?

Если ваш SVG содержит текст и используется в теге , веб-шрифты НЕ будут отображаться во всех браузерах из соображений безопасности и будут отображаться с использованием системных шрифтов (в основном Times New Roman).

Nano автоматически сканирует ваш SVG и выборочно встраивает только нужные шрифты, когда это необходимо, в результате чего файлы имеют гораздо меньший размер и гарантированно работают во всех современных браузерах.

Как соотносятся размеры файлов?

< th >86,9%

Исходный	сторонний	Nano	Nano GZip	PNG @1x	PNG @2x	PNG @3x
SVG-изображение без текста и шрифтов:
4,75 КБ	3,15 КБ	2,72 КБ	621 Б	6,33 КБ	11,5 КБ	16,9 КБ
Экономия	33,7%	42,7%	-33,3%	-142,1%	-255,8%
SVG-изображение с текстом и встроенными шрифтами:
Исходный	сторонний	Nano	Nano GZip	PNG @1x	PNG @2x	PNG @3x
70,3 КБ	65,8 КБ	22,0 КБ	11,7 КБ	12,0 КБ	26,8 КБ	42,8 КБ
Экономия	6,4%	68,7%	83,4%	82,9%	61,9%	39,1%
* Все изображения PNG сжимаются с помощью tinyPNG. Подробнее об этих размерах файлов здесь.

Конвертируйте DXF в SVG и привлекайте больше посетителей на свой сайт

Большинство пользователей не видят ваши красивые диаграммы САПР и вынуждены загружать несколько файлов вместе с программой просмотра, что приводит к неудовлетворительному восприятию доступа к вашему сайту.

Nano автоматически преобразует файлы DXF в формат SVG очень маленького размера (в большинстве случаев с уменьшением более чем на 90 %), чтобы вы могли встроить их на свой сайт, чтобы обеспечить гораздо лучший опыт, или, что еще лучше, редактировать их непосредственно в Векта.

Улучшенная безопасность для SVG

Nano помогает повысить безопасность вашего SVG, удаляя сценарии, события и другие вредоносные угрозы:

Удаление скрипта, ForeignObjects, обработчика и установленных тегов.
Удаление всех атрибутов события.
Удаление всего javascript в атрибутах.

Каковы преимущества?

Значительно меньший размер файлов при значительной экономии полосы пропускания.
Создавайте SVG без потери шрифтов при использовании в тегах .
Гораздо лучшее качество по сравнению с PNG или растровыми изображениями.
Автоматически уведомляет, если компрессор создает SVG, который может повредить ваши изображения*.

*Недоступно в Internet Explorer.

Почему мы создали Nano?

Мы создали один из самых передовых SVG-редакторов в облаке на сайте vecta.io, но были разочарованы, обнаружив множество препятствий при использовании изображений SVG в Интернете.

Чтобы сделать использование изображений SVG таким же простым, как и любого другого формата, мы создали Nano. Наша цель — добиться наименьшего размера файла и при этом сохранить преимущества SVG, заключающиеся в высоком качестве рендеринга на всех устройствах.

Как застройщик в России
сэкономил средства с Nano

Брусника — один из крупнейших застройщиков жилья в России, который ежегодно строит и продает более 5000 квартир для российских семей. Они изменили представление о том, как должно выглядеть недорогое жилье, внедрив использованные архитектурные и городские инновации.

Отзывы

Мне нравится надежность сжатия. Другие инструменты часто создают SVG, которые работают не во всех ситуациях, Nano отлично с этим справляется.

Мне нравится использовать Nano, это отличный инструмент для меня. Мне очень нравится качество сжатия и возможность изменять уровень детализации.

Заместитель директора, UX @Cognizant

Продукт Vecta NanoSVG просто звездный. Это помогает нашей команде минимизировать SVG, сохраняя значительные объемы данных в десятках тысяч файлов. И хотя продукт отличный, команда, стоящая за ним, еще лучше — они чутко реагируют на наши потребности, что позволяет мне доверять им как надежному партнеру.

Создавайте потрясающую веб-графику с помощью Vecta

Vecta — это единственный облачный редактор диаграмм SVG со встроенным компрессором Nano.
Создавайте великолепные SVG-графики и выводите их напрямую в минимизированном виде, что еще больше экономит время.

Тревин – старший директор по развитию бизнеса компании WebFX. Он работал над более чем 450 маркетинговыми кампаниями и занимается созданием веб-сайтов более 20 лет. Его работы были отмечены Search Engine Land, USA Today, Fast Company и Inc.

Один из способов избавиться от нескольких лишних байтов на веб-странице — оптимизировать файлы SVG. Я покажу вам быстрый способ сделать это. Итак, обычно вы создаете файл SVG в своем любимом редакторе векторной графики.

Я выбираю Adobe Illustrator, но он будет работать и в других программах. Здесь вы можете увидеть векторную графику, которую я создал в Illustrator, значок увеличительного стекла: как только векторная графика будет готова, вы обычно экспортируете ее в файл SVG для использования в Интернете. Я просто следовал официальному руководству по экспорту SVG для Интернета с помощью Adobe Illustrator, чтобы создать файл SVG для значка увеличительного стекла: файл SVG просто состоит из XML-разметки, которая сообщает веб-браузерам, как отображать изображение.

Для нас это просто означает, что мы можем открывать и просматривать исходный код файлов SVG в текстовом редакторе.Вот разметка, автоматически сгенерированная Adobe Illustrator:

Как вы, возможно, заметили выше, в коде моего значка увеличительного стекла есть дополнительные элементы, которые на самом деле не нужны. Сложный способ оптимизации SVG-файлов – это ручная очистка кода.

Если вам нужна помощь в этом, ознакомьтесь с руководством по оптимизации SVG от Дадли Стори, в котором показано, на что следует обратить внимание. Метод ручной очистки полезно повторить несколько раз, просто чтобы вы знали, как все это работает, и знали, что происходит, когда инструмент оптимизирует файл SVG для вас. Но очистку кода почти всегда можно автоматизировать.

И представьте, если бы у вас было множество SVG-файлов, ручная очистка их исходного кода неэффективна и нецелесообразна. Вот где Kraken.io вступает в игру. Kraken.io оптимизирует веб-изображения, такие как файлы JPG, PNG и SVG.

Просто перетащите файлы SVG в инструмент, и он сделает всю работу за нас. Вот оптимизированный код SVG после обработки Kraken.io:

Вы заметите, что из моего файла SVG удален ненужный код, такой как комментарии, форматирование кода и пробелы. Используя этот трюк, размер файла SVG был уменьшен примерно на 37 % без ущерба для качества изображения (т. е.

это было сжатие без потерь). Вы можете загрузить исходные файлы значка, использованного в этом руководстве, для практического изучения.

Файлы SVG специально предназначены для публикации в Интернете. Когда вам нужно увеличить скорость веб-страницы и сэкономить трафик, вам следует сжать SVG до минимального размера. Большинство онлайн-компрессоров SVG позволяют уменьшить размер файла примерно до 200 КБ. Как резко уменьшить размер SVG с наилучшим качеством? Просто узнайте больше о 3 эффективных методах из статьи.

Часть 1: 3 лучших метода сжатия файлов SVG в Интернете

Способ 1: онлайн-компрессор изображений AnyMP4

AnyMP4 Image Compressor Online – это универсальный онлайн-компрессор SVG, позволяющий бесплатно уменьшать размер фотографий за счет оптимизации качества. Он также предоставляет передовую технологию для сжатия фотографии в пакетном процессе. Кроме того, вы можете уменьшить размер SVG с МБ до КБ без регистрации.

1. Сжимайте JPEG, PNG, SVG, GIF и другие файлы.
2. Сохраняйте максимальное качество исходных фотографий SVG.
3. Выполните сжатие SVG онлайн одним щелчком мыши.
4. Удалите все загруженные файлы SVG в течение 24 часов.

Шаг 1: Перейдите к Image Compressor Online, вы можете запустить программу на своем компьютере. Нажмите кнопку «Добавить изображения», чтобы загрузить изображения SVG. Вы также можете сбросить до 40 файлов одновременно. Убедитесь, что каждый файл SVG не превышает 5 МБ.

Шаг 2. После загрузки файлов SVG размер SVG автоматически уменьшится до оптимального качества. Это также позволяет вам просматривать исходный размер, размер сжатой фотографии и степень сжатия на индикаторе выполнения.

Шаг 3. После этого вы можете нажать кнопку «Загрузить», чтобы получить сжатые файлы SVG. Конечно, нажмите кнопку «Загрузить все», чтобы сохранить все файлы. Когда вы получите все файлы, загруженные файлы SVG будут автоматически удалены через 24 часа.

Примечание. Это уменьшает размер файла SVG с МБ до 100 КБ, 50 КБ и даже 20 КБ. После этого вы можете загрузить сжатый файл SVG на свой веб-сайт или использовать его в качестве вложения электронной почты.

Метод 2: СЖАТИЕ

Если вам нужно сжать файлы SVG из URL-адреса или применить некоторый пользовательский код, COMPRESSORDIE — это эффективный метод преобразования и сжатия векторных файлов SVG в SVG с наименьшим возможным размером файла.

Шаг 1. Зайдите в COMPRESSORDIE из любого веб-браузера, вы можете выбрать меню SVG Compressor в правом верхнем углу. Затем вы можете нажать кнопку «Выбрать файл», чтобы выбрать файлы SVG.

Шаг 2. Когда вы загрузите файлы, файлы SVG будут автоматически сжаты онлайн. После этого вы можете предварительно просмотреть уменьшенный файл и получить ссылки под окном предварительного просмотра.

Шаг 3. Нажмите кнопку «Загрузить» в правом верхнем углу, чтобы получить файл минимального размера. Кроме того, вы также можете перейти в экспертный режим для различных целей.

Способ 3: СЖАТИЕ

Шаг 1. Выберите формат SVG в меню «Изображение». Перетащите файлы SVG в раздел «Выбрать файлы» в онлайн-компрессоре SVG. Размер каждого файла SVG может составлять до 40 МБ.

Шаг 2. Автоматически пакетное сжатие файлов SVG. Выходные файлы будут перечислены в разделе «Выходные файлы». Если вам нужно загрузить файлы в формате ZIP, вы можете выбрать параметр «Добавить в ZIP».

Шаг 3. После загрузки сжатых файлов SVG с помощью параметра Сохранить ссылку как. Выходные файлы будут автоматически удалены с сервера в течение короткого периода времени.

Часть 2. Можно ли увеличить скорость веб-сайта для сжатия SVG

Доступ к веб-странице может занять много времени из-за больших файлов SVG. Что делать, если сжатый SVG по-прежнему не работает? Даже если вы загрузили файл SVG размером не более 200 КБ, вот несколько способов, которые вы должны попробовать, чтобы ускорить работу вашего веб-сайта.

1. Оптимизируйте код веб-страницы.
2. Удалите ненужные данные.
3. Обрежьте нужную часть изображения SVG.
4. Используйте файл PNG в качестве фонового изображения.

Часть 3. Часто задаваемые вопросы о сжатии изображений SVG

Что такое формат файла SVG?

SVG, известная как масштабируемая векторная графика, специально разработана для публикации в Интернете и состоит из заданного количества пикселей. Это формат векторного изображения на основе XML, который отличается от традиционных растровых форматов, таких как JPEG, PNG и GIF.

Зачем сжимать файлы SVG?

Поскольку файлы SVG предназначены для использования в Интернете, сжатие файлов SVG упрощает их передачу и хранение. Если вам нужно отправить файлы SVG по электронной почте, распечатать изображения, сохранить файлы или даже быстро передать их на свой веб-сайт, это должно быть важным выбором.

Следует ли сжимать SVG с помощью Photoshop?

В зависимости. Если вам не нужно дополнительно редактировать файлы SVG, вы можете просто выбрать онлайн-компрессоры SVG, которые уменьшают файлы с наилучшим качеством фотографий, как Photoshop. Но Photoshop предоставляет больше возможностей для редактирования фотографии SVG.

Заключение

Если вам нужно сжать файлы SVG, вы можете узнать больше о лучших онлайн-методах из статьи. Если вам нужно уменьшить размер и сохранить наилучшее качество, AnyMP4 Image Compressor Online должен стать лучшим решением, которое вы никогда не должны пропустить. Если у вас есть дополнительные вопросы по теме, вы можете оставить комментарий в статье.

Что вы думаете об этом посте?

Рейтинг: 4,8 / 5 (на основе 207 оценок)

Опубликовано Райли Митчелл в Photo Editing

Зачем это делать, если изображения PNG слишком велики для вашей веб-страницы? Просто узнайте больше о двух эффективных методах сжатия PNG-файлов из статьи.

Если вы хотите сжать GIF для Twitter, Giphy, Screencast и других веб-сайтов, вы можете узнать больше о 5 эффективных методах из этой статьи.

Если вы хотите отредактировать фотографии для Instagram, вы можете найти 10 лучших фоторедакторов Instagram, чтобы создать потрясающие фотографии и улучшить свою ленту Instagram с помощью статьи.

Мы определяем и публикуем список лучших бесплатных программ и приложений для редактирования фотографий для Windows 10/8.1/8/7 и Mac OS X и более поздних версий, с помощью которых вы можете сделать свои снимки по-настоящему блестящими.

Читайте также: