Как уменьшить размер svg в illustrator
Обновлено: 03.07.2024
Когда вы начнете работать с SVG, важно понять, как создавать, экспортировать и оптимизировать файлы SVG для браузеров, которые будут их отображать.
Наблюдайте за началом анимации с помощью HTML5 Canvas Возможно, вы анимировали с помощью CSS, но пробовали ли вы HTML5?Конечно, вы можете использовать инструменты оптимизации после экспорта, но этот автоматизированный подход может сломать ваш файл неожиданными способами. Наличие глубоких практических знаний о хороших концепциях оптимизации SVG в ручном режиме поможет вам с самого начала.
Это именно то, что вы узнаете сегодня.
Создание SVG в Illustrator
Когда вы создаете графику в Illustrator, которая предназначена для экспорта в SVG, вам необходимо выполнить некоторые шаги и рекомендации, необходимые для правильной оптимизации конечного результата для веб-сайтов. Давайте рассмотрим их сейчас.
Установите правильное цветовое пространство
Illustrator, как и большинство программ для векторной иллюстрации, изначально был разработан для печатной продукции, поэтому его цветовое пространство по умолчанию установлено в CMYK. RGB гораздо больше подходит для использования в Интернете и на экране и имеет более широкую гамму (диапазон цветов), чем CMYK. Поэтому, когда вы создаете новый документ, убедитесь, что цветовой режим установлен на RGB — как вы можете видеть на изображении ниже.
Дайте вашему рисунку правильную структуру
Файл SVG не похож на обычное растровое изображение — сетку пикселей. Это текстовый документ, имеющий определенную структуру.
Как и HTML-документ, вы можете выбирать отдельные элементы и управлять ими. Для этого вам нужно использовать их имена в качестве справочного материала. Я обнаружил, что всегда проще создавать эти ярлыки во время визуального редактирования в Illustrator, чем позже.
По этой причине важно дать осмысленное имя каждому графическому элементу при его создании. Вот что вам нужно знать при создании графики в Illustrator:
Слои Illustrator и имена групп слоев используются в качестве идентификаторов для групп SVG
Имена символов Illustrator используются в качестве идентификаторов для символов SVG
Имена графических стилей Illustrator используются в качестве классов CSS
На рисунках ниже вы можете увидеть, как имена из файла Illustrator отражаются в экспортированном SVG.
Упростите ваши формы, когда это возможно
Формы в чертеже SVG описываются с помощью координатных точек. Чем больше точек на чертеже, тем больше размер файла и тем сложнее его редактировать и поддерживать. Создание небольших, эффективных файлов облегчает вашу жизнь позже.
Чтобы решить эту проблему, вам нужно использовать как можно меньше точек, чтобы создать нужные фигуры. Это может быть достигнуто несколькими способами.
По возможности используйте основные формы SVG вместо путей SVG
Использование простых элементов, таких как line , rect и circle имеет ряд существенных преимуществ.
Во-первых, простые формы гораздо более читабельны для людей — самоочевидно, что круг — это круг, когда мы видим его в нашем SVG-коде, но код для пути может быть любым, пока мы не увидим его визуализацию.
Во-вторых, простые формы почти всегда приводят к меньшим размерам файлов и меньшему количеству кода, что облегчает их поддержку и редактирование. Вы также можете легче управлять ими с помощью их прямых атрибутов, таких как x , y , cx , cy , вместо координат точек, как это происходит с путями.
Чтобы понять, что я имею в виду, на изображении ниже вы можете увидеть простую круглую форму, определенную один раз как элемент круга SVG и один раз как путь SVG. Хотя они визуализируются одинаково, ясно, что форма SVG меньше и более универсальна. Помните, что некоторые графические редакторы — например, расширение экспорта SVG в Fireworks — автоматически преобразуют фигуры SVG в контуры при экспорте. Очевидно, постарайтесь избежать этого.
Упростите свои пути
Путь — это не что иное, как массив координатных точек. Упростить путь означает вырезать некоторые из его точек, что приведет к уменьшению данных пути и уменьшению размера файла. Для этого вы можете использовать команду Object > Path > Simplify… или Warp Tool . В обоих случаях главное состоит в том, чтобы максимально уменьшить точки пути без потери качества визуального оформления.
На рисунках ниже вы можете видеть, как процесс упрощения Illustrator уменьшает точки пути с 32 до 23, что составляет около 25%, и как это отражается на коде. Данные пути уменьшаются, в то время как визуальное качество все еще остается на хорошем уровне.
Решите, следует ли преобразовывать текст в пути
В графике SVG текст является отдельным элементом, и поэтому он доступен для поиска, доступен и легко редактируется. Это ценное качество для текста. Однако, если вы хотите, чтобы ваш текст выглядел точно так, как вы его создавали повсеместно, конечный пользователь должен иметь доступ к правильным шрифтам. Это означает, что вы должны выбрать общие шрифты, ограничивающие вашу креативность, или предоставить веб-шрифт.
Если точная отрисовка текста важнее, чем редактируемость, например, в логотипе, вы можете преобразовать его в контуры, используя команду «Текст» Type > Create Outlines или установив этот параметр на панели экспорта, как вы увидите позже.
Имейте в виду, что при преобразовании большого количества текста в пути размер файла может резко увеличиться, поэтому тщательно подумайте перед преобразованием.
Уже многие начали активно пользоваться svg графикой в верстке сайтов. Возможно уже даже многие знают про тот способ уменьшения веса svg файлов, о котором я расскажу сегодня. Но я не претендую на оригинальность, лишь хочу поделиться информацией.
Если вы читаете данную публикацию, то вы уже знаете как можно встроить svg файл в верстке. Вскользь я упоминала это в статье о генерации svg-спрайта в Illustrator. Также в интернете есть перевод неплохой статьи об этом (но информации в одном источники полной не ищите, все лучше познается путем проб и ошибок).
А нужно ли вообще уменьшать размер svg файла?
Не важно как и для каких целей вы используете svg в верстке, если вы не встраиваете код прямо в html, то вам точно надо уменьшить размер файлов svg. Несмотря на развитие интернет-скоростей, каждая килобайтинка до сих пор на счету (правда уже по другим причинам).
Подготавливаем svg при сохранении в Adobe Illustrator
Я экспортирую svg из макета в Adobe Illustrator. Есть пару настроек, которые позволяют уменьшить размер файла уже при обычном сохранении. Причем эти настройки помогут и при уменьшении размера генерируемого кода, если вы встраиваете svg код прямо в HTML!
Для краткости я просто сделала скриншот с настройками:
Выбираем оптимальные настройки для встраивания SVG в верстку
Здесь самые важные для нас опции — это:
- Subsetting
Выбор зависит от количества текстовых символов.Если символов мало — то выгоднее будет выбрать настройку «Only Glyphs Used». Это позволит встроить шрифт с используемыми буквами в файл. Но если букв много, то несомненно лучше выбрать «None (Use System Fonts)», предварительно переведя шрифт в кривые. - Image Location
Как правило, выбираем «Link». Это позволит значительно уменьшить размер файла. Однако с этой опцией нужно быть аккуратнее: если в файле используются какие-либо эффекты типа градиента, то может быть совсем не тот результат, что ожидается и придется «встраивать» все эффекты в файл, используя опцию «Embed».
Обратите внимание, что нужно снять галочку с «Preserve Illustrator Editing Capabilities» — это не на шутку увеличивает размер файла. - Decimal places
Точность сохраняемого вектора. Чем больше значение, тем больше всяких кривых и точек, а также размер файла. Как правило большая точность не нужна, так как она все равно не будет различима глазом. Я выбираю число от 1 до 3 в зависимости от ситуации.
Подробнее об экспортировании Svg из Illustrator можно прочитать в официальной документации (там можно почерпнуть что-то новое, весьма полезная статья).
Режем размер svg еще больше
Но этих настроек не достаточно, если вы не встраиваете svg код в HTML, а «тянете» в верстке целый файл (не важно каким способом). Можно еще больше уменьшить svg графику для верстки!
Есть такая библиотечка svgo. Она-то и позволяет уменьшить размер svg файла путем удаления различных мета-данных, комментариев и т. п.
Помимо работы из командной строки и в виде различных модулей для js сборщиков проектов эта программа имеет графическую (GUI) версию для Windows и Mac. Ее можно скачать здесь.
Я использую GUI версию этой программы. Она невероятно проста, легковесна и насколько я помню, не требует установки.
Интерфейс невероятно прост и лаконичен: просто перетаскиваешь нужный файл в окно программы и он сам уменьшается и пересохраняется.
Эта программа позволит уменьшить в среднем на 40% нашу svg графику для сайта.
Даже при относительно небольших размерах файлов, в итоге может получиться значительное уменьшение.
В заключение
Надо сказать, это далеко не единственный способ оптимизировать svg файлы. Но мне понравилась эта программа: она достаточно эффективна и в то же время ничего лишнего не удаляет. Маленькая, да удаленькая)
UPD. Если вы front-end разработчик, то вероятно вы уже давно используете какой-либо framework. Для того, чтобы уменьшить svg файл сейчас пока что, я использую плагин imagemin-svgo.
Большие размеры исходного файла могут существенно замедлить ваш рабочий процесс. Редактирование, зуммирование области экрана и просто сохранение файла может длиться несколько минут. Кроме того, большие размеры файла нередко становятся причиной сбоя приложения, что приведет к потере целой или части работы. Использование плагина для автосохранения Autosaviour поможет вам избежать таких потерь при сбоях, но не избавит от потерь времени при очередном сохранении большого файла. Поэтому важно знать, как уменьшить размер файла для комфортной работы с минимальными задержками. В сегодняшней статье вы узнаете о 9 способах уменьшения исходного векторного файла.
Опции сохранения файла
Когда мы в первый раз сохраняем файл (File > Save… или File > Save As…) открывается диалоговое окно опций Illustrator. Для существенного уменьшения размера файла снимите галочку с Create PDF Compatible File и отметьте Use Compression.
Такой выбор опций приводит к уменьшению размера файла в несколько раз. Во время написания этой статьи я экспериментировал над довольно сложной векторной работой Shield and Sword, которая содержит бленд объекты, векторные текстуры, градиентные сетки и т.д.
Использование Create PDF Compatible File опции может требоваться в некоторых областях дизайна. В этом случае выбирайте ее во время последнего сохранения (File > Save As…), когда работа будет полностью готова. Кроме того Create PDF Compatible File опция поможет вам восстановит файлы после крушения иллюстратора. Однако в таком восстановлении нет необходимости, если вы используете плагин Autosaviour, который может создавать резервную копию файла.
Использование Linked Images
Ваши работы наряду с векторными объектами могут содержать растровые изображения. Вы можете вставить их в документ или получить в результате некоторых процессов. Например, растровые эффекты после команды Expand Appearance превращаются в растровые изображения. Любая растровая графика в Illustrator может быть двух видов: linked Image или Embedded Images. Использование только linked Images существенно уменьшит размер файла, особенно, когда речь идет о больших изображениях с высоким разрешением. Так, например, файл, содержащий linked Image Pink rose с Shutterstock имеет размер 380Kb. А если файл будет содержать Embedded Images, то после сохранения будет иметь размер 5527Kb.
Файл может уже содержать Embedded Images. В этом случае вы можете сделать их Linked, нажав на кнопку Unembed в панели Control или нажать на иконку Relink в панели Links.
Хочу заметить, что функция Relink доступна только пользователям Adobe Illustrator CC. Если вы работаете в более ранних релизах приложения, то можете использовать плагин Rasterino, который имеет аналогичную функцию – Link Images.
Обрезка ненужных частей внедренных изображений
В случае, когда нам все же необходимо использовать Embedded Images, мы можем удалить ненужную часть изображения при помощи Rasterino. Если изображение имеет фон, который содержит прозрачные или белые пиксели, то мы можем удалить их, нажав на кнопку Trim Image в панели Rasterino. После выбора нужных опций в открывшемся диалоговом окне произойдет удаление части изображения, которое не имеет значимой информации.
Мы также можем обрезать изображение, выбрав необходимую нам часть, при помощи Crop Image Tool плагина Rasterino или используя кнопку Crop Image в панели Rasterino.
Несомненно, удаление части внедренного изображения приведет к уменьшению размера всего файла.
Уменьшение разрешения растровых эффектов
Вы можете уменьшить разрешение всех растровых эффектов, которые были применены в текущем документе. Для этого переходим Effect > Document Raster Effects Settings… и устанавливаем низкое значение для разрешения в диалоговом окне.
Это приведет к уменьшению размера файла и ускорит процесс отображения графики на экране во время зуммирования. После завершения работы с файлом вы можете установить требуемое значение для разрешения.
Удаление лишних точек
Количество опорных точек также влияет на размер вашего файла. Их число может быть уменьшено при помощи функции Simplify (Object > Path > Simplify…). На мой взгляд, эту функцию хорошо использовать для грубой обработки контуров, например для уменьшения количества точек векторных текстур, когда нет необходимости точно сохранять форму объектов.
Но когда речь идет о точности, например при удалении лишних точек контура персонажа, лучше использовать Smart Remove Brush Tool (VectorScribe). Этот инструмент позволяет буквально сметать лишние точки, работая кистью как метлой.
Кроме того VectorScribe позволяет выделять и автоматически удалять накладывающиеся точки с выбранных путей. Обе эти опции доступны в диалоговом окне PathScribe Preferences. Векторная работа, с которой я экспериментировал, содержала 156 накладывающихся друг на друга точек.
Уменьшение количества маркеров ширины
Работа с путями постоянной ширины и с путями переменной ширины при помощи Width Brush Tool или Width Gradient Tool (WidthScribe plug-in) может привести к образованию большого числа маркеров ширины. Их чрезмерное количество увеличивает размер файла и замедляет работу приложения во время редактирования и зуммирования экрана. Мы можем автоматически уменьшить их количество при помощи функции Optimise Width Markers плагина WidthScribe (Object > Path > Optimise Width Markers…). При этом форма путей существенно не изменится.
Для ручного удаления лишних маркеров ширины предназначен Width Eraser Tool (плагин WidthScribe).
Использование символов
Векторные работы могут содержать множество объектов или групп объектов полученных в результате дублирования. В этом случае сохраните элемент, который собираетесь дублировать, как символ в панели Symbols. Затем приступайте к дублированию символа, например, при помощи Symbol Sprayer Tool. Использование символов значительно уменьшит размер исходного файла. Их использование особенно оправдано, если вы собираетесь дублировать сложные объекты.
Уменьшение числа шагов бленд объекта
Большое количество шагов бленда может стать причиной гигантского размера файла. Для уменьшения шагов выделите бленд объект, затем перейдите Object > Blend > Blend Options… или просто два раза кликните на иконке Blend Tool в панели Tools. Подберите количество шагов в диалоговом окне Blend Tool Option, которое не приведет к существенному ухудшению качества бленд объекта.
В процессе работы над несколькими сложными бленд объектами вы можете устанавливать вообще 1-3 шага, затем восстанавливать необходимое значение, когда ваша работа будет полностью готова. Этот трюк ускорит ваш рабочий процесс, не создавая длительных пауз во время сохранения файла.
Работа с прозрачными объектами
Функция прозрачности и режимы наложения несомненно, помогают добавить третье измерение в двумерную векторную графику, давая безграничный простор для творчества. Однако необдуманное использование прозрачных объектов может привести к увеличению размера файла в несколько раз. Часто дизайнер, привыкший к мощным функциям Adobe Illustrator, забывает, что задачу можно решить более простыми способами. Я много раз встречал работы с градиентными заливками, которые содержат прозрачные слайдеры, в то время как дизайнер мог просто подобрать нужный цвет, не используя прозрачность.
Использование цветных объектов, к которым применен режим смешивания, для цветовой коррекции очень увеличивают размер файла. Особенно, когда такой объект или даже несколько объектов накрывают всю сложную работу. Я думаю, что для цветовой коррекции лучше использовать плагин Phantasm, который имеет все необходимые инструменты для работы с цветом, включая Levels, Hue/Saturation, Brightness/Contrast, Curves и т.д..
В заключении я хотел бы порекомендовать вам две статьи, которые были написаны мной ранее и напрямую связаны с темой сегодняшней публикации:
У меня есть изображение, которое я использую на веб-сайте. Я хотел бы использовать 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.
Читайте также: