Работа с форматом SVG в Adobe Illustrator 10
Работа с форматом SVG в Adobe Illustrator 10 Меня достаточно часто спрашивают, почему, несмотря на то, что большинство использует Corel Draw, я предпочитаю Adobe Illustrator и постоянно агитирую "менять дрова". Ответ банален и прост — он лучше и практичнее, особенно для тех, кто привык к Adobe-скому интерфейсу. Одно из подтверждений этих слов — возможность работы с SVG, которая кроме как в Illustrator, грамотно не реализована больше нигде.
В настоящее время информация, которая размещена в Интернете, носит смешанный характер. То есть, трудно найти такой сайт, в котором есть только графика или только текст. Именно это повсеместное внедрение графических данных в тексты уже достаточно давно дало толчок к появлению SVG.
Прежде чем говорить об этом формате, вспомним, в каком виде существует графика в Интернете. В основном это три растровых формата: JPEG, GIF и PNG. Кроме того, значительное распространение получила векторная Flash графика.
Какие есть недостатки? Для растровых форматов это:
1. Зачастую слишком большой размер файлов.
2. Отсутствие возможности менять размеры без ухудшения качества (без resampling).
Flash файлы проблемны в том отношении, что все содержание передают как графику, что не очень хорошо для текстового наполнения (конечно, без растрирования шрифта, но с особенностями вывода, которые снижают читабельность и увеличивают размеры файла).
SVG в этом отношении абсолютно революционен (хоть и появился достаточно давно). Он создан на основе интернет-стандарта XML, который представляет из себя определенные, очень жесткие, правила написания html.
Это значит, что SVG, в отличие от SWF, это не компилированный файл. Он описывает изображение при помощи стандартных норм XML и поэтому может создаваться не только в графическом редакторе, но и в редакторе верстки html-страниц, даже в обычном Блокноте (Notepad).
Название SVG расшифровывается как Scalable Vector Graphics и переводится как "масштабируемая векторная графика". Не совсем понятно, почему формат назван так — любая векторная графика легко масштабируется, в этом состоит одно из основных ее свойств. Впрочем, возможно, в этом есть некий маркетинговый ход.
SVG формат объединяет в себе графические данные, текст и интерактивные компоненты и близок этим к тому же SWF. Графические данные могут быть как векторными, так и растровыми. Векторная часть в свою очередь делится на примитивы и линии (кривые Безье). Кроме всего этого, SVG способен передавать и два вида анимации — заданную по кадрам и программно описанную (однако, опыт показал, что для создания анимации куда более эффективен Flash формат). Все тонкости этого формата можно узнать на официальном сайте формата http://www.w3.org/Graphics/SVG. Да, для просмотра SVG нужно скачать специальный плагин, который можно найти на официальном сайте Adobe, либо установить во время инсталляции Illustrator, выбрав его как компонент.
Попробуем проверить все вышесказанное на практике. Создайте простой рисунок, состоящий только из круга и квадрата, параметр Stroke должен быть нулевым. Сохраните его в SVG, используя команду Save As (обычно для этого лучше использовать Save For Web). Затем выйдете из программы и найдите сохраненный файл. Откройте его при помощи программы Notepad.
Большая часть этого документа — техническая информация. Непосредственно отображаемые фигуры задаются только этим кодом:
<g id="Layer_1" i:layer="yes" i: dimmedPercent="50" i:rgbTrio= "#4F008000FFFF" stroke="#000000">
<path i:knockout="Off" stroke= "none" d="M220.513,232.051H0V11. 538h220.513V232.051z"/>
<path i:knockout="Off" fill= "#ED3A3A" stroke="none" d="M469.23,113.461c0,62.664-50.798,113.462-113.461,113.462
s-113.462-50.798-113.462-113. 462C242.308,50.798,293.106,0,355.77,0S469.23,50.798,469.23,113.461z"/>
</g>
В этом и состоит основное достоинство SVG — вы можете редактировать свои иллюстрации непосредственно в html-странице, не используя внешних редакторов. Это очень полезно в том случае, если вам нужно часто обновлять содержимое.
Палитра SVG Interactivity (SVG интерактивность)
Эта палитра предназначена для задания тем или иным объектам, которые должны войти в SVG файл, элементов интерактивности, то есть, взаимодействия с пользователем.
Основано это на языке Java Script, поэтому для того, чтобы работать с SVG Interactivity, нужны определенные навыки программиста или хотя бы понимание основных принципов объектно-ориентированного программирования.
Палитра SVG Interactivity показана на рис.1. В этой палитре всего есть четыре элемента.
Event (Событие). В этом выпадающем меню определяется, на какое событие относительно выделенного объекта будет производиться действие. События нет смысла перечислять — они стандартны как для Java Script, так и для любого другого объектно-ориентированного языка программирования.
JavaScript. В этой строке записываются команды реагирования на событие. Они могут быть настолько разнообразными, что охватить их описанием просто невозможно. Подходят и стандартные Java Script команды.
Link JavaScript File. Присоединить готовые Java Script файлы. Может быть полезно, если вы имеете готовые сценарии или описания процедур.
Пример создания интерактивного SVG
Наш пример будет достаточно простым, но полезным на практике. Мы создадим векторную фигуру, линии которой будут утолщаться при наведении мыши.
Первое, что нужно, это создать эту фигуру. Наш вариант показан на рис.2.
Так как создание интерактивного SVG несет в себе элементы программирования, то, разумеется, всем используемым объектам нужно дать имена, чтобы потом их использовать.
Выделите крест и откройте палитру Layers (Слои). Развернув единственный слой, найдите этот объект и переименуйте его в cross.
ПРИМЕЧАНИЕ
В именах при сохранении интерактивного SVG нельзя использовать пробелы и подчеркивания. Поэтому даже Layer 1 необходимо переименовать в Layer1.
Для переименования нужно дважды кликнуть левой клавишей мыши по объекту и изменить имя в открывшемся окне. Далее сгруппируйте (Ctrl+G) крест с кругом и аналогичным способом переименуйте Group в All.
Так как работать мы будем с Java Script процедурами, то необходимо подключить файл с описанием этих процедур. Этот файл вы можете найти в примерах на сайте Adobe (он называется Events.js) или написать сами, при уверенном владении JS. Еще один вариант — отослать мне письмо, и я вышлю этот файл.
Для того чтобы подключить, воспользуйтесь палитрой SVG Interactivity, нажав кнопку Java Script. Далее нужно нажать кнопку Add и найти необходимый файл на жестком диске.
После этого можно приступать непосредственно к заданию интерактивности. Это делается методами объектно-ориентированного программирования, через события и атрибуты к ним. Если вы занимались программированием хотя бы на любительском уровне, то вам все будет очень просто и знакомо.
В SVG Interactivity выберите событие "onmouseover" и впишите в строке ниже:
elemStrokeWidth(evt, 'all', '2.5')
Это значит, что когда мышь будет находиться над фигурой, строка станет толщиной 2,5 пикселя.
Ниже мы уже не станем комментировать значение таких строк, это имеет отношение скорее к программированию на Java Script.
Далее выберите "onmouseout" и впишите:
elemStrokeWidth(evt, 'all', '1');
Выберите "onmousedown" и впишите:
elemStrokeColor(evt, 'Cross', '#003399');
Выберите "onmouseup" и впишите:
elemStrokeColor(evt, 'Cross', '#000000');
Осталось только сохранить файл. Желательно, чтобы место сохранения содержало еще и используемый JS файл — иначе возможны проблемы.
Особое внимание обратите на то, какого размера получился файл. У нас это всего 720 байт! Никакая GIF анимация по компактности не сравнится.
SVG Filters (SVG фильтры)
SVG фильтры — это совершенно особый тип фильтров, и они будут рассмотрены в отдельном пункте.
Их даже в стандартной поставке достаточно много. Однако, вы можете экспортировать и любые другие фильтры из SVG файлов, используя команду IMPORT.
Основная особенность SVG фильтров заключается в том, что их результат должен быть возможен к передаче через запись в XML (как мы уже говорили, именно на нем основан SVG).
Разумеется, вы не можете записать в SVG абсолютно любой рисунок, как, например, в EPS — особенность формата накладывает отпечатки. Поэтому создатели программы разработали сами несколько эффектов, которые могут быть переданы через XML, и назвали их SVG Filters.
Основная проблема, которая возникает в отношении SVG, это даже не то, как его использовать, а стоит ли его использовать вообще. Я не сомневаюсь в том, что через несколько лет SVG станет одним из самых применяемых стандартов, но сейчас его использование сильно затрудненно.
Первая причина — требуется установка плагина. А весит он не несколько сотен килобайт, как Flash, а более чем 3 мегабайта! Разумеется, поставить его на автоскачивание для всех посетителей, как это делается для Flash, никак нельзя.
То есть, золотое время SVG наступит только тогда, когда плагин будет поставляться вместе с обозревателем в системе. Какие-то намеки относительно этого делались в анонсах Window XP, реализовалось или нет, мне лично не известно. Но для передачи сложных векторных изображений через Интернет, требующих редактирования, например, карт или микросхем, более удобного формата пока не создано и вряд ли это произойдет (разве что на основе этого же SVG).
Если же говорить о конкуренции с Flash, то я думаю, что это несколько неверно. SWF и SVG занимают хоть и близкие, даже в чем-то смежные ниши, но все же назначение у них разное. Flash это, прежде всего, внешние эффекты, работа на зрителя: поддержка звука, огромные возможности для анимирования.
SVG — это формат, который имеет более практичное назначение — передача графических данных, которые невозможно или неудобно передавать другими способами, например, тех же микросхем.
Поэтому эти форматы будут скорее взаимодействовать, чем конкурировать.
Юрий Гурский
В настоящее время информация, которая размещена в Интернете, носит смешанный характер. То есть, трудно найти такой сайт, в котором есть только графика или только текст. Именно это повсеместное внедрение графических данных в тексты уже достаточно давно дало толчок к появлению SVG.
Прежде чем говорить об этом формате, вспомним, в каком виде существует графика в Интернете. В основном это три растровых формата: JPEG, GIF и PNG. Кроме того, значительное распространение получила векторная Flash графика.
Какие есть недостатки? Для растровых форматов это:
1. Зачастую слишком большой размер файлов.
2. Отсутствие возможности менять размеры без ухудшения качества (без resampling).
Flash файлы проблемны в том отношении, что все содержание передают как графику, что не очень хорошо для текстового наполнения (конечно, без растрирования шрифта, но с особенностями вывода, которые снижают читабельность и увеличивают размеры файла).
SVG в этом отношении абсолютно революционен (хоть и появился достаточно давно). Он создан на основе интернет-стандарта XML, который представляет из себя определенные, очень жесткие, правила написания html.
Это значит, что SVG, в отличие от SWF, это не компилированный файл. Он описывает изображение при помощи стандартных норм XML и поэтому может создаваться не только в графическом редакторе, но и в редакторе верстки html-страниц, даже в обычном Блокноте (Notepad).
Название SVG расшифровывается как Scalable Vector Graphics и переводится как "масштабируемая векторная графика". Не совсем понятно, почему формат назван так — любая векторная графика легко масштабируется, в этом состоит одно из основных ее свойств. Впрочем, возможно, в этом есть некий маркетинговый ход.
SVG формат объединяет в себе графические данные, текст и интерактивные компоненты и близок этим к тому же SWF. Графические данные могут быть как векторными, так и растровыми. Векторная часть в свою очередь делится на примитивы и линии (кривые Безье). Кроме всего этого, SVG способен передавать и два вида анимации — заданную по кадрам и программно описанную (однако, опыт показал, что для создания анимации куда более эффективен Flash формат). Все тонкости этого формата можно узнать на официальном сайте формата http://www.w3.org/Graphics/SVG. Да, для просмотра SVG нужно скачать специальный плагин, который можно найти на официальном сайте Adobe, либо установить во время инсталляции Illustrator, выбрав его как компонент.
Попробуем проверить все вышесказанное на практике. Создайте простой рисунок, состоящий только из круга и квадрата, параметр Stroke должен быть нулевым. Сохраните его в SVG, используя команду Save As (обычно для этого лучше использовать Save For Web). Затем выйдете из программы и найдите сохраненный файл. Откройте его при помощи программы Notepad.
Большая часть этого документа — техническая информация. Непосредственно отображаемые фигуры задаются только этим кодом:
<g id="Layer_1" i:layer="yes" i: dimmedPercent="50" i:rgbTrio= "#4F008000FFFF" stroke="#000000">
<path i:knockout="Off" stroke= "none" d="M220.513,232.051H0V11. 538h220.513V232.051z"/>
<path i:knockout="Off" fill= "#ED3A3A" stroke="none" d="M469.23,113.461c0,62.664-50.798,113.462-113.461,113.462
s-113.462-50.798-113.462-113. 462C242.308,50.798,293.106,0,355.77,0S469.23,50.798,469.23,113.461z"/>
</g>
В этом и состоит основное достоинство SVG — вы можете редактировать свои иллюстрации непосредственно в html-странице, не используя внешних редакторов. Это очень полезно в том случае, если вам нужно часто обновлять содержимое.
Палитра SVG Interactivity (SVG интерактивность)
Основано это на языке Java Script, поэтому для того, чтобы работать с SVG Interactivity, нужны определенные навыки программиста или хотя бы понимание основных принципов объектно-ориентированного программирования.
Палитра SVG Interactivity показана на рис.1. В этой палитре всего есть четыре элемента.
Event (Событие). В этом выпадающем меню определяется, на какое событие относительно выделенного объекта будет производиться действие. События нет смысла перечислять — они стандартны как для Java Script, так и для любого другого объектно-ориентированного языка программирования.
JavaScript. В этой строке записываются команды реагирования на событие. Они могут быть настолько разнообразными, что охватить их описанием просто невозможно. Подходят и стандартные Java Script команды.
Link JavaScript File. Присоединить готовые Java Script файлы. Может быть полезно, если вы имеете готовые сценарии или описания процедур.
Пример создания интерактивного SVG
Первое, что нужно, это создать эту фигуру. Наш вариант показан на рис.2.
Так как создание интерактивного SVG несет в себе элементы программирования, то, разумеется, всем используемым объектам нужно дать имена, чтобы потом их использовать.
Выделите крест и откройте палитру Layers (Слои). Развернув единственный слой, найдите этот объект и переименуйте его в cross.
ПРИМЕЧАНИЕ
В именах при сохранении интерактивного SVG нельзя использовать пробелы и подчеркивания. Поэтому даже Layer 1 необходимо переименовать в Layer1.
Для переименования нужно дважды кликнуть левой клавишей мыши по объекту и изменить имя в открывшемся окне. Далее сгруппируйте (Ctrl+G) крест с кругом и аналогичным способом переименуйте Group в All.
Так как работать мы будем с Java Script процедурами, то необходимо подключить файл с описанием этих процедур. Этот файл вы можете найти в примерах на сайте Adobe (он называется Events.js) или написать сами, при уверенном владении JS. Еще один вариант — отослать мне письмо, и я вышлю этот файл.
Для того чтобы подключить, воспользуйтесь палитрой SVG Interactivity, нажав кнопку Java Script. Далее нужно нажать кнопку Add и найти необходимый файл на жестком диске.
После этого можно приступать непосредственно к заданию интерактивности. Это делается методами объектно-ориентированного программирования, через события и атрибуты к ним. Если вы занимались программированием хотя бы на любительском уровне, то вам все будет очень просто и знакомо.
В SVG Interactivity выберите событие "onmouseover" и впишите в строке ниже:
elemStrokeWidth(evt, 'all', '2.5')
Это значит, что когда мышь будет находиться над фигурой, строка станет толщиной 2,5 пикселя.
Ниже мы уже не станем комментировать значение таких строк, это имеет отношение скорее к программированию на Java Script.
Далее выберите "onmouseout" и впишите:
elemStrokeWidth(evt, 'all', '1');
Выберите "onmousedown" и впишите:
elemStrokeColor(evt, 'Cross', '#003399');
Выберите "onmouseup" и впишите:
elemStrokeColor(evt, 'Cross', '#000000');
Осталось только сохранить файл. Желательно, чтобы место сохранения содержало еще и используемый JS файл — иначе возможны проблемы.
Особое внимание обратите на то, какого размера получился файл. У нас это всего 720 байт! Никакая GIF анимация по компактности не сравнится.
SVG Filters (SVG фильтры)
SVG фильтры — это совершенно особый тип фильтров, и они будут рассмотрены в отдельном пункте.
Их даже в стандартной поставке достаточно много. Однако, вы можете экспортировать и любые другие фильтры из SVG файлов, используя команду IMPORT.
Основная особенность SVG фильтров заключается в том, что их результат должен быть возможен к передаче через запись в XML (как мы уже говорили, именно на нем основан SVG).
Разумеется, вы не можете записать в SVG абсолютно любой рисунок, как, например, в EPS — особенность формата накладывает отпечатки. Поэтому создатели программы разработали сами несколько эффектов, которые могут быть переданы через XML, и назвали их SVG Filters.
Основная проблема, которая возникает в отношении SVG, это даже не то, как его использовать, а стоит ли его использовать вообще. Я не сомневаюсь в том, что через несколько лет SVG станет одним из самых применяемых стандартов, но сейчас его использование сильно затрудненно.
Первая причина — требуется установка плагина. А весит он не несколько сотен килобайт, как Flash, а более чем 3 мегабайта! Разумеется, поставить его на автоскачивание для всех посетителей, как это делается для Flash, никак нельзя.
То есть, золотое время SVG наступит только тогда, когда плагин будет поставляться вместе с обозревателем в системе. Какие-то намеки относительно этого делались в анонсах Window XP, реализовалось или нет, мне лично не известно. Но для передачи сложных векторных изображений через Интернет, требующих редактирования, например, карт или микросхем, более удобного формата пока не создано и вряд ли это произойдет (разве что на основе этого же SVG).
Если же говорить о конкуренции с Flash, то я думаю, что это несколько неверно. SWF и SVG занимают хоть и близкие, даже в чем-то смежные ниши, но все же назначение у них разное. Flash это, прежде всего, внешние эффекты, работа на зрителя: поддержка звука, огромные возможности для анимирования.
SVG — это формат, который имеет более практичное назначение — передача графических данных, которые невозможно или неудобно передавать другими способами, например, тех же микросхем.
Поэтому эти форматы будут скорее взаимодействовать, чем конкурировать.
Юрий Гурский
Компьютерная газета. Статья была опубликована в номере 09 за 2002 год в рубрике soft :: графика
