как сократить код svg
Оптимизация SVG. Компрессия кода.
Одно из достоинств SVG-файлов — это отличные возможности компрессии. Для большей эффективности ее следует проводить в два этапа: оптимизация кода и архивирование.
Оптимизация SVG-кода
Цель данного этапа — по максимуму сократить код: чем меньше кода, тем файл легче. Добиться этого можно придерживаясь рекомендаций:
Архивирование SVG
SVG файл — это обычный текстовый файл, который отлично поддается архивированию. Одним из лучших способов для этого сейчас является gzip-сжатие. Сжатые файлы могут весить в 2-5 раз меньше, чем несжатые.
| Несжатый SVG файл | С gzip сжатием | Степень сжатия |
|---|---|---|
| 12,912 | 2,463 | 81% |
| 12,164 | 2,553 | 79% |
| 11,613 | 2,617 | 77% |
| 18,689 | 4,077 | 78% |
| 13,024 | 2,041 | 84% |
Сжатый SVG-файл получает расширение SVGZ.
Автоматизация оптимизации
Даже при довольно простых изображениях, ручная оптимизация может потребовать часы. С этим был не согласен Евгений Степанищев (bolk), который взял за основу идеи Jos Hirth и сделал php-скрипт, для оптимизации SVG-файлов с таким перечнем возможностей оптимизации:
Оптимизация SVG для Веб
Дата публикации: 2020-02-28
От автора: оптимизация SVG (масштабируемой векторной графики) для веб-проектов имеет два преимущества: уменьшение размера файла и упрощение работы с ним. Но много раз я открывала веб-проект и обнаруживала, что ресурсы SVG можно сделать значительно меньше с помощью простых оптимизаций. В этой статье я расскажу о своем процессе оптимизации ресурсов SVG. Это может помочь вам, если вы дизайнер или разработчик, не знакомый с работой с SVG в Веб.
Многие библиотеки иконок предоставляют ресурсы SVG, которые уже хорошо оптимизированы. Но если вы создаете собственную графику или она предоставлена другим дизайнером, вы можете сделать это с помощью нескольких шагов. В основном я использую для создания и редактирования SVG Adobe Illustrator. Вот довольно простая иконка, созданная в Illustrator:
Мы можем сохранить ее, перейдя «Файл»> «Сохранить как» и выбрав опцию «SVG». Однако, если мы посмотрим на код сохраненного SVG, то увидим, что он довольно раздутый. Код содержит много ненужных данных — группы, которые можно свернуть, пути, которые можно объединить, метаданные, созданные самой программой, и многое другое:
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
У каждой графической программы свой собственный способ сохранения SVG, но независимо от того, которую из них вы используете, код все равно может содержать много дополнительных данных, если их не оптимизировать. Давайте рассмотрим некоторые способы решения этой проблемы.
Запуск пакета
SVGO — это пакет NPM, который запускает процесс оптимизации SVG-ресурсов во время сборки, и это хорошая идея использовать что-то подобное в рабочем процессе. Но визуальный инструмент часто лучше удаляет лишние пути и группы и позволяет нам настраивать (и просматривать) параметры оптимизации в зависимости от того, какой результат мы хотим получить.
Быстрое решение с помощью SVGOMG
Один из способов быстро удалить большую часть этих ненужных данных — инструмент Джейка Арчибальда SVGOMG. Вы можете либо загрузить файл SVG, либо напрямую вставить код, и, в зависимости от выбранных параметров, SVG будет значительно уменьшен. Возможно, вам придется поэкспериментировать с различными опциями, чтобы получить желаемый результат, особенно если ваш SVG довольно сложный, но я обычно нахожу, что для простых иконок я могу включить большинство опций, и это не окажет негативного влияния на результат.
Пропустив код через SVGOMG, мы получим следующее:
Редактирование SVG
Если вы знаете, как писать SVG-код, то это поможет получить самый чистый и минимизированный результат. Посмотрите документацию MDN с руководством по рисованию контуров SVG и это видео от Хейдона Пикеринга, если вы хотите получить дополнительную информацию.
Но для подавляющего большинства из нас редактирование SVG возможно только с помощью визуального инструмента. Для этого примера я использую Adobe Illustrator, но другие инструменты, такие как Sketch, имеют схожие функции редактирования.
Сколько кода вы можете удалить, отредактировав SVG, зависит от его сложности и варианта использования. Следующие советы обычно относятся к иконкам и простой графике. Сложные иллюстрации часто не могут быть отредактированы до такой степени без влияния на конечный результат — и, в некоторых случаях, возможно, лучше использовать PNG или JPG.
Разверните группы
Первое, что я делаю при оптимизации SVG, это удаляю все скрытые слои и разворачиваю группы, где это возможно. Это удаляет все группы контуров в тегах кода SVG. Возможно, вы захотите сохранить некоторые группы, если планируете стилизовать или анимировать их. Вы можете развернуть группу в Illustrator с помощью сочетания клавиш Shift+CMD+G.
Преобразование в контуры
Затем я конвертирую все штрихи в контуры, где это возможно (Рис 04). В Illustrator мы можем сделать это, используя Объект> Расширить. Могут быть некоторые исключения: если вы стилизуете или анимируете stroke-dasharray или stroke-dashoffset, вам нужно оставить их нетронутыми, а также, если вы хотите сохранить ширину обводки при масштабировании SVG.
Вы также можете использовать параметр «Развернуть» в Illustrator для преобразования областей изображения, например простых рисунков, в индивидуально выбираемые контуры. Для сложных или детализированных узоров, возможно, лучше этого не делать.
Преобразование текста в контуры
Иногда полезно преобразовать текст в контуры, если текст носит чисто декоративный характер, или содержимое будет передаваться другим способом, например с заголовком, текстом кнопки или aria-label. Несмотря на то, что использовать элемент SVG
полезно, это не всегда имеет смысл, особенно если вам нужно загрузить другой веб-шрифт для отображения текста SVG. Мы можем преобразовать текст в контуры в Illustrator, выбрав его и нажав «Текст»> «Преобразовать в контуры».
Объединение контуров
Теперь, когда все в нашем SVG — это контуры, мы можем объединить их, чтобы уменьшить их количество. Возьмем для примера иконку «поиск»: два пересекающихся контура могут быть объединены в один, что даст единый контур.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Чтобы объединить контуры в Illustrator, мы выбираем их и используем параметр объединения в меню «Навигатор».
Исключением является сценарий, когда мы хотим стилизовать или анимировать контуры по отдельности — в этом случае их объединять не следует.
Удалите дополнительные контуры или группы
Когда контуры объединены, я выполняю последнюю проверку слоев и удаляю все пустые слои или дубликаты контуров, которые могли быть созданы в процессе.
Подгонка артборда
Когда я использую в HTML SVG-иконки, я не хочу, чтобы вокруг них оставалось дополнительное пространство, от которого я не могу избавиться. Это может произойти в случае, если SVG viewBox больше, чем содержимое. В Illustrator я выбираю «Объект»> «Артборды»> «Подогнать к границам графического объекта», чтобы размеры viewBox соответствовали графическому объекту.
Экспорт
Теперь мы готовы сохранить SVG. В Illustrator мы можем выбрать «Файл»> «Сохранить как» и выбрать в качестве формата SVG. В появившемся окне нам будет предложено несколько параметров SVG. Я обычно выбираю «Атрибуты представления», чтобы настроить параметры стиля.
Использование SVG
SVG можно использовать в Интернете различными способами, в том числе:
В свойстве CSS background-image
Спрайты
В частности, встроенные SVG-иконки обеспечивают наибольшую производительность и гибкость, и лучший способ их использования — создание спрайта. Если вы не хотите делать это вручную, доступны пакеты NPM, которые автоматически генерируют SVG-спрайты. Icomoon — это приложение, которое предлагает аналогичный сервис.
Затем, когда дело доходит до их использования, вместо вставки всего SVG, мы можем ссылаться на них с помощью элемента :
Три способа уменьшения размера файла SVG с SVGO
В этой статье я предлагаю три способа, с помощью которых SVGO позволяет оптимизировать графику SVG, чтобы сделать ее пригодной для использования в Интернете.
Зачем вам нужно оптимизировать SVG
SVG (он же Scalable Vector Graphics) — это независимый от разрешения графический формат. Большим преимуществом отсутствия основанного на пикселях является то, что SVG выглядят потрясающе на наших блестящих устройствах с экраном на сетчатке и отлично работают в адаптивной сети.
Если вы, как и я, не являетесь графическим дизайнером, возможно, вы нашли готовые SVG из различных источников Creative Commons или Public Domain. Одним из недостатков этого является то, что часто такие произведения создаются не с учетом Интернета. Это означает, что вы можете обнаружить, что они изобилуют слишком сложными путями и похожими на Photoshop эффектами. Кроме того, поскольку SVG основаны на XML, копание в исходном коде часто выявляет много ненужной разметки. Помимо моей укоренившейся любви к чистому коду, сложность и раздувание увеличивают размер файла и негативно влияют на производительность сайта.
Не думайте, что если вы будете рисовать SVG самостоятельно, вы будете полностью чисты. Хотя последние версии Adobe Illustrator позволяют экспортировать достаточно чистую разметку SVG, более старые версии, а также некоторые другие редакторы векторной графики по-прежнему содержат разметку с ненужными комментариями, объявлениями типов документов и собственными атрибутами.
Вот пример кода, сгенерированного графическим редактором, чтобы проиллюстрировать это:
Вместо этого все, что вам действительно нужно, это:
Лично я за небольшую ручную очистку кода SVG. Но, не бойтесь, основная часть самой утомительной и повторяющейся части работы по оптимизации легко поддается автоматизации.
Что такое СВГО?
SVGO позволяет включать или отключать определенные оптимизации путем включения или отключения его плагинов.
Есть немало способов, которыми вы можете интегрировать SVGO в свою разработку. Далее я собираюсь обсудить только три варианта, открытых для вас.
# 1. Просто Node.js и SVGO
Теперь вы установили SVGO глобально на свой компьютер, чтобы вы могли использовать его где угодно.
Чтобы оптимизировать файл SVG, введите в своем терминале:
Размеры в 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 и где он применяется
Привет всем, наши дорогие фанаты свободной конвертации. Сегодня у нас на рабочем столе интереснейший проект под кодовым названием Scalable Vector Graphics или кратко SVG. Почему на иностранном языке? Чтобы никто не догадался.
Для проведения исследования нам понадобятся некоторые материальные ресурсы, в том числе какой-либо свободно конвертируемой валюты, возможно рублей.
Во-вторых, нам необходим компьютерный монитор, не важно, десктоп или смартфон. Поскольку вы читаете этот текст, стало быть – один ресурс у вас уже имеется. Остается побеспокоить кого-то из близко оказавшихся добрых людей и позаимствовать несколько тысяч рублей, на худой конец, пару сотен баксов.
Все это нам совершенно необходимо для ясного понимания – что такое SVG и с чем его лучше закусывать.
Масштабируемая векторная графика
Начнем от внешней оболочки, перейдем к внутреннему содержанию и далее, не побоимся этого слова – проникнем в самую сущность исследуемого явления.
Как вы могли слышать – графика бывает двух типов.
Для начала снимите очки и подведите свои глаза поближе к мерцающему компьютерному монитору.
Что вы видите?
Правильно – картинка составляется из миллионов разноцветных точечек. Это и есть растр. Поэтому такой тип графики и называется «растровым».
Переходим ко второй части эксперимента. Поверьте, вам предстоит намного более весело провести время, а может даже найти себе приключений на кой-чего.
Одевайте свою самую модную одежку, звоните другу или подружке. Мы отправляемся в ночной клуб. Зачем? Изучать графику векторную.
Когда гости как следует разогрелись в баре и на танцполе начинаются танцы с бубнами, DJ нажимает маленькую кнопочку и небо заполняют клубы полупрозрачного глицеринового дыма.
Когда дымовал достаточно загустеет, DJ нажимает еще одну кнопочку. Запускается лазерная пушка и над головами танцующей толпы начинает плясать что-то вроде северного сияния.
Это и есть векторная графика. Лазерный луч непрерывен и рисует картины согласно заложенному в компьютерной программе алгоритму – цифровому визуальному образу.
Именно так и работает SVG – это цифровое программное описание графических образов, цветов и их поведения.
Мы не зря в качестве примера выбрали ночной клуб. Суть в том, что лазер-то создает непрерывные линии, но глицериновый дым имеет дисперсную, растровую фактуру. То есть, этот искусственный туман представляет собой взвешенные в воздухе мельчайшие капельки жидкости, от которых и отражается лазерный луч, чтобы в сетчатках наших глаз сформировались визуальные образы.
На экранах компьютеров непрерывные векторы преобразовываются в разноцветные пиксели матрицы и наш мозг по своему алгоритму формирует восприятие плавной картинки.
Технологическое решение SVG
Ну вот, с внешней оболочкой разобрались, теперь переходим к внутренней сущности явления. Вы можете сказать – да нафига нам вся эта наука, лучше скажи прямо – зачем он нужен, этот SVG?
Не торопитесь. Дело в том, что именно технология определяет все внешние эффекты. А теперь откроем вам страшную тайну. SVG – это родной брат языка разметки гипертекста HTML, при помощи которого верстаются сайты, красивые и динамические.
Да-да, файл графики в формате SVG представляет собой текстовый файл XML, наполненный тегами, примерно как в HTML, и данными, структурированными при помощи XML. Логически предположить, что SVG-графику можно интегрировать непосредственно в HTML-код веб-страницы, форматировать при помощи таблиц стилей CSS и даже подключать программные сценарии Javascript.
Просто запустите свое воображение (можно чашечку капучино, плиз) и попытайтесь предоставить бесконечные возможности векторной графики, генно-модифицированной тегами HTML5.
Исходя из этих технических спецификаций мы и выведем сферу применения SVG.
Как можно использовать SVG для пользы и выгоды
В принципах честного маркетинга следует признаться – есть у SVG и недостатки. По мере наращивания детализации изображения, вес файла начинает увеличиваться со скоростью снежной лавины.
Так что, к сожалению, SVG совершенно не годится для реалистичных фотографии высокого разрешения и подробных карт местности.
Формат SVG оптимален для небольших, зато масштабируемых и интерактивных картинок.
Самое полезное – SVG-графика наилучшим образом подходит для электронной коммерции.
Например, на сайте интернет-магазина размещается изображение продаваемого товара. Пользователь может нажимать на отдельные участки картинки и начинается красивая анимация, превращающая образ во что-то другое.
На этой основе можно разработать интерактивный обзор товара со всех сторон и даже изнутри.
Либо на медицинском сайте, при помощи такой графической программы можно сделать тест на беременность. Или диагностический плагин, для желающих пройти экспресс-анализ и узнать, от чего ему предстоит умирать молодым.
После того, как клиент узнает страшную тайну о своем страшном недуге, рука сама тянется кликнуть мышью по соседнему участку SVG-картинки с красной кнопкой «Купить лекарство от всех болезней». Достаточно одной таблэтки. Price$1000.
Вот какое полезное изобретение, этот SVG.
Способы конвертации в SVG
На нашем сайте мы предлагаем вам конвертацию различными методами:
А можно как-то уменьшить размер SVG?
Да! С помощью специальных программ, например SVGO, или на нашем сайте с помощью функции оптимизации SVG.