Как сохранить svg в illustrator для сайта

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

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.

Демонстрация четких образцов шрифта . Зачем создавать себе проблемы из-за нечетких растровых форматов?

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

Я еще не завершил этот набор иконок SVG, однако при желании можете скачать и пользоваться ими .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Поскольку веб не стоит на месте и веб-стандарты постоянно развиваются, то SVG всегда совершенствуется. Вы видите это на примере первой опции, представленной в диалоговом окне, появляющемся при сохранении файла SVG – 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 позволяет вам указать, как они должны обрабатываться.

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

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

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

Options

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

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

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

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

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

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

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

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

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

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

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

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

За подробностями о поддержке SVG браузерами обращайтесь к caniuse.com .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

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

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

Как сохранить svg в illustrator для сайта

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

О формате SVG

SVG — векторный формат, описывающий изображения в виде фигур, линий, текста и фильтров. Сохраняемые файлы невелики по размеру и обеспечивают высокое качество изображений в Интернете, на печати и даже на портативных устройствах с ограниченными ресурсами в отличие от форматов GIF, JPEG, WBMP и PNG, которые занимают много места. Пользователи могут увеличить изображение SVG на экране без потери резкости, деталей или четкости. Кроме того, формат SVG отлично передает текст и цвет, и пользователи всегда видят изображения таким, как оно выглядит в монтажной области Illustrator.

Формат SVG полностью основан на XML и дает много преимуществ разработчикам и пользователям.

Сохранить объект в формате SVG можно с помощью команд Сохранить , Сохранить как , Сохранить копию и Сохранить для Web и устройств . Для доступа к полному набору параметров экспорта в формате SVG используйте команды Сохранить , Сохранить как и Сохранить копию . Команда Сохранить для Web и устройств предоставляет ограниченный набор экспорта в формате SVG (только те, которые используются для работы в Интернете).

Применение эффектов SVG

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

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

How To Export SVGs For The Web From Illustrator

Something I used to struggle with was exporting SVGs from Illustrator. Our designers make these great comps for us to code up. But what’s the best way to take their vector files and convert them into an optimized SVG on the web?

Before sitting down to figure all this out, I’ll be honest: I had no idea what the right steps were. Adobe Illustrator has not one, not two, but three different ways to save an SVG! Each one opens up a different set of options and selectors.

I want to be clear. I’m not bashing Adobe for having these three different methods. There are actually valid reasons for having three because they each do different things. If you’re a designer, you may want to save your SVG in a format that preserves your guides. You don’t care about file size. You wouldn’t follow these steps at all.

But if you’re happier writing code and get anxious at the idea of opening Illustrator, let’s walk through the optimal path for getting an SVG into a format that is optimized for use on the web.

tl;dr: File > Export > Export As…

This is your golden path.

Don’t be fooled by the Save for Web option. You want to go with File > Export > Export As… Name your file and choose SVG as the format. It may seem like you’re about to save the image without the ability setting any options once you click Export. That button actually opens a new window before the file saves.

In most cases, these will be the options you’ll want to check. We’ll go into why below, but if you’re looking for the tl;dr version, mimic what you see here and you’ll be good to go:

Styling

You’ll almost always want to choose presentation attributes. If we have an SVG that is black but want it to be white in a hover state, we’d use CSS to change the color. If the black color is saved as presentation attributes, it’s easier to define that new color because CSS always overwrites presentation attributes. Specificity can be our friend!

Inline style or internal CSS are useful if we have a giant SVG that we’re trying to optimize in some way. But 99% of the time, presentation attributes is the option you’ll want.

Choosing font is the much more efficient option, especially on bigger images. The only reason you’d want to choose convert to outlines is if you were using an obscure font (maybe in a client logo) or you were having trouble with letters displaying correctly in your export.

Convert to outlines changes your letters from a font to vectors. You may solve a display issue but you’re taking a performance hit and likely breaking accessibility guidelines. Like presentation attributes above, 99% of the time you’ll want to go with font as your option here.

Images

If you are using a raster graphic (like a JPG) in your SVG, you have two options. Choosing link means the raster graphic will live in its own file somewhere else. Choosing embed will make it part of the SVG. There’s no real performance difference either way since the file still has to be loaded. But linking keeps your SVG and non SVG components separate and easier to read. This one is personal preference. I like to embed it unless it’s a raster graphic I’m reusing elsewhere.

Object IDs

This is what is used by CSS or JS to target parts of the image for manipulation. Minimal is usually the best choice. Unique will create *long* strings of text to ensure everything is different. But it’s a pain to copy those strings to CSS or JS. If you’ve named all your layers in Illustrator, you can choose layer names to have those be the IDs.

Since I usually don’t need to be able to target every single aspect of an SVG, I go with minimal and update any classes I do use with a find/replace in my IDE. You could just as easily do this in Illustrator but I’m more comfortable editing code than editing an image.

Minimal is great for file size, but if you have multiple SVGs with minimal class names, you’re going to end up styling things you didn’t mean to because you have duplication. Hence why I go with minimal and then modify as I need to use them.

Decimal

2 is usually the best choice. If you make the number smaller, you’re removing precision of your vectors. If you make the number bigger, you’re adding precision but also adding to the file size.

Minify

Responsive

It might make logical sense to turn this on. But we actually want to leave it off. If we check this box, our SVG won’t have any width or height on it. Until we add a width and height with CSS, our SVGs won’t know what to do. In a lot of cases, they will fill as much space as possible. By turning off responsive, we are adding a width and height to the base SVG. Luckily, if we also define a width and height in our CSS, it will override what is defined in the SVG itself.

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

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.

Демонстрация четких образцов шрифта. Зачем создавать себе проблемы из-за нечетких растровых форматов?

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

Я еще не завершил этот набор иконок SVG, однако при желании можете скачать и пользоваться ими.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Поскольку веб не стоит на месте и веб-стандарты постоянно развиваются, то SVG всегда совершенствуется. Вы видите это на примере первой опции, представленной в диалоговом окне, появляющемся при сохранении файла SVG – 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 позволяет вам указать, как они должны обрабатываться.

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

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

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

Options

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

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

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

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

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

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

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

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

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

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

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

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

За подробностями о поддержке SVG браузерами обращайтесь к caniuse.com.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

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

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