От создателя: оптимизация SVG (масштабируемой векторной графики) для веб-проектов имеет два достоинства: уменьшение размера файла и упрощение работы с ним. Но много раз я открывала веб-проект и обнаруживала, что ресурсы SVG можно создать существенно меньше при помощи обычных оптимизаций. В данной для нас статье я расскажу о собственном процессе оптимизации ресурсов SVG. Это может посодействовать для вас, если вы дизайнер либо разраб, не знакомый с работой с SVG в Веб.
Почти все библиотеки иконок предоставляют ресурсы SVG, которые уже отлично оптимизированы. Но если вы создаете свою графику либо она предоставлена остальным дизайнером, вы сможете создать это при помощи нескольких шагов. В главном я использую для сотворения и редактирования SVG Adobe Illustrator. Вот достаточно обычная иконка, сделанная в Illustrator:
Мы можем сохранить ее, перейдя «Файл»> «Сохранить как» и выбрав опцию «SVG». Но, если мы поглядим на код сохраненного SVG, то увидим, что он достаточно раздутый. Код содержит много ненадобных данных — группы, которые можно свернуть, пути, которые можно соединить, метаданные, сделанные самой программкой, и почти все другое:
| 123456789101112131415161718192021 |
У каждой графической программки собственный свой метод сохранения SVG, но независимо от того, которую из их вы используете, код все равно может содержать много доп данных, если их не улучшить. Давайте разглядим некие методы решения данной для нас трудности.
Пуск пакета
SVGO — это пакет NPM, который запускает процесс оптимизации SVG-ресурсов во время сборки, и это отменная мысль применять что-то схожее в рабочем процессе. Но зрительный инструмент нередко лучше удаляет излишние пути и группы и дозволяет нам настраивать (и просматривать) характеристики оптимизации зависимо от того, какой итог мы желаем получить.
Без интернета не могут жить 68% женщин Российской Федерации
Резвое решение при помощи SVGOMG
Один из методов стремительно удалить огромную часть этих ненадобных данных — инструмент Джейка Арчибальда SVGOMG. Вы сможете или загрузить файл SVG, или впрямую вставить код, и, зависимо от избранных характеристик, SVG будет существенно уменьшен. Может быть, для вас придется поэкспериментировать с разными опциями, чтоб получить хотимый итог, в особенности если ваш SVG достаточно непростой, но я обычно нахожу, что для обычных иконок я могу включить большая часть опций, и это не окажет негативного воздействия на итог.
Пропустив код через SVGOMG, мы получим последующее:
| 1234 |
Это еще лучше, чем оставлять графику неоптимизированной, но она содержит сторонний элемент . И если уникальный SVG содержит группы, слои и эффекты, то существует предел того, как инструмент, наподобие SVGOMG, сумеет его улучшить. Намного лучше, если мы вернемся к графической программке и внесем некие конфигурации, до этого чем пропускать ее через инструмент оптимизации.
Редактирование SVG
Если вы понимаете, как писать SVG-код, то это поможет получить самый незапятнанный и минимизированный итог. Поглядите документацию MDN с управлением по рисованию контуров SVG и это видео от Хейдона Пикеринга, если вы желаете получить доп информацию.
Но для подавляющего большинства из нас редактирование SVG может быть лишь при помощи зрительного инструмента. Для этого примера я использую Adobe Illustrator, но остальные инструменты, такие как Sketch, имеют идентичные функции редактирования.
Сколько кода вы сможете удалить, отредактировав SVG, зависит от его трудности и варианта использования. Последующие советы обычно относятся к иконкам и обычной графике. Сложные иллюстрации нередко не могут быть отредактированы до таковой степени без воздействия на конечный итог — и, в неких вариантах, может быть, лучше применять PNG либо JPG.
Разверните группы
1-ое, что я делаю при оптимизации SVG, это удаляю все сокрытые слои и разворачиваю группы, где это может быть. Это удаляет все группы контуров в тегах кода SVG. Может быть, вы возжелаете сохранить некие группы, если планируете стилизовать либо анимировать их. Вы сможете развернуть группу в Illustrator при помощи сочетания кнопок Shift+CMD+G.
Преобразование в контуры
Потом я конвертирую все штришки в контуры, где это может быть (Рис 04). В Illustrator мы можем создать это, используя Объект> Расширить. Могут быть некие исключения: если вы стилизуете либо анимируете stroke-dasharray либо stroke-dashoffset, для вас необходимо бросить их нетронутыми, также, если вы желаете сохранить ширину обводки при масштабировании SVG.
Вы также сможете применять параметр «Развернуть» в Illustrator для преобразования областей изображения, к примеру обычных рисунков, в персонально избираемые контуры. Для сложных либо детализированных орнаментов, может быть, лучше этого не созодать.
Преобразование текста в контуры
Время от времени полезно конвертировать текст в контуры, если текст носит чисто декоративный нрав, либо содержимое будет передаваться остальным методом, к примеру с заголовком, текстом клавиши либо aria-label. Невзирая на то, что применять элемент SVG полезно, это не постоянно имеет смысл, в особенности если для вас необходимо загрузить иной веб-шрифт для отображения текста SVG. Мы можем конвертировать текст в контуры в Illustrator, выбрав его и нажав «Текст»> «Конвертировать в контуры».
Объединение контуров
Сейчас, когда все в нашем SVG — это контуры, мы можем соединить их, чтоб уменьшить их количество. Возьмем для примера иконку «поиск»: два пересекающихся контура могут быть объединены в один, что даст единый контур.
Чтоб соединить контуры в Illustrator, мы избираем их и используем параметр объединения в меню «Навигатор».
Исключением является сценарий, когда мы желаем стилизовать либо анимировать контуры по отдельности — в этом случае их соединять воединыжды не следует.
Удалите доп контуры либо группы
Когда контуры объединены, я выполняю последнюю проверку слоев и удаляю все пустые слои либо дубликаты контуров, которые были бы сделаны в процессе.
Подгонка артборда
Когда я использую в HTML SVG-иконки, я не желаю, чтоб вокруг их оставалось доп место, от которого я не могу избавиться. Это может произойти в случае, если SVG viewBox больше, чем содержимое. В Illustrator я выбираю «Объект»> «Артборды»> «Подогнать к границам графического объекта», чтоб размеры viewBox соответствовали графическому объекту.
Вконтакте представила новую версию сервиса онлайн-конференций
Экспорт
Сейчас мы готовы сохранить SVG. В Illustrator мы можем избрать «Файл»> «Сохранить как» и избрать в качестве формата SVG. В показавшемся окне нам будет предложено несколько характеристик SVG. Я обычно выбираю «Атрибуты представления», чтоб настроить характеристики стиля.
SVG сейчас готов к запуску через инструмент оптимизации. Для иконок я обычно в SVGOMG могу настроить большая часть характеристик. Вы заметите, что код стал намного чище! Но даже это не постоянно удаляет все, что можно удалить. В приведенном ниже коде у меня все еще остается пустой элемент , потому стоит выполнить еще одну окончательную ручную чистку и удалить его в редакторе кода. Сейчас SVG готов к использованию!
Внедрение SVG
SVG можно применять в Вебе разными методами, в том числе:
В теге img
В свойстве CSS background-image
Интегрированным в HTML
Спрайты
А именно, интегрированные SVG-иконки обеспечивают самую большую производительность и упругость, и наилучший метод их использования — создание спрайта. Если вы не желаете созодать это вручную, доступны пакеты NPM, которые автоматом генерируют SVG-спрайты. Icomoon — это приложение, которое дает аналогичный сервис.
Потом, когда дело доходит до их использования, заместо вставки всего SVG, мы можем ссылаться на их при помощи элемента :
| 123 |
Так как мы используем контуры, то можем применить последующий CSS-код, чтоб отдать указание всем файлам наследовать текущий цвет, а не применять свойство fill: SVG-иконка, применяемая в кнопочке, будет просто наследовать цвет текста клавиши.
CSS svg { fill: currentColor;
}
| 123 | svg { fill: currentColor;} |
Нам необходимо удалить атрибут fill самого SVG во время процесса оптимизации, чтоб стилизовать его таковым образом при помощи CSS.
Заключение
Это смотрится, как много действий, но по сути весь процесс занимает умопомрачительно не много времени, если вы отлично ориентируетесь в графической программке. Опосля нескольких повторений это закрепляется в мышечной памяти. Мне нравится улучшить большая часть SVG-значков пакетно сначала проекта. Стоит издержать незначительно времени заблаговременно, чтоб облегчить работу с графикой в дальнейшем.
Создатель: Michelle Barker
Редакция: Команда webformyself.
Источник