Как уменьшить вес svg файлов для веб-сайта
Уже многие начали активно пользоваться svg графикой в верстке сайтов. Возможно уже даже многие знают про тот способ уменьшения веса svg файлов, о котором я расскажу сегодня. Но я не претендую на оригинальность, лишь хочу поделиться информацией.
Если вы читаете данную публикацию, то вы уже знаете как можно встроить svg файл в верстке. Вскользь я упоминала это в статье о генерации svg-спрайта в Illustrator. Также в интернете есть перевод неплохой статьи об этом (но информации в одном источники полной не ищите, все лучше познается путем проб и ошибок).
А нужно ли вообще уменьшать размер svg файла?
Не важно как и для каких целей вы используете svg в верстке, если вы не встраиваете код прямо в html, то вам точно надо уменьшить размер файлов svg. Несмотря на развитие интернет-скоростей, каждая килобайтинка до сих пор на счету (правда уже по другим причинам).
Итак, скорее всего, если вы работаете с svg графикой, то вы пользуетесь для этого каким-либо графическим редактором. Когда вы сохраняете файл в svg в редакторе, то в него записывается много ненужной нам информации: различные мета-данные, комментарии, скрытые элементы, какие-то настройки и т. д. Именно от этого и надо избавиться при подготовке svg для web’а.
Подготавливаем svg при сохранении в Adobe Illustrator
Я экспортирую svg из макета в Adobe Illustrator. Есть пару настроек, которые позволяют уменьшить размер файла уже при обычном сохранении. Причем эти настройки помогут и при уменьшении размера генерируемого кода, если вы встраиваете svg код прямо в HTML!
Для краткости я просто сделала скриншот с настройками:
Выбираем оптимальные настройки для встраивания SVG в верстку
Здесь самые важные для нас опции — это:
Подробнее об экспортировании Svg из Illustrator можно прочитать в официальной документации (там можно почерпнуть что-то новое, весьма полезная статья).
Режем размер svg еще больше
Но этих настроек не достаточно, если вы не встраиваете svg код в HTML, а «тянете» в верстке целый файл (не важно каким способом). Можно еще больше уменьшить svg графику для верстки!
Есть такая библиотечка svgo. Она-то и позволяет уменьшить размер svg файла путем удаления различных мета-данных, комментариев и т. п.
Помимо работы из командной строки и в виде различных модулей для js сборщиков проектов эта программа имеет графическую (GUI) версию для Windows и Mac. Ее можно скачать здесь.
Я использую GUI версию этой программы. Она невероятно проста, легковесна и насколько я помню, не требует установки.
Интерфейс невероятно прост и лаконичен: просто перетаскиваешь нужный файл в окно программы и он сам уменьшается и пересохраняется.
Эта программа позволит уменьшить в среднем на 40% нашу svg графику для сайта.
Даже при относительно небольших размерах файлов, в итоге может получиться значительное уменьшение.
А иногда эта программа просто выручает…Например, когда нужно сохранить в svg сложный логотип, который ну никак уже настройками больше не уменьшишь, а весит он много.
В заключение
Надо сказать, это далеко не единственный способ оптимизировать svg файлы. Но мне понравилась эта программа: она достаточно эффективна и в то же время ничего лишнего не удаляет. Маленькая, да удаленькая)
UPD. Если вы front-end разработчик, то вероятно вы уже давно используете какой-либо framework. Для того, чтобы уменьшить svg файл сейчас пока что, я использую плагин imagemin-svgo.
Размеры в SVG
Управление размерами — тема важная, и чтобы максимально использовать возможности SVG, нужно хорошо понимать как всё работает.
Вьюпорт
Содержимое SVG-элемента отрисовывается на бесконечном холсте и может быть сколь угодно большого размера, но видимая часть холста соответствует размерам SVG-элемента. Эта область отрисовки называется viewport (вьюпорт).
SVG позволяет управлять как размерами вьюпорта, так и поведением содержимого относительно него: оно может обрезаться или показываться полностью, может растягиваться с потерей пропорций или стараться уместиться целиком, даже если при этом появляются пустые поля. Этим поведением можно управлять с помощью атрибутов.
Если просто вставить SVG на страницу и не задавать ему никакие размеры, он отобразится размером 300px на 150px, что не поместилось — обрежется:
Ширина и высота
Шириной и высотой элемента можно управлять стандартными свойствами width и height :
Их можно задавать как атрибутами, так и в CSS:
Для размеров в пикселях, задаваемых в атрибутах, единицы измерения можно не указывать.
Потаскайте ползунки, и вы увидите, что изменение ширины и высоты влияет только на вьюпорт и не влияет на содержимое, потому что оно отрисовывается на бесконечном холсте, и неизвестно область какого размера нужно ресайзить.
viewBox
Первые два значения — координаты X и Y верхнего левого угла отображаемой области, последние два — ширина и высота. viewBox задаётся только атрибутом.
Попробуйте теперь изменить размеры, и вы увидите, что содержимое отресайзится, чтобы поместиться целиком.
viewBox можно использовать, например, для кадрирования изображения, чтобы показывать не всю картинку, а только какую-то её часть:
Это поведение может стать проблемой: если размеры у иконок задаются в стилях, а они не загрузились — страница может превратиться в парад гигантских SVG-иконок. Чтобы этого не произошло, всегда явно задавайте в атрибутах SVG ширину и высоту, их потом легко переопределить в CSS.
preserveAspectRatio
Например, с помощью значения none можно указать, что сохранять пропорции не нужно:
SVG с viewBox и preserveAspectRatio=’none’ ведёт себя очень похоже на img : при изменении размеров содержимое масштабируется под размеры вьюпорта не сохраняя пропорции.
none будет полезно для резиновых фонов:
Остальные значения preserveAspectRatio состоят из двух частей: первая задаёт выравнивание, вторая — поведение элемента относительно вьюпорта.
Эти значения можно комбинировать в любых сочетаниях, но порядок должен сохраняться: первым всегда идет значение для X, вторым для Y. Значение для Y всегда пишется с большой буквы.
meet — содержимое стремится уместиться целиком (как фон с background-size: contain ) slice — содержимое заполняет собой всю область видимости (как background-size: cover : что не поместилось, обрежется)
Также нужно понимать, что preserveAspectRatio срабатывает, если вьюпорт и вьюбокс имеют разные соотношения сторон. Если соотношения сторон совпадают, и содержимое умещается без полей, preserveAspectRatio работать не будет (в этом случае в нём просто нет необходимости).
Для использования SVG в качестве иконок достаточно viewBox и размеров, но если предполагается делать что-то более сложное, имеет смысл разобраться с единицами измерения и системой координат.
Единицы измерения
Системы координат
В SVG-документе есть две системы координат:
Отсчет системы координат вьюпорта начинается от левого верхнего угла вьюпорта, системы координат содержимого — от левого верхнего края вьюбокса.
По умолчанию система координат содержимого соответствует системе координат вьюпорта, а единицы измерения содержимого — единицам измерения вьюпорта, но при использовании трансформаций или viewBox масштабируется вся система координат с единицами измерения, то есть пиксели из user space больше не равны пикселям из viewport space.
Поизменяйте размеры элемента и посмотрите что происходит с системой координат содержимого (она показана бирюзовым):
Система координат содержимого начинается из точки 0,0, и если вьюпорт и вьюбокс не совпадают, точка отсчета, как и вся система координат содержимого, будет ездить и масштабироватся вместе с вьюбоксом.
Масштабирование единиц измерения хорошо видно на примере обводки: изначально её толщина равна единице, но при изменении размеров видимая толщина обводки будет изменяться вместе с фигурой:
vector-effect можно задавать как атрибутом, так и в CSS.
Также новая система координат создается при добавлении трансформаций:
Внутри трансформируемого элемента будет своя своя система координат, отличная от систем координат вьюпорта и вьюбокса.
Тема может выглядеть сложной, но на самом деле, достаточно немного поиграться с кодом, и всё станет понятно. Для лучшего понимания систем координат, размеров и трансформаций в SVG рекомендую демо Сары Суайдан, а также её статьи:
Можно ли уменьшить размер файла SVG, чтобы он был ближе к его эквиваленту в формате JPEG?
У меня есть изображение, которое я использую на веб-сайте. Я хотел бы использовать SVG, чтобы он мог быть любого размера и при этом выглядеть свежим.
Если я сохраню файл иллюстратора в формате JPG, отследю результат и сохраню его в формате SVG, то получу файл гораздо меньшего размера, но с некоторой потерей качества. Это заставляет меня думать, что, возможно, слои в оригинале вызывают большой размер? Является ли изображение, с которым я работаю, слишком сложным, чтобы подходить для SVG?
Ваш SVG содержит встроенную пиксельную графику для тени в правом нижнем углу контроллера. Это составляет около четверти размера файла. Если вы удалите его, ваш SVG-файл будет соответствовать вашему JPEG. Вы можете, вероятно, достичь адекватно подобного эффекта с градиентом.
Другие методы уменьшения размера файла SVG включают в себя:
Это заставляет меня думать, что, возможно, слои в оригинале вызывают большой размер?
Если вы не используете абсурдно много слоев (подумайте об одном слое для каждого объекта), слои не должны вносить существенный вклад в размер файла, и даже в этом случае это будет только дробная часть.
Является ли изображение, с которым я работаю, слишком сложным, чтобы подходить для SVG?
Если вы можете разумно создать изображение с нуля, оно не должно быть слишком сложным для формата SVG. Не существует такой вещи, как порог магической сложности, после которого размеры файлов увеличиваются (вероятно, это справедливо для любого неопределенно разумного формата). Конечно, если вы выбираете только достаточно грубое разрешение, вы можете экспортировать каждый SVG в JPEG с меньшим размером файла. Но это не обязательно означает, что вы не должны использовать SVG.
Как уже указывал Wrzlprmft, более 50% размера файла SVG определяется встроенным растровым изображением PNG, используемым для создания довольно тонкого эффекта затенения на контроллере. Достаточно просто избавиться от этого изображения и заменить его простым радиальным градиентом, чтобы сжать SVG примерно до 10 КБ.
Исходное изображение с причудливой растровой штриховкой слева, отредактированная версия с простым радиальным градиентом справа.
Пока вы занимаетесь этим, вы должны также проверить свои пути, чтобы увидеть, есть ли что-то, что можно упростить там. Я не нашел много, но контур вашего контроллера имеет несколько смежных узлов (около верхней и нижней середины), которые могут быть объединены без какой-либо видимой разницы.
В любом случае, когда файл SVG открыт в вашем текстовом редакторе, давайте начнем его упрощать!
Если вы редактируете SVG прямо из Illustrator, есть также бесполезная строка. Удалите это тоже.
Кроме того, даже если вы сохраните файл как «обычный SVG», Inkscape все равно засорит его множеством пользовательских атрибутов. Найдите каждый атрибут, который начинается с inkscape: или, sodipodi: и удалите их.
Вы также можете безопасно удалить encoding и standalone атрибуты из тега.
Теперь давайте разберемся с данными изображения. По какой-то причине Inkscape настаивает на присвоении id атрибутов каждому элементу, даже если на них никогда не ссылаются. Любой id атрибут, значение которого никогда не повторяется в другом месте файла (ищите его!), Можно безопасно удалить. По сути, единственные идентификаторы, которые вам нужно сохранить, это идентификаторы для градиентов и, возможно, для любых других объектов (например, путей), найденных внутри секций.
Есть также несколько разделов сразу после друг друга. Слияние их экономит несколько байтов (и упрощает структуру документа в целом).
Есть также несколько пустых групп ( элементов) в конце файла. Просто избавься от них. Также может быть несколько последовательных групп с одинаковым transform атрибутом (или вообще без них); это также безопасно объединить их.
По какой-то странной причине Inkscape сохраняет избыточный путь Безье ( d атрибут) для элементов. Это занимает место без всякой причины, поэтому просто удалите их. (Оставьте d атрибуты для
элементов быть; они фактически используются для чего-то.)
Наконец, очистите отступы и пробелы в файле. Чтобы свести к минимуму количество байтов, вам нужно поместить все в одну строку (или, по крайней мере, ставить только переносы строк перед атрибутами, где в любом случае требуется пробел), но это действительно трудно прочитать. Тем не менее, можно достичь приличного баланса между удобочитаемостью и компактностью с помощью некоторого простого консервативного отступа.
В любом случае, вот что мне удалось отредактировать вручную в SVG-изображение:
Это SVG-изображение выглядит практически неотличимым от второго примера, приведенного выше, и занимает всего 5189 байт, что значительно меньше, чем ваше изображение JPEG. Я уверен, что он еще может быть оптимизирован, но это всего лишь пример того, что вы можете сделать за несколько минут на практике. (Мне понадобилось гораздо больше времени, чтобы набрать этот ответ, чем на самом деле редактировать код SVG.)
Наконец, сжатие этого SVG-кода с помощью gzip сокращает его до 1846 байт (!), Чуть больше четверти размера вашей версии JPEG.
Изменить размер нескольких SVG одновременно
Кликните здесь для выбора изображений
или перетащите их сюда
До 50 файлов
Как изменить размер SVG:
Обратите внимание, что выходные файлы будут автоматически удалены с нашего сервера в течение одного часа. Загрузите их на свой компьютер или сохраните на Google Диске или Dropbox. Вы также можете отсканировать QR-код изображения, чтобы мгновенно сохранить преобразованные файлы на ваше мобильное устройство.
Храните ваши файлы в безопасности
Мы гарантируем, что ваши изображения, загруженные на наш сайт, являются надежными и безопасными. После преобразования уникальный URL-адрес становится недействительным через час, а файлы удаляются с нашего сервера в течение часа.
Для начинающих и профессионалов
Вы можете указать полный размер или только высоту или ширину. Сохранить соотношение сторон или нет.
Нет необходимости загружать любое программное обеспечение
Существует огромное количество приложений для отслеживания, мы делаем это без проблем, просто выбираем файл, загружаем его и скачиваем результат!
of tracing applications, we do it without any problems, just select the file, upload it and download the result!
Совершенно бесплатно
Мы предоставляем эту услугу как есть. Это абсолютно бесплатно, но вы можете сделать небольшое пожертвование, если мы сэкономим ваше время.
Скажи нет регистрации
Нам не нужны ваш адрес электронной почты, имя, местонахождение или какие-либо другие личные данные. Мы собираем только данные о безличных посетителях.
Легко использовать
Просто выберите изображения на вашем компьютере или перетащите его, чтобы начать изменять размер. Да, это так просто.
Вопросы и ответы
В: Что я могу сделать с этим сервисом?
Вы можете изменить размер изображения SVG.
Q: Что такое SVG?
SVG (Scalable Vector Graphics) — это масштабируемый язык векторной графики, созданный Консорциумом World Wide Web (W3C) и основанный на формате XML, предназначенный для описания двухмерной векторной и смешанной векторной / растровой графики. Поддерживает как фиксированную, так и анимированную интерактивную графику — или, другими словами, декларативную и скриптовую графику. Это открытый стандарт, который является рекомендацией консорциума W3C. Он разрабатывался с 1999 года. В 2001 году была выпущена версия 1.0, в 2011 году — версия 1.1, которая в настоящее время действует.
В: Зачем мне вообще нужен SVG?
Поскольку формат SVG открыт и рекомендуется для использования, этот формат будет лучшим вариантом при работе с вектором. Вот некоторые из его преимуществ:
В: Что если я получу огромный размер файла SVG, что мне делать дальше?
Обычно огромный размер получается только на фотографических изображениях. Но если размер вам не подходит, прежде всего попробуйте выполнить оптимизацию. Для этого у нас есть отличный сервис: SVG оптимизатор.
