Как сжать svg файл для сайта
«У меня много SVG-файлов довольно большого размера, и мне нужно сделать их меньше, как я могу сжать файлы SVG онлайн? »Если вы создаете веб-сайты, возможно, вы знакомы с файлами SVG. Это не очень распространенный формат изображений, но поддерживается большинством современных веб-браузеров, таких как Google Chrome, Microsoft Internet Explorer и Mozilla Firefox. В этой статье рассказывается, как сжимать большие векторные изображения SVG с помощью онлайн-приложений.
Часть 1: Что такое SVG?
SVG, расшифровывается как Scalable Vector Graphics, представляет собой векторный формат графических изображений на основе XML. Это открытый стандарт, разработанный W3C. Он может хранить интерактивность и анимационный контент, поскольку изображения и поведение определены в тексте XML. Другое преимущество заключается в том, что файлы SVG можно искать, индексировать, создавать сценарии и сжимать с помощью командной строки.
Часть 2: Сжатие файла SVG онлайн
Вы можете создать файл SVG через ваш любимый редактор векторной графики, например, Adobe Illustrator. Однако он не может удалить избыточные коды и сжать файлы SVG. К счастью, вы можете использовать некоторые веб-приложения для этого.
Метод 1: Лучший способ сжать SVG Online
Трудно сжимать изображения SVG, отчасти потому, что он использует код XML для создания визуального контента. Компрессор SVG должен понимать язык программы и удалять бесполезные коды. Apeaksoft бесплатный онлайн-компрессор изображений способен упростить процедуру.
- Сжатие до 40 файлов изображений SVG за конверсию онлайн.
- Абсолютно бесплатно без каких-либо ограничений или водяных знаков.
- Поддержка широкого спектра форматов изображений, включая SVG, PNG, JPG и т. Д.
- Оптимизируйте качество изображения автоматически при сжатии.
- Довольно безопасно и не сохраняйте свои файлы изображений на сервер.
Вкратце, Free Online Image Compressor - это самый простой способ сжать код SVG онлайн, даже если вы не понимаете язык программы.
Как сжать SVG изображения онлайн
Шаг 1Загрузить изображения SVG
Нажмите Добавить изображения кнопка, чтобы вызвать диалог открытия файла. Затем найдите большие файлы SVG с жесткого диска и нажмите кнопку Откройте кнопку, чтобы загрузить их.
Чаевые Убедитесь, что размер каждого изображения SVG не превышает 5 МБ.
Способ 2: Как сжать SVG с помощью ShrinkMe
Как видно из названия, ShrinkMe может сжимать изображение SVG онлайн бесплатно. Краткий интерфейс позволяет начинающим освоить онлайн-компрессор SVG. К сожалению, он не предоставляет никаких пользовательских опций.
Шаг 1Откройте окно проводника и найдите файл изображения SVG для сжатия в Интернете. Тогда посетите Приложение компрессора SVG в веб-браузере.
Шаг 2Перетащите изображение SVG в пунктирную рамку, чтобы начать загрузку и сжатие в Интернете.
Шаг 3По окончании нажмите Сохраните Кнопка для загрузки сжатого изображения SVG.
Способ 3: Как сжать SVG онлайн с помощью SVGMinify
SVGMinify - это еще один способ сжатия SVG, созданный Illustrator. Вы можете загрузить файл SVG не более 12 МБ или вставить код файла SVG для сжатия их в Интернете.
Шаг 1Перейти на онлайн SVG компрессор в вашем браузере, чтобы открыть его напрямую.
Метод 4: Как сжать изображения SVG через Vecta.io
Если ваш SVG-файл содержит много текста, что делает его очень большим, Vecta может помочь вам сжать SVG-изображение онлайн, удалив ненужные сценарии, события и многое другое.
Шаг 1Откройте веб SVG компрессор приложение в браузере, например Chrome,
Шаг 2Затем перетащите файлы SVG на страницу. Он может обрабатывать до 10 файлов одновременно.
Шаг 3После загрузки веб-приложение начнет сжимать ваши файлы SVG. Затем вы можете сохранить меньшие изображения SVG на свой компьютер.
Часть 3. Часто задаваемые вопросы о сжатии SVG
Вопрос 1: что такое SVGO?
Ответ: SVGO - это SVG Optimizer, инструмент на основе Nodejs для оптимизации ваших векторных графических файлов SVG. Как упоминалось ранее, файлы SVG обычно содержат много избыточной и бесполезной информации, такой как метаданные, скрытые элементы и т. Д. SVGO имеет архитектуру на основе плагинов и выполняет каждую оптимизацию с помощью отдельного плагина. Тем не менее, вы должны овладеть некоторыми техническими знаниями, так как это набор командных строк.
Вопрос 2: лучше ли использовать SVG или PNG?
Ответ: SVG и PNG являются графическими форматами файлов. Самым большим преимуществом SVG является то, что вы можете масштабировать изображение SVG до любого размера без потери качества. Таким образом, вы должны использовать формат SVG для изображения, которое имеет векторные артефакты. Когда дело доходит до растровых артефактов, PNG - лучший выбор.
Вопрос 3: Как мне конвертировать PNG в SVG?
Ответ. Чтобы преобразовать PNG в SVG, вы можете использовать программное обеспечение для настольного компьютера, например Adobe Illustrator, или приложение для онлайн-конвертации, например Convertio.
От автора: оптимизация SVG (масштабируемой векторной графики) для веб-проектов имеет два преимущества: уменьшение размера файла и упрощение работы с ним. Но много раз я открывала веб-проект и обнаруживала, что ресурсы SVG можно сделать значительно меньше с помощью простых оптимизаций. В этой статье я расскажу о своем процессе оптимизации ресурсов SVG. Это может помочь вам, если вы дизайнер или разработчик, не знакомый с работой с SVG в Веб.
Многие библиотеки иконок предоставляют ресурсы SVG, которые уже хорошо оптимизированы. Но если вы создаете собственную графику или она предоставлена другим дизайнером, вы можете сделать это с помощью нескольких шагов. В основном я использую для создания и редактирования SVG Adobe Illustrator. Вот довольно простая иконка, созданная в Illustrator:
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
< ! -- Generator : Adobe Illustrator 22.1.0 , SVG Export Plug - In . SVG Version : 6.00 Build 0 ) -- >У каждой графической программы свой собственный способ сохранения SVG, но независимо от того, которую из них вы используете, код все равно может содержать много дополнительных данных, если их не оптимизировать. Давайте рассмотрим некоторые способы решения этой проблемы.
Запуск пакета
Быстрое решение с помощью SVGOMG
Пропустив код через SVGOMG, мы получим следующее:
Это гораздо лучше, чем оставлять графику неоптимизированной, но она содержит посторонний элемент <defs/>. И если оригинальный SVG содержит группы, слои и эффекты, то существует предел того, насколько инструмент, наподобие SVGOMG, сможет его оптимизировать. Намного лучше, если мы вернемся к графической программе и внесем некоторые изменения, прежде чем пропускать ее через инструмент оптимизации.
Редактирование SVG
Если вы знаете, как писать SVG-код, то это поможет получить самый чистый и минимизированный результат. Посмотрите документацию MDN с руководством по рисованию контуров SVG и это видео от Хейдона Пикеринга, если вы хотите получить дополнительную информацию.
Но для подавляющего большинства из нас редактирование SVG возможно только с помощью визуального инструмента. Для этого примера я использую Adobe Illustrator, но другие инструменты, такие как Sketch, имеют схожие функции редактирования.
Разверните группы
Первое, что я делаю при оптимизации SVG, это удаляю все скрытые слои и разворачиваю группы, где это возможно. Это удаляет все группы контуров в тегах <g> кода SVG. Возможно, вы захотите сохранить некоторые группы, если планируете стилизовать или анимировать их. Вы можете развернуть группу в Illustrator с помощью сочетания клавиш Shift+CMD+G.
Преобразование в контуры
Затем я конвертирую все штрихи в контуры, где это возможно (Рис 04). В Illustrator мы можем сделать это, используя Объект> Расширить. Могут быть некоторые исключения: если вы стилизуете или анимируете stroke-dasharray или stroke-dashoffset, вам нужно оставить их нетронутыми, а также, если вы хотите сохранить ширину обводки при масштабировании SVG.
Вы также можете использовать параметр «Развернуть» в Illustrator для преобразования областей изображения, например простых рисунков, в индивидуально выбираемые контуры. Для сложных или детализированных узоров, возможно, лучше этого не делать.
Преобразование текста в контуры
Иногда полезно преобразовать текст в контуры, если текст носит чисто декоративный характер, или содержимое будет передаваться другим способом, например с заголовком, текстом кнопки или aria-label. Несмотря на то, что использовать элемент SVG <text> полезно, это не всегда имеет смысл, особенно если вам нужно загрузить другой веб-шрифт для отображения текста SVG. Мы можем преобразовать текст в контуры в Illustrator, выбрав его и нажав «Текст»> «Преобразовать в контуры».
Объединение контуров
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Чтобы объединить контуры в Illustrator, мы выбираем их и используем параметр объединения в меню «Навигатор».
Удалите дополнительные контуры или группы
Когда контуры объединены, я выполняю последнюю проверку слоев и удаляю все пустые слои или дубликаты контуров, которые могли быть созданы в процессе.
Подгонка артборда
Когда я использую в HTML SVG-иконки, я не хочу, чтобы вокруг них оставалось дополнительное пространство, от которого я не могу избавиться. Это может произойти в случае, если SVG viewBox больше, чем содержимое. В Illustrator я выбираю «Объект»> «Артборды»> «Подогнать к границам графического объекта», чтобы размеры viewBox соответствовали графическому объекту.
Экспорт
Теперь мы готовы сохранить SVG. В Illustrator мы можем выбрать «Файл»> «Сохранить как» и выбрать в качестве формата SVG. В появившемся окне нам будет предложено несколько параметров SVG. Я обычно выбираю «Атрибуты представления», чтобы настроить параметры стиля.
SVG теперь готов к запуску через инструмент оптимизации. Для иконок я обычно в SVGOMG могу настроить большинство параметров. Вы заметите, что код стал намного чище! Но даже это не всегда удаляет все, что можно удалить. В приведенном ниже коде у меня все еще остается пустой элемент <defs>, поэтому стоит выполнить еще одну окончательную ручную очистку и удалить его в редакторе кода. Теперь SVG готов к использованию!
Использование SVG
SVG можно использовать в Интернете различными способами, в том числе:
В свойстве CSS background-image
Встроенным в HTML
Спрайты
Затем, когда дело доходит до их использования, вместо вставки всего SVG, мы можем ссылаться на них с помощью элемента <use>:
У меня есть изображение, которое я использую на веб-сайте. Я хотел бы использовать SVG, чтобы он мог быть любого размера и при этом выглядеть свежим.
-
список содержит файл SVG, а также оригинальный файл Illustrator.
Это экспорт JPEG:
SVG имеет гораздо больший размер файла, чем JPG. Можно ли оптимизировать SVG так, чтобы он имел одинаковый размер файла? Я мог бы потерять часть качества, если бы это помогло. Я попробовал этот оптимизатор SVG , но это не имело большого значения.
Если я сохраню файл иллюстратора в формате JPG, отследю результат и сохраню его в формате SVG, то получу файл гораздо меньшего размера, но с некоторой потерей качества. Это заставляет меня думать, что, возможно, слои в оригинале вызывают большой размер? Является ли изображение, с которым я работаю, слишком сложным, чтобы подходить для SVG?
Не относится к вашему вопросу, но вы не должны использовать JPG для изображений, подобных этому. Вместо этого используйте PNG: размер, вероятно, будет похожим, и вы не потеряете качество. Поймите, что сравнение будет зависеть от физического размера изображения. Масштабирование JPEG значительно увеличивает размер. Масштабирование SVG не имеет никакого эффекта. Вполне возможно, что очень маленькая иконка будет меньше, чем JPEG, хотя я бы не назвал вашу графику очень маленькой. Если вы не являетесь пользователем Inkscape и не уверены в том, что можете играть в SVG вручную, вам может понравиться онлайн-инструмент, на который я ссылаюсь в моем ответе . Просто добавьте к комментарию svick: изображения «как этот», где PNG лучше, это что-нибудь с прозрачными краями или что-нибудь с четкими сплошными областями цвета или белого. Если это «графика» (например, логотип, значок и т. Д.), А не «фотография», PNG обычно лучше. JPG лучше для фотографий (или фотореалистичных изображений).Ваш SVG содержит встроенную пиксельную графику для тени в правом нижнем углу контроллера. Это составляет около четверти размера файла. Если вы удалите его, ваш SVG-файл будет соответствовать вашему JPEG. Вы можете, вероятно, достичь адекватно подобного эффекта с градиентом.
Другие методы уменьшения размера файла SVG включают в себя:
- Удалить все метаданные и тому подобное. Для этого в Inkscape есть Save as plain SVG . Я полагаю, что другие программы имеют нечто подобное.
- Удалите узлы, которые мало добавляют к фигурам, например, на фигуре вашего контроллера есть ложные узлы.
Это заставляет меня думать, что, возможно, слои в оригинале вызывают большой размер?
Если вы не используете абсурдно много слоев (подумайте об одном слое для каждого объекта), слои не должны вносить существенный вклад в размер файла, и даже в этом случае это будет только дробная часть.
Является ли изображение, с которым я работаю, слишком сложным, чтобы подходить для SVG?
Если вы можете разумно создать изображение с нуля, оно не должно быть слишком сложным для формата SVG. Не существует такой вещи, как порог магической сложности, после которого размеры файлов увеличиваются (вероятно, это справедливо для любого неопределенно разумного формата). Конечно, если вы выбираете только достаточно грубое разрешение, вы можете экспортировать каждый SVG в JPEG с меньшим размером файла. Но это не обязательно означает, что вы не должны использовать SVG.
¹ Это, в частности, без отслеживания и тому подобное. В качестве крайнего примера: если вы хотите точно воспроизвести каждый пиксель фотографии с помощью примитивов SVG (т. Е. Без встраивания пиксельной графики в SVG), вы действительно можете считать результат слишком сложным для его эффективного представления в формате SVG. , Но это, надеюсь, здравый смысл.
Как уже указывал Wrzlprmft, более 50% размера файла SVG определяется встроенным растровым изображением PNG, используемым для создания довольно тонкого эффекта затенения на контроллере. Достаточно просто избавиться от этого изображения и заменить его простым радиальным градиентом, чтобы сжать SVG примерно до 10 КБ.
Исходное изображение с причудливой растровой штриховкой слева, отредактированная версия с простым радиальным градиентом справа.
Пока вы занимаетесь этим, вы должны также проверить свои пути, чтобы увидеть, есть ли что-то, что можно упростить там. Я не нашел много, но контур вашего контроллера имеет несколько смежных узлов (около верхней и нижней середины), которые могут быть объединены без какой-либо видимой разницы.
Это экономия 50%, но давайте пока не останавливаться. Если вы хоть немного знаете о формате SVG , вы можете сделать это намного лучше.
Сначала запустите «Vacuum Defs» в Inkscape, чтобы избавиться от ненужных определений, а затем сохраните изображение как «обычный SVG». Теперь пришло время открыть его в текстовом редакторе и посмотреть, от чего мы можем избавиться. В идеале вам следует использовать редактор со встроенным предварительным просмотром SVG, чтобы вы могли быстро увидеть, как ваши изменения (надеюсь, ни одного) влияют на внешний вид изображения. Я использую для этого emacs , но есть и другие редакторы с похожими функциями .
В любом случае, когда файл SVG открыт в вашем текстовом редакторе, давайте начнем его упрощать!
Прямо наверху есть большой бесполезный <!-- comment --> . Просто удали это.
Если вы редактируете SVG прямо из Illustrator, есть также бесполезная <!DOCTYPE . > строка. Удалите это тоже.
Inkscape настаивает на вставке ненужного блока метаданных RDF в ваше изображение. Просто найдите <metadata . > тег и удалите его вместе со всем, вплоть до закрытия </metadata> .
Кроме того, даже если вы сохраните файл как «обычный SVG», Inkscape все равно засорит его множеством пользовательских атрибутов. Найдите каждый атрибут, который начинается с inkscape: или, sodipodi: и удалите их.
После удаления метаданных и атрибутов, специфичных для Inkscape, вы можете удалить из <svg> тега все неиспользуемые атрибуты пространства имен XML . Она должна быть безопасной для удаления , по меньшей мере xmlns:rdf , xmlns:dc , xmlns:cc , xmlns:inkscape и xmlns:sodipodi . Если есть избыточный xmlns:svg атрибут, удалите его тоже. Единственные атрибуты пространства имен, которые вы должны были оставить на данный момент:
У <svg> тега также есть множество других бесполезных атрибутов, которые вы можете безопасно удалить, например, enable-background и xml:space="preserve" . (Те , которые вставляются экспортером Illustrator SVG, и Inkscape не достаточно умен , чтобы понять , что они бесполезны) . В viewBox атрибуте может также быть безопасно удален из этого образа, так как он просто повторяет значения x , y , width и height атрибуты.
Вы также можете безопасно удалить encoding и standalone атрибуты из <?xml . ?> тега.
Теперь давайте разберемся с данными изображения. По какой-то причине Inkscape настаивает на присвоении id атрибутов каждому элементу, даже если на них никогда не ссылаются. Любой id атрибут, значение которого никогда не повторяется в другом месте файла (ищите его!), Можно безопасно удалить. По сути, единственные идентификаторы, которые вам нужно сохранить, это идентификаторы для градиентов и, возможно, для любых других объектов (например, путей), найденных внутри <defs> секций.
Кроме того, Inkscape любит генерировать длинные идентификаторы, как linearGradient4277 . Рассмотрите возможность сокращения любых идентификаторов, которые вы не можете просто удалить во что-то короткое, например lg1 .
Есть также несколько <defs> разделов сразу после друг друга. Слияние их экономит несколько байтов (и упрощает структуру документа в целом).
Есть также несколько пустых групп ( <g> элементов) в конце файла. Просто избавься от них. Также может быть несколько последовательных групп с одинаковым transform атрибутом (или вообще без них); это также безопасно объединить их.
По какой-то странной причине Inkscape сохраняет избыточный путь Безье ( d атрибут) для <circle> элементов. Это занимает место без всякой причины, поэтому просто удалите их. (Оставьте d атрибуты для <path> элементов быть; они фактически используются для чего-то.)
Кроме того, если есть какие-либо <use . > элементы, вы можете сохранить несколько байтов, заменив их фактическим элементом, на который они ссылаются. (Конечно, это экономит место только в том случае, если связанные элементы используются только один раз.) Также кажется, что Inkscape любит косвенно определять круговые градиенты, сначала определяя остановки в a <linearGradient> , а затем ссылаясь на них в a <radialGradient> ; Вы можете упростить это, переместив упоры прямо внутрь радиального градиента и избавившись от неиспользуемого линейного градиента. В качестве бонуса, если, сделав это, вам удалось избавиться от всех xlink:href атрибутов, вы можете удалить xmlns:xlink атрибут из <svg> тега.
Если вы действительно хотите выжать каждый последний лишний байт, найдите числовые значения со слишком большим количеством десятичных знаков и округлите их до чего-то более разумного. Здесь действительно помогает предварительный просмотр в реальном времени, поскольку он позволяет увидеть, сколько вы можете округлить значение, прежде чем оно станет видимым. Даже если вы не хотите тщательно проверять каждое число, чтобы увидеть, насколько оно может быть округлено, вы можете по крайней мере выбрать низко висящий фрукт, например, округлив значение 1.0000859 пикселей до простого 1 .
Наконец, очистите отступы и пробелы в файле. Чтобы свести к минимуму количество байтов, вам нужно поместить все в одну строку (или, по крайней мере, ставить только переносы строк перед атрибутами, где в любом случае требуется пробел), но это действительно трудно прочитать. Тем не менее, можно достичь приличного баланса между удобочитаемостью и компактностью с помощью некоторого простого консервативного отступа.
В любом случае, вот что мне удалось отредактировать вручную в SVG-изображение:
Это SVG-изображение выглядит практически неотличимым от второго примера, приведенного выше, и занимает всего 5189 байт, что значительно меньше, чем ваше изображение JPEG. Я уверен, что он еще может быть оптимизирован, но это всего лишь пример того, что вы можете сделать за несколько минут на практике. (Мне понадобилось гораздо больше времени, чтобы набрать этот ответ, чем на самом деле редактировать код SVG.)
Наконец, сжатие этого SVG-кода с помощью gzip сокращает его до 1846 байт (!), Чуть больше четверти размера вашей версии JPEG.
В этой статье я предлагаю три способа, с помощью которых SVGO позволяет оптимизировать графику SVG, чтобы сделать ее пригодной для использования в Интернете.
Зачем вам нужно оптимизировать SVG
SVG (он же Scalable Vector Graphics) — это независимый от разрешения графический формат. Большим преимуществом отсутствия основанного на пикселях является то, что SVG выглядят потрясающе на наших блестящих устройствах с экраном на сетчатке и отлично работают в адаптивной сети.
Если вы, как и я, не являетесь графическим дизайнером, возможно, вы нашли готовые SVG из различных источников Creative Commons или Public Domain. Одним из недостатков этого является то, что часто такие произведения создаются не с учетом Интернета. Это означает, что вы можете обнаружить, что они изобилуют слишком сложными путями и похожими на Photoshop эффектами. Кроме того, поскольку SVG основаны на XML, копание в исходном коде часто выявляет много ненужной разметки. Помимо моей укоренившейся любви к чистому коду, сложность и раздувание увеличивают размер файла и негативно влияют на производительность сайта.
Не думайте, что если вы будете рисовать SVG самостоятельно, вы будете полностью чисты. Хотя последние версии Adobe Illustrator позволяют экспортировать достаточно чистую разметку SVG, более старые версии, а также некоторые другие редакторы векторной графики по-прежнему содержат разметку с ненужными комментариями, объявлениями типов документов и собственными атрибутами.
Вот пример кода, сгенерированного графическим редактором, чтобы проиллюстрировать это:
Вместо этого все, что вам действительно нужно, это:
Кроме того, если вы не используете layer1 в своем CSS или JavaScript, вы также можете избавиться от атрибута id в <g> .
Лично я за небольшую ручную очистку кода SVG. Но, не бойтесь, основная часть самой утомительной и повторяющейся части работы по оптимизации легко поддается автоматизации.
Что такое СВГО?
Без сомнения, самый популярный инструмент, доступный для работы в это время, является SVGO .
SVGO работает на Node.js , асинхронной среде, управляемой событиями, для создания масштабируемых сетевых приложений. Вам не нужно знать, как создавать приложения с Node.js, чтобы работать с SVGO. Однако вам необходимо использовать пользовательский интерфейс командной строки (CLI) вашего компьютера.
SVGO позволяет включать или отключать определенные оптимизации путем включения или отключения его плагинов.
Например, если вы хотите удалить пустые атрибуты из вашей SVG-графики, вам нужно включить плагин removeEmptyAttrs.js .
Вы можете увидеть полный список всех доступных плагинов для SVGO в файле README проекта на GitHub .
Есть немало способов, которыми вы можете интегрировать SVGO в свою разработку. Далее я собираюсь обсудить только три варианта, открытых для вас.
Чтобы начать использовать SVGO, просто установите Node.js , загрузив последнюю стабильную версию, соответствующую вашей операционной системе, и следуйте инструкциям установщика.
Далее вы можете установить SVGO с помощью npm , менеджера пакетов Node . Введите эту команду в своем терминале:
Теперь вы установили SVGO глобально на свой компьютер, чтобы вы могли использовать его где угодно.
Читайте также: