Когда вы начнете работать с SVG, важно понять, как создавать, экспортировать и оптимизировать файлы SVG для браузеров, которые будут их отображать.
Однако, прежде чем мы начнем, вам нужно четко понять одну вещь. Оптимизация файла SVG начинается с его создания и продолжается до экспорта. Как и на любой HTML-странице, после исправления трудно исправить плохо построенный SVG-файл.
Конечно, вы можете использовать инструменты оптимизации после экспорта, но этот автоматизированный подход может сломать ваш файл неожиданными способами. Наличие глубоких практических знаний о хороших концепциях оптимизации SVG в ручном режиме поможет вам с самого начала.
Это именно то, что вы узнаете сегодня.
Создание SVG в Illustrator
Когда вы создаете графику в Illustrator, которая предназначена для экспорта в SVG, вам необходимо выполнить некоторые шаги и рекомендации, необходимые для правильной оптимизации конечного результата для веб-сайтов. Давайте рассмотрим их сейчас.
Установите правильное цветовое пространство
Illustrator, как и большинство программ для векторной иллюстрации, изначально был разработан для печатной продукции, поэтому его цветовое пространство по умолчанию установлено в CMYK. RGB гораздо больше подходит для использования в Интернете и на экране и имеет более широкую гамму (диапазон цветов), чем CMYK. Поэтому, когда вы создаете новый документ, убедитесь, что цветовой режим установлен на RGB — как вы можете видеть на изображении ниже.
Дайте вашему рисунку правильную структуру
Файл SVG не похож на обычное растровое изображение — сетку пикселей. Это текстовый документ, имеющий определенную структуру.
Как и HTML-документ, вы можете выбирать отдельные элементы и управлять ими. Для этого вам нужно использовать их имена в качестве справочного материала. Я обнаружил, что всегда проще создавать эти ярлыки во время визуального редактирования в Illustrator, чем позже.
По этой причине важно дать осмысленное имя каждому графическому элементу при его создании. Вот что вам нужно знать при создании графики в Illustrator:
-
Слои Illustrator и имена групп слоев используются в качестве идентификаторов для групп SVG
-
Имена символов Illustrator используются в качестве идентификаторов для символов SVG
-
Имена графических стилей Illustrator используются в качестве классов CSS
На рисунках ниже вы можете увидеть, как имена из файла Illustrator отражаются в экспортированном SVG.
Упростите ваши формы, когда это возможно
Формы в чертеже SVG описываются с помощью координатных точек. Чем больше точек на чертеже, тем больше размер файла и тем сложнее его редактировать и поддерживать. Создание небольших, эффективных файлов облегчает вашу жизнь позже.
Чтобы решить эту проблему, вам нужно использовать как можно меньше точек, чтобы создать нужные фигуры. Это может быть достигнуто несколькими способами.
По возможности используйте основные формы SVG вместо путей SVG
Использование простых элементов, таких как line , rect и circle имеет ряд существенных преимуществ.
Во-первых, простые формы гораздо более читабельны для людей — самоочевидно, что круг — это круг, когда мы видим его в нашем SVG-коде, но код для пути может быть любым, пока мы не увидим его визуализацию.
Во-вторых, простые формы почти всегда приводят к меньшим размерам файлов и меньшему количеству кода, что облегчает их поддержку и редактирование. Вы также можете легче управлять ими с помощью их прямых атрибутов, таких как x , y , cx , cy , вместо координат точек, как это происходит с путями.
Чтобы понять, что я имею в виду, на изображении ниже вы можете увидеть простую круглую форму, определенную один раз как элемент круга SVG и один раз как путь SVG. Хотя они визуализируются одинаково, ясно, что форма SVG меньше и более универсальна. Помните, что некоторые графические редакторы — например, расширение экспорта SVG в Fireworks — автоматически преобразуют фигуры SVG в контуры при экспорте. Очевидно, постарайтесь избежать этого.
Упростите свои пути
Путь — это не что иное, как массив координатных точек. Упростить путь означает вырезать некоторые из его точек, что приведет к уменьшению данных пути и уменьшению размера файла. Для этого вы можете использовать команду Object > Path > Simplify… или Warp Tool . В обоих случаях главное состоит в том, чтобы максимально уменьшить точки пути без потери качества визуального оформления.
На рисунках ниже вы можете видеть, как процесс упрощения Illustrator уменьшает точки пути с 32 до 23, что составляет около 25%, и как это отражается на коде. Данные пути уменьшаются, в то время как визуальное качество все еще остается на хорошем уровне.
Решите, следует ли преобразовывать текст в пути
В графике SVG текст является отдельным элементом, и поэтому он доступен для поиска, доступен и легко редактируется. Это ценное качество для текста. Однако, если вы хотите, чтобы ваш текст выглядел точно так, как вы его создавали повсеместно, конечный пользователь должен иметь доступ к правильным шрифтам. Это означает, что вы должны выбрать общие шрифты, ограничивающие вашу креативность, или предоставить веб-шрифт.
Если точная отрисовка текста важнее, чем редактируемость, например, в логотипе, вы можете преобразовать его в контуры, используя команду «Текст» Type > Create Outlines или установив этот параметр на панели экспорта, как вы увидите позже.
Имейте в виду, что при преобразовании большого количества текста в пути размер файла может резко увеличиться, поэтому тщательно подумайте перед преобразованием.
Используйте «фильтры SVG» вместо эффектов фильтра Illustrator или Photoshop.
Illustrator предлагает набор фильтров SVG , которые применяются в реальном времени в браузере (« Effect > SVG Filters ). В то время как эффекты Illustrator или Photoshop всегда «запекаются» в ваших растровых изображениях, встроенных в SVG, фильтры SVG могут быть изменены или удалены в любое время с помощью нескольких нажатий клавиш.
Вы также можете создавать повторно используемые фильтры и / или редактировать их через диалоговое окно « Применить фильтр SVG ».
Подогнать артборд к рисунку
Если вы хотите, чтобы ваш SVG отображался предсказуемо, рекомендуется всегда обрезать артборд до чертежа. Размеры монтажной области — это размеры экспортированного видового экрана SVG, и любое пустое пространство в монтажной области будет создаваться как пустое пространство внутри видового экрана.
В зависимости от ситуации вы можете использовать команду « Object > Artboards > Fit to Artwork Bounds или « Object > Artboards > Fit to Selected Art
На изображении ниже левая звезда будет экспортирована с окружающим пустым пространством, тогда как правая звезда будет экспортирована с ее надлежащими размерами.
Экспорт SVG в Illustrator
Начиная с версии 2015.2, Illustrator CC поставляется с новой панелью экспорта, созданной для оптимизированных веб-файлов SVG. В этом разделе мы увидим, как его использовать.
Примечание. Для тех из вас, кто использует более старую версию Illustrator, здесь есть соответствующее руководство .
Когда ваша графика готова к производству, выберите « Файл»> «Экспорт»> «Экспортировать как…» , затем выберите SVG в качестве параметра для типа файла и нажмите кнопку « Экспорт» . Вы должны увидеть следующую панель:
Давайте рассмотрим варианты, представленные более подробно.
стайлинг
Есть три способа стилизовать ваш SVG, и они представлены в первом выпадающем списке.
- Первый заключается в использовании внутреннего CSS (т.
<style>Блока<style>), который обычно считается наилучшим вариантом в соответствии с принципом разделения проблем . - Второй метод заключается в использовании встроенных стилей CSS (т.е.
). - И третий способ заключается в использовании атрибутов представления SVG
,
На изображении ниже вы можете увидеть разницу между этими тремя вариантами.
Шрифт
Если вы хотите преобразовать текст в контуры, здесь вы можете указать Illustrator сделать это. Если вы хотите сохранить возможность редактирования текста, выберите опцию SVG. Выделенный текст дает вам полный визуальный контроль над вашей типографикой, но при значительных затратах — размер файла уменьшается, а текст теряет возможность редактирования и поиска.
Примечание. Шрифты SVG будут удалены из SVG 2 и считаются устаревшей функцией с удалением поддержки из браузеров.
Картинки
Здесь вы можете выбрать способ обработки любых растровых изображений в SVG. Вы можете сохранить их как внешние файлы или встроить их в SVG как DataURI . Часто Link — это полезный выбор, поскольку он значительно сокращает размер родительского файла SVG и, следовательно, делает его намного более управляемым в редакторе кода.
Тем не менее, опция Embed имеет одно большое преимущество: встроенные изображения никогда не могут быть связаны или отделены от своего «родительского SVG». SVG, использующие связанные ресурсы, покажут значок отсутствующего изображения при первой загрузке, загрузке или перемещении SVG без его «дочерних изображений».
Имейте это в виду, если вам требуется переносимость в SVG.
Как правило, в будущем вы избежите многих головных болей, если сможете просто избегать использования пиксельной графики в своих SVG-файлах, когда это возможно.
Идентификаторы объектов
Как правило, лучший вариант — выбрать имена слоев , потому что это даст вам значимые имена для ваших отдельных элементов SVG. Minimal использует случайные буквенные числа, а Unique использует большую случайную комбинацию символов.
Десятичная дробь
Эта опция определяет, сколько десятичных знаков будут заполнены вашими координатами после десятичной точки. Более высокие числа означают более точные пути, в то время как наименьшее число дает меньше подробного кода и небольшой размер файла.
Как видно из рисунка ниже, путь с 5 десятичными знаками, если он намного больше, чем тот же путь с 1 десятичным знаком, но визуально идентичен.
Имейте в виду, что здесь речь идет о сотых и тысячных пикселя. Более высокие значения будут необходимы только в том случае, если ваша графика очень мала или требует невероятной точности. В большинстве случаев придерживаться значения 1 знака после запятой — будет лучшим вариантом.
преуменьшать
Установите этот флажок только в том случае, если вы экспортируете окончательную версию графического объекта для производства и уверены, что файл больше не будет редактироваться.
отзывчивый
Теоретически, эта опция удаляет атрибуты width и height из вашего SVG-документа, что делает его более отзывчивым. Тем не менее, в большинстве случаев этого недостаточно для того, чтобы ваш SVG действительно отвечал всем браузерам и особенно IE. Мы рассмотрим решение этой проблемы в следующем уроке.
СОВЕТ : Всегда полезно сохранить исходный файл .ai качестве исходного, а затем экспортировать копии SVG с другими настройками из этого родительского файла.
Когда вы выбираете команду « Export As… , в появившемся диалоговом окне экспорта вы, возможно, заметили дополнительную опцию, которая называется Use Artboards . Это становится полезным, когда вы используете несколько монтажных областей — например, когда вы создаете набор значков — и хотите, чтобы каждая монтажная область экспортировалась как отдельный файл SVG.
Как вы видели выше, во время создания и экспорта вашей SVG происходит большая оптимизация. Однако вы можете дополнительно оптимизировать файл с помощью какого-либо специализированного инструмента, такого как SVGO или его версия SVGOMG с веб-интерфейсом.
Имейте в виду, что вы должны быть осторожны при использовании этих инструментов. Они могут легко нарушить функциональность вашего документа. Я советую использовать ручную оптимизацию, когда это возможно, и использовать инструмент автоматической оптимизации, только если это необходимо и с осторожностью.
Вывод
Я не думаю, что я собираюсь объявить SVG будущим веб-векторной графики. Трудно увидеть ситуацию, когда SVG не продолжает набирать больше силы с течением времени. Если вы еще не погрузились, это будет хорошая и разумная инвестиция, чтобы начать изучать это сейчас.
На горизонте появится SVG 2 с множеством новых мощных функций, которые можно поиграть. Впереди захватывающие времена.