Как уменьшить вес svg файлов для веб-сайта

Опубликовано: Четверг, Октябрь 16, 2014 Комментарии (4)

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

Если вы читаете данную публикацию, то вы уже знаете как можно встроить svg файл в верстке. Вскользь я упоминала это в статье о генерации svg-спрайта в Illustrator. Также в интернете есть перевод неплохой статьи об этом (но информации в одном источники полной не ищите, все лучше познается путем проб и ошибок).

А нужно ли вообще уменьшать размер svg файла?

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

Итак, скорее всего, если вы работаете с svg графикой, то вы пользуетесь для этого каким-либо графическим редактором. Когда вы сохраняете файл в svg в редакторе, то в него записывается много ненужной нам информации: различные мета-данные, комментарии, скрытые элементы, какие-то настройки и т. д. Именно от этого и надо избавиться при подготовке svg для web’а.

Подготавливаем svg при сохранении в Adobe Illustrator

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

Для краткости я просто сделала скриншот с настройками:

Выбираем оптимальные настройки для встраивания SVG в верстку

Выбираем оптимальные настройки для встраивания 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 сложный логотип, который ну никак уже настройками больше не уменьшишь, а весит он много.

А иногда эта программа просто выручает…Например, когда нужно сохранить в svg сложный логотип, который ну никак уже настройками больше не уменьшишь, а весит он много.

В заключение

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

 

UPD. Если вы front-end разработчик, то вероятно вы уже давно используете какой-либо framework. Для того, чтобы уменьшить svg файл сейчас пока что, я использую плагин imagemin-svgo.

Поделитесь с друзьями:

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

Комментируйте:

  • Сергей Артёмов

    Почему все говорят про SVGO, при том, что SVG-Cleaner лучше справляется со сжатием (чисткой)?

    • http://positivecrash.com/ Настя Бакай

      Наверное, так исторически сложилось )
      Спасибо, возможно кто-то увидит ваш комментарий и воспользуется SVG-Cleaner.

      В принципе, те же npm пакеты есть основанные как на svgo, так и на svg-cleaner.

      • Сергей Артёмов

        Фигово, когда «историческая сложенность» мешает распространению _более лучших_ инструментов.

        • http://positivecrash.com/ Настя Бакай

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