Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Design & Illustration
  2. SVG
Design

Файли SVG: от Illustrator к Веб

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called Web and Interface Design With Vector.
Create a Set of Glossy Labels and Save them for Web
Quick Tip: How to Create a Simple Web Button Set Using the Appearance Panel

Russian (Pусский) translation by AlexBioJS (you can also view the original English article)

Scalable Vector Graphics (SVG) – векторный формат изображений, который начал развиваться с 1998 года. Он всегда разрабатывался с учетом веб, однако только сейчас веб собственно начал наверстывать упущенное. Сегодня никто не отрицает его важность, так что давайте  взглянем, как перенести SVG из Illustrator в веб-браузер.

Обратите внимание: я использую Adobe Illustrator CC для демонстрации примеров в этом руководстве, однако в других версиях имеются подобные (если не идентичные) опции и инструменты.

Чем полезен SVG?

Формат SVG был разработан и поддерживается World Wide Web Consortium (W3C) (* Консорциум World-Wide Web. Здесь и далее примеч. пер.). W3C состоит из группы умных людей, которые пытаются стандартизировать веб, делая его открытым и доступным местом для всех.

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

Размер файла всегда является проблемой в веб (никто не хочет ожидать, пока изображение размером 5Tb загрузится в браузер по мобильному соединению), и поэтому у нас имеется SVG – упрощенный векторный формат. Он основан на XML, и много лишнего «хлама» удаляется, благодаря чему получается относительно легковесный файл.

Наконец, при наличии этих строительных блоков XML содержимым файла SVG можно манипулировать и задавать для него стилевое оформление так же, как и для любого другого элемента веб-страницы. Части внутри SVG могут быть изолированы, цвета и насыщенность шрифта могут быть изменены, как и прозрачность, мы даже можем применить определенные фильтры (такие как фильтр для добавления эффекта размытости), даже добавить анимацию – все это при помощи кода CSS и JavaScript.

Когда бы вам мог пригодиться SVG?

Преимущества четкости линии и возможности манипулирования графическим объектом говорят сами за себя, однако в каких случаях вы можете ими воспользоваться? Ниже приводится список случаев, когда использование SVG наиболее эффективно:

Обычная графика: Если вы используете графику на вашем сайте, то обдумайте, могла ли бы она быть представлена в формате SVG. Если да, то почему бы не воспользоваться им? Искусство фотографии могло бы послужить примером области, где использование SVG не имеет смысла, однако в остальных случаях поразмышляйте о возможности использования SVG.

Demonstrating crisp font specimens Why bother with fuzzy raster formats
Демонстрация четких образцов шрифта. Зачем создавать себе проблемы из-за нечетких растровых форматов?

Иконки: веб-сайты во всем мире усыпаны иконками; их все понимают (если их использование уместно) и при помощи них сокращается время, необходимое пользователям для взаимодействия с интерфейсом. Иконки сегодня часто добавляются на веб-сайты при помощи шрифтов для веб, однако также могут быть добавлены на страницу в формате SVG. Идеально ровные и четкие иконки для всех, чудесно.

I havent finished this set of SVG icons yet but youre welcome to download and use them
Я еще не завершил этот набор иконок SVG, однако при желании можете скачать и пользоваться ими...

Логотипы: если и есть что-то, что компания должна тщательно оберегать, то это собственную идентичность. Очевидно, что формат SVG предоставляет вам наилучший способ отображения фирменной символики в веб. Цвета можно задать с высокой точностью, качество линии безукоризненное, и тот же самый файл может быть использован повторно на одном веб-сайте, однако изменен в зависимости от обстоятельств. Великолепно.

Recognise this logo

Узнаете логотип?

Художественное оформление: мне не нужно убеждать вас в том, что этот формат полезен для мастеров векторного искусства.

SVG decoration courtesy of fixateit
Изображение в формате SVG выше предоставлено fixate.it.

Анимация: при помощи CSS и JavaScript для веб открылся целый мир анимации. SVG также является великолепным посредником в этот мир из-за всех перечисленных мною ранее причин. Можете представить кнопки, которые анимируются, когда вы перемещаете курсор мышки поверх них? Иконки, которые предоставляют вам непосредственную персональную обратную связь? Действительно, пределов нет.

Iconic demonstrating SVG feedback
Иконка с Iconic, демонстрирующая обратную связь, реализованную при помощи SVG

Что ж, вот что из себя представляет SVG. Векторный формат, разработанный с учетом веб. Давайте посмотрим, как мы можем его использовать.

Сохраняем файл в формате SVG

Мы будем работать с простейшим изображением, чтобы продемонстрировать вам, как работать с SVG.

Новый документ

Откройте Illustrator, начните создавать новый документ (File > New Document), дайте ему название при желании и задайте в качестве размеров Artboard (* монтажной области) 300 x 300px.

svg-new-document

Выбираем изображение

На данном этапе то, что вы используете в качестве своей демоверсии вектора, особой роли не играет, однако выберите что-нибудь относительно простое. Я воспользовался глифом "No Pirates Allowed", который бесплатно доступен в составе шрифта "Webdings" (никогда не думал, что он мне может пригодиться!).

Перейдите в панель Glyphs (Type > Glyphs), затем выберите шрифт "Webdings" для просмотра различных доступных персонажей.

svg-webdingst

После выбора инструмента Text Tool выберите Artboard, затем дважды нажмите по вашему глифу, чтобы им воспользоваться.

Преобразуем в контур

Теперь мы преобразуем этот глиф в контур.

Обратите внимание: в SVG действительно имеется поддержка текстовых объектов, однако для того, чтобы продемонстрировать, как работать с этой технологией на фундаментальном уровне, мы остановим свой выбор на путях.

Выберите глиф при помощи Selection Tool (V):

svg-select

Затем выберите Type > Create Outlines.

svg-outlines

Супер! Теперь у нас имеется векторный объект, созданный на основе путей.

Сохраняем результат

Для того чтобы сохранить этот документ в формате SVG,  выберите File > Save или File > Save As.. В выскочившем диалоговом окне выберите расположение для файла, дайте ему название (если еще этого не сделали) и, что чрезвычайно важно, выберите в качестве формата SVG:

svg-save

Далее появится другое диалоговое окно, в этот раз с некоторыми опциями SVG.

svg-options

Вообще-то, вы можете просто проигнорировать эти опции на данном этапе. Все значения по умолчанию заданы так, как вы бы того хотели при обычных обстоятельствах.

Мы немного рассмотрим некоторые из этих опций позднее, однако в этот раз жмите OK.

svg-file

У нас имеется файл SVG!

И затем идут те опции SVG

Мы пропустили опции SVG, поскольку они не заслуживают особого внимания. Однако для полноты картины давайте рассмотрим их.

Сравнение SVG с SVGZ

Начнем с того, что мы могли бы выбрать два потенциальных формата в диалоговом окне для сохранения файла.

svg-save-dialogue

SVGZ – сильно сжатая (архиватором zip, я предполагаю) версия SVG. В результате получается файл меньшего размера, однако код XML в самом файле становится непонятным, что помешало бы нам манипулировать векторами при помощи кода CSS и JavaScript, если бы мы того захотели.

SVG Profiles (* Профили SVG)

Поскольку веб не стоит на месте и веб-стандарты постоянно развиваются, то SVG всегда совершенствуется. Вы видите это на примере первой опции, представленной в диалоговом окне, появляющемся при сохранении файла SVG – SVG Profiles. Варианты профилей в данный момент выглядят следующим образом:

svg-profiles

Они означают (приблизительно) следующее:

  • SVG 1.0: первое воплощение SVG (2001)
  • SVG 1.1: почти то же самое, что и SVG 1.0, за исключением того, что в версии SVG 1.1 могут быть выделены дальнейшие подтипы, которыми являются...
  • SVG Tiny 1.1: это первый подтип SVG 1.1, оптимизированый с учетом мобильного веб. Это очень упрощенная форма SVG, предназначенная для «мобильных устройств с крайне ограниченными возможностями». Эта версия не поддерживает возможность добавления градиентов, прозрачности, масок, символов, паттернов, перечеркнутого текста, вертикально-ориентированного текста или эффектов, реализуемых при помощи фильтров SVG.
  • SVG Tiny 1.1+: слегка усовершенствованная версия SVG Tiny 1.1, в которой добавлена поддержка градиентов и прозрачности.
  • SVG Basic 1.1: это второй подтип SVG 1.1, разработанный для более продвинутых мобильных устройств, таких как смартфоны. В этой версии нет поддержки вырезания непрямоугольной области и некоторых эффектов, реализуемых при помощи фильтров SVG.
  • SVG Tiny 1.2: изначально предполагалось, что эта версия станет следующей полной спецификацией SVG, однако в конечном итоге стала усовершенствованием подтипа Tiny. Не спрашивайте меня, в чем же там заключается различие.

Скоро мы сможем добавить SVG 2.0 в этот перечень. На самом деле нюансы этих профилей нас почти не интересуют. При помощи SVG мы можем реализовать все что угодно, однако при работе с простыми векторами придерживайтесь текущей версии по умолчанию – SVG 1.1, и с  вашей графикой будет все всегда в порядке в веб.

Fonts (* Шрифты)

SVG-файлы могут содержать намного больше, чем просто векторные пути. Текстовые объекты являются одним из таких примеров, и опция Font позволяет вам указать, как они должны обрабатываться.

svg-fonts
  • Adobe CEF: при этом значении опции используется хинтинг шрифта (* механизм уменьшения насыщенности (толщины очертаний)) для улучшения типографской разметки текста. Однако этот вариант не поддерживается всеми программами просмотра SVG.
  • SVG: при этом значении опции поддерживается максимум возможностей; этот вариант поддерживается всеми программами просмотра SVG, однако нет улучшения типографской разметки текста.
  • Convert To Outlines: при этом значении опции убирается поддержка всех возможностей редактирования, однако текст остается тем же, где бы он не просматривался. В результате выбора этого варианта слегка увеличивается размер файла, поскольку необходимо описать пути, а не просто указать, какие символы присутствуют.

Часть опции для настройки обработки шрифта включает в себя Subsetting. Настраивать эту опцию стоит только тогда, когда вы решили не преобразовывать ваш текст в контур.

svg-subsetting

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

Options

Раз уж мы обсуждаем тему встраивания, то знайте, что последние оставшиеся здесь опции также могут влиять на размер файла.

svg-embed

Как и в случае со шрифтами, SVG-файлы могут содержать растровые изображения. Там, где вы видите Image location, выберите «Embed», чтобы изображения добавились в файл в форме кода, или выберите «Link», чтобы там просто размещались ссылки на изображения. Эта опция работает аналогично тому, как вы размещаете изображения в самом Illustrator, и выбор варианта значительно влияет на конечный размер файла.

Последний флажок здесь позволяет вам при необходимости сохранить возможность редактирования файла в Illustrator. При этом будут сохранены детали обо всех слоях, фильтрах и эффектах, символах и т.д. Опять-таки, не отмечайте флажок, если ваш SVG-файл готов к стадии публичного доступа приложения и его размер важен.

Обратите внимание: рекомендуется, чтобы у вас имелся рабочий AI-файл (* файл в формате Adobe Illustrator Artwork), которым можно воспользоваться для редактирования изображения.

Несколько кнопок

svg-final

Наконец, при помощи трех кнопок в нижней части диалога для настройки опций выполняется следующее:

  • More Options: давайте не будем их сейчас обсуждать, хорошо?
  • SVG Code...: показ кода XML, содержащегося в SVG-файле, прямо в текстовом редакторе.
  • Globe: открытие SVG-файла прямо в веб-браузере. Именно так вы можете проверить, все ли с ним в порядке.

Использование SVG в веб

Если вы не работали непосредственно с веб, HTML, браузерами и подобным, то вам нужно обратить ваше внимание на несколько моментов.

Веб-браузера

Во-первых, давайте продемонстрируем, что ваш браузер может замечательно работать с этим форматом. Нажмите при помощи правой кнопки мыши по вашему новому отличному SVG-файлу и выберите в меню пункт для его открытия в вашем стандартном браузере:

svg-browser

Более старые веб-браузера, такие как Internet Explorer 8 и более ранние версии, не поддерживают формат SVG и, к сожалению, не подыграют нам.

More details of SVG and browser support can be found on caniusecom
За подробностями о поддержке SVG браузерами обращайтесь к caniuse.com.

Однако если вы используете современный браузер, SVG-файл будет открываться и отображаться без каких-либо проблем.

svg-in-browser

Первое, на что следует обратить внимание, – то, что у изображения остались изначально заданные размеры. Наше изображение отобразилось в области с размерами 300 x 300px, внешние границы которой были заданы на основании размеров монтажной области, и иконка пирата разместилась там, где и должна быть, – в центре.

svg-in-browser-artboard

Встраивание SVG в веб-страницу

На данный момент мы создали SVG-файл и открыли его в браузере, чтобы проверить, все ли с ним в порядке. Теперь пришло время воспользоваться нашим файлом надлежащим образом на веб-странице.

Для начала нам необходима веб-страница. Нам достаточно будет пустого файла с расширением .html, сохраненного в обычном текстовом редакторе. В него не нужно добавлять никакого кода, однако если вы заинтересованы в освоении основ HTML, то взгляните на руководство The Best Way to Learn HTML, когда у вас будет время.

Ниже показан мой файл, открытый в TextEdit для Mac OS X, однако вы можете использовать любой текстовый редактор или редактор кода, который вам нравится.

svg-text-editor

Этот файл откроется в веб-браузере вполне нормально в том виде, в каком он сейчас, однако нам необходимо добавить некоторый код HTML-разметки, чтобы встроить SVG. Для этого имеется несколько подходов:

Подход, реализуемый при помощи тега <img>

Во-первых, мы можем воспользоваться тегом для добавления изображений (который вы, вероятно, использовали для добавления файлов JPG, PNG и т. д.), в котором указан точный путь к файлу в атрибуте src="". Добавьте этот фрагмент кода в ваш HTML-файл:

Если путь указан корректно, то ваша HTML-страница откроется в браузере подобным образом:

svg-in-browser-html

Да, я понимаю, что сейчас все выглядит так же, как и тогда, когда мы открыли SVG-файл непосредственно в веб-браузере, однако сейчас у нас имеется намного больше возможностей для работы с ним! Например, мы можем тут же увеличить SVG при помощи атрибута width="".

A beautiful crisp SVG infinitely scalable
Прекрасная четкая SVG, которую можно масштабировать сколько угодно!

Этот подход, вероятно, – наипростейший, однако имеет свои недостатки. Некоторые браузера, по соображениям безопасности, ограничат круг ваших возможностей для работы с SVG (при помощи JavaScript, например). Давайте взглянем на альтернативные подходы.

Подход, реализуемый при помощи тега <object>

Тег <object> используется подобным образом, однако вы указываете путь к файлу следующим образом:

Результат получается тот же самый:

svg-in-browser-html

Вы можете даже поместить предупреждение в содержимом <object> для отображения в случае, если браузер не поддерживает SVG:

Многие веб-дизайнеры согласны с тем, что этот подход на данный момент – наиболее надежный и гибкий способ использования SVG в веб-странице.

Подход, при котором код SVG встраивается непосредственно в документ

Мы говорили о том, что SVG работает на основе XML, и если вы откроете ваш текстовый редактор, то увидите нечто подобное:

svg-xml

Вау, что за куча бессмыслицы! Собственно, по прошествии стартового шока у вас должно будет получиться увидеть некоторый смысл среди нее. Мы можем использовать этот код XML прямо в документе, встроив его непосредственно в HTML-файл.

Когда вы начнете узнавать XML-структуру SVG, вы сможете удалить некоторые кусочки из файла, что поможет уменьшить его размер.

При желании можете запросто удалить строку с <!DOCTYPE>, комментарий с !-- Generator: Adobe Illustrator и даже код с <?xml

Все, что вам в действительности необходимо, это упрощенная версия кода, включающего только несколько тегов XML:

Наш SVG:

Подход, при котором SVG-изображение добавляется в составе фонового изображения, задаваемого в коде CSS

При помощи CSS (языка для добавления стилевого оформления, используемого в паре с HTML) мы можем также указать, чтобы наш файл SVG служил в качестве фонового изображения элемента нашей веб-страницы.

Мы выходим за рамки этого руководства сейчас, однако если вы хотите разобраться с основами CSS, то взгляните на The Best Way to Learn CSS.

Мы можем воспользоваться отдельным файлом CSS, подключая его в нашем HTML-документе, или же тегами <style> непосредственно в нашем HTML-документе. Наше стилевое правило выглядело бы следующим образом:

Оно утверждает, что наш SVG-файл должен отображаться как фон нашего HTML-элемента.

Заключение

На этом мы заканчиваем с основными сведениями! В этом руководстве мы рассмотрели, как создавать SVG и основы использования SVG в веб.

Если вы всегда хотели узнать, что такое SVG, однако никогда точно не знали, почему вам следует использовать эту технологию, то я надеюсь, что это руководство прояснило вам ситуацию. Потенциал этого формата огромен и постоянно растет благодаря воображению и техническому мастерству людей из индустрии веб и графики.

У нас имеется на подходе больше руковдств на тему анимаций и взаимодействия с SVG-графикой, так что следите за обновлениями!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.