От автора: оптимизация SVG (масштабируемой векторной графики) для веб-проектов имеет два преимущества: уменьшение размера файла и упрощение работы с ним. Но много раз я открывала веб-проект и обнаруживала, что ресурсы SVG можно сделать значительно меньше с помощью простых оптимизаций. В этой статье я расскажу о своем процессе оптимизации ресурсов SVG. Это может помочь вам, если вы дизайнер или разработчик, не знакомый с работой с SVG в Веб.
Многие библиотеки иконок предоставляют ресурсы SVG, которые уже хорошо оптимизированы. Но если вы создаете собственную графику или она предоставлена другим дизайнером, вы можете сделать это с помощью нескольких шагов. В основном я использую для создания и редактирования SVG Adobe Illustrator. Вот довольно простая иконка, созданная в Illustrator:
Мы можем сохранить ее, перейдя «Файл»> «Сохранить как» и выбрав опцию «SVG». Однако, если мы посмотрим на код сохраненного SVG, то увидим, что он довольно раздутый. Код содержит много ненужных данных — группы, которые можно свернуть, пути, которые можно объединить, метаданные, созданные самой программой, и многое другое:
<?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 800 800" enable-background="new 0 0 800 800" xml:space="preserve" > <g> <path d="M90,675.6L424,97.1l48.5,28l-334,578.5L90,675.6z" /> <path d="M547.6,279.3h70.2l-10.1,88.2l80.7-37l21.8,66.7l-87.3,17.6l59.9,65.8l-56.4,40.7l-43.8-76.8l-43.8,76.8l-56.4-40.7 l59.9-65.8L455,397.2l21.8-66.7l80.7,37L547.6,279.3L547.6,279.3z" /> </g> </svg>
У каждой графической программы свой собственный способ сохранения SVG, но независимо от того, которую из них вы используете, код все равно может содержать много дополнительных данных, если их не оптимизировать. Давайте рассмотрим некоторые способы решения этой проблемы.
Запуск пакета
SVGO — это пакет NPM, который запускает процесс оптимизации SVG-ресурсов во время сборки, и это хорошая идея использовать что-то подобное в рабочем процессе. Но визуальный инструмент часто лучше удаляет лишние пути и группы и позволяет нам настраивать (и просматривать) параметры оптимизации в зависимости от того, какой результат мы хотим получить.
Быстрое решение с помощью SVGOMG
Один из способов быстро удалить большую часть этих ненужных данных — инструмент Джейка Арчибальда SVGOMG. Вы можете либо загрузить файл SVG, либо напрямую вставить код, и, в зависимости от выбранных параметров, SVG будет значительно уменьшен. Возможно, вам придется поэкспериментировать с различными опциями, чтобы получить желаемый результат, особенно если ваш SVG довольно сложный, но я обычно нахожу, что для простых иконок я могу включить большинство опций, и это не окажет негативного влияния на результат.
Пропустив код через SVGOMG, мы получим следующее:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 620.2 606.5"> <defs/> <path d="M0 578.5L334 0l48.5 28-334 578.5-48.5-28zM457.6 182.2h70.2l-10.1 88.2 80.7-37 21.8 66.7-87.3 17.6 59.9 65.8-56.4 40.7-43.8-76.8-43.8 76.8-56.4-40.7 59.9-65.8-87.3-17.6 21.8-66.7 80.7 37-9.9-88.2z"/> </svg>
Это гораздо лучше, чем оставлять графику неоптимизированной, но она содержит посторонний элемент <defs/>. И если оригинальный SVG содержит группы, слои и эффекты, то существует предел того, насколько инструмент, наподобие SVGOMG, сможет его оптимизировать. Намного лучше, если мы вернемся к графической программе и внесем некоторые изменения, прежде чем пропускать ее через инструмент оптимизации.
Редактирование SVG
Если вы знаете, как писать SVG-код, то это поможет получить самый чистый и минимизированный результат. Посмотрите документацию MDN с руководством по рисованию контуров SVG и это видео от Хейдона Пикеринга, если вы хотите получить дополнительную информацию.
Но для подавляющего большинства из нас редактирование SVG возможно только с помощью визуального инструмента. Для этого примера я использую Adobe Illustrator, но другие инструменты, такие как Sketch, имеют схожие функции редактирования.
Сколько кода вы можете удалить, отредактировав SVG, зависит от его сложности и варианта использования. Следующие советы обычно относятся к иконкам и простой графике. Сложные иллюстрации часто не могут быть отредактированы до такой степени без влияния на конечный результат — и, в некоторых случаях, возможно, лучше использовать PNG или JPG.
Разверните группы
Первое, что я делаю при оптимизации SVG, это удаляю все скрытые слои и разворачиваю группы, где это возможно. Это удаляет все группы контуров в тегах <g> кода SVG. Возможно, вы захотите сохранить некоторые группы, если планируете стилизовать или анимировать их. Вы можете развернуть группу в Illustrator с помощью сочетания клавиш Shift+CMD+G.
Преобразование в контуры
Затем я конвертирую все штрихи в контуры, где это возможно (Рис 04). В Illustrator мы можем сделать это, используя Объект> Расширить. Могут быть некоторые исключения: если вы стилизуете или анимируете stroke-dasharray или stroke-dashoffset, вам нужно оставить их нетронутыми, а также, если вы хотите сохранить ширину обводки при масштабировании SVG.
Вы также можете использовать параметр «Развернуть» в Illustrator для преобразования областей изображения, например простых рисунков, в индивидуально выбираемые контуры. Для сложных или детализированных узоров, возможно, лучше этого не делать.
Преобразование текста в контуры
Иногда полезно преобразовать текст в контуры, если текст носит чисто декоративный характер, или содержимое будет передаваться другим способом, например с заголовком, текстом кнопки или aria-label. Несмотря на то, что использовать элемент SVG <text> полезно, это не всегда имеет смысл, особенно если вам нужно загрузить другой веб-шрифт для отображения текста SVG. Мы можем преобразовать текст в контуры в Illustrator, выбрав его и нажав «Текст»> «Преобразовать в контуры».
Объединение контуров
Теперь, когда все в нашем SVG — это контуры, мы можем объединить их, чтобы уменьшить их количество. Возьмем для примера иконку «поиск»: два пересекающихся контура могут быть объединены в один, что даст единый контур.
Чтобы объединить контуры в Illustrator, мы выбираем их и используем параметр объединения в меню «Навигатор».
Исключением является сценарий, когда мы хотим стилизовать или анимировать контуры по отдельности — в этом случае их объединять не следует.
Удалите дополнительные контуры или группы
Когда контуры объединены, я выполняю последнюю проверку слоев и удаляю все пустые слои или дубликаты контуров, которые могли быть созданы в процессе.
Подгонка артборда
Когда я использую в HTML SVG-иконки, я не хочу, чтобы вокруг них оставалось дополнительное пространство, от которого я не могу избавиться. Это может произойти в случае, если SVG viewBox больше, чем содержимое. В Illustrator я выбираю «Объект»> «Артборды»> «Подогнать к границам графического объекта», чтобы размеры viewBox соответствовали графическому объекту.
Экспорт
Теперь мы готовы сохранить SVG. В Illustrator мы можем выбрать «Файл»> «Сохранить как» и выбрать в качестве формата SVG. В появившемся окне нам будет предложено несколько параметров SVG. Я обычно выбираю «Атрибуты представления», чтобы настроить параметры стиля.
SVG теперь готов к запуску через инструмент оптимизации. Для иконок я обычно в SVGOMG могу настроить большинство параметров. Вы заметите, что код стал намного чище! Но даже это не всегда удаляет все, что можно удалить. В приведенном ниже коде у меня все еще остается пустой элемент <defs>, поэтому стоит выполнить еще одну окончательную ручную очистку и удалить его в редакторе кода. Теперь SVG готов к использованию!
Использование SVG
SVG можно использовать в Интернете различными способами, в том числе:
В теге img
В свойстве CSS background-image
Встроенным в HTML
Спрайты
В частности, встроенные SVG-иконки обеспечивают наибольшую производительность и гибкость, и лучший способ их использования — создание спрайта. Если вы не хотите делать это вручную, доступны пакеты NPM, которые автоматически генерируют SVG-спрайты. Icomoon — это приложение, которое предлагает аналогичный сервис.
Затем, когда дело доходит до их использования, вместо вставки всего SVG, мы можем ссылаться на них с помощью элемента <use>:
<svg xmlns="http://www.w3.org/2000/svg"> <use href="#myIcon" /> </svg>
Поскольку мы используем контуры, то можем применить следующий CSS-код, чтобы дать указание всем файлам наследовать текущий цвет, а не использовать свойство fill: SVG-иконка, используемая в кнопке, будет просто наследовать цвет текста кнопки.
svg { fill: currentColor;
}Нам нужно удалить атрибут fill самого SVG во время процесса оптимизации, чтобы стилизовать его таким образом с помощью CSS.
Заключение
Это выглядит, как много действий, но на самом деле весь процесс занимает удивительно мало времени, если вы хорошо ориентируетесь в графической программе. После нескольких повторений это закрепляется в мышечной памяти. Мне нравится оптимизировать большинство SVG-значков пакетно в начале проекта. Стоит потратить немного времени заранее, чтобы облегчить работу с графикой в будущем.
Автор: Michelle Barker
Источник: https://css-irl.info
Редакция: Команда webformyself.