Главная страница «Первого сентября»Главная страница журнала «Информатика»Содержание №9/2008


Бесплатный сыр

Inkscape: векторная мышеловка

Для нашей компьютерной мыши появилась новая мышеловка. Масштабируемая. С великолепным куском бесплатного сыра — форматом SVG. Начнем по порядку.

В прошлый раз мы знакомились с бесплатным редактором растровой графики (GIMP). На этот раз пришла очередь редактора векторного. Знакомьтесь: Inkscape.


Логотип Inkscape

Главная область владычества растровых изображений — это, конечно, цифровая фотография. Да и большинство изображений Интернета в основном в трех растровых форматах — JPEG, GIF и PNG, а они тоже растровые. Однако не будем забывать, что качество растрового изображения ограничено его размером, количеством используемых цветов, типом цветопередачи. Размер файла растрового рисунка прямо пропорционален всем этим параметрам, что не позволяет создавать масштабные графические изображения в растровых форматах. Для создания рекламного (или поздравительного) плаката, большого календаря, фотообоев или изображения, которое мы хотим перенести, например, на футболку следует использовать изображения в формате векторной графики, или, что то же самое, геометрическое моделирование рисунка.

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

Самыми популярными, мощными и удобными в работе среди векторных редакторов для операционной системы Windows считаются пакеты Corel Draw и Adobe Illustrator. Но это дорогие коммерческие проекты.

В 2003 году в их ряды вступил свободно распространяемый продукт — кроссплатформенный (MS Windows, Linux и Mac OS X) векторный редактор Inkscape, который на сегодняшний день является, возможно, самым перспективным из открытых редакторов векторной графики.

Распространяется он по лицензии GNU GPL, то есть пакет не только доступен для бесплатного скачивания, но и открыт для участия в своем развитии практически всех желающих (для большинства пользователей это означает, что при желании можно обратиться к разработчикам со своими предложениями по улучшению и расширению алгоритмов). Сейчас уже можно говорить о том, что Inkscape начинает догонять по возможностям коммерческие продукты. К тому же он предлагает пользователям новые форматы хранения графической и текстовой информации, которые позволяют добиться более высокого качества и точности изображения, обладая существенно меньшим размером файла.

Интерфейс у Inkscape очень простой. Когда в первый раз открываешь поле редактора, даже возникает ощущение, что он, наверное, мало что может (особенно после растровых редакторов со множеством окон и окошек). Но изюминка Inkscape в том и заключается, что, несмотря на небольшой набор инструментов, он весьма и весьма эффективен. Настолько, что его можно сравнивать даже с CorelDraw. Только мы этого делать все же не будем . Вот только обратим внимание, что интерфейсы похожи. И многие иконки похожи.

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

Колесико мыши в Inkscape поможет двигать документ вверх-вниз и даже вправо-влево, если при этом нажать и удерживать клавишу . С нажатым колесиком можно двигать холст в любом направлении, а с нажатой клавишей прокрутка колесика будет изменять масштаб документа. Масштабирование в Inkscape несравненно лучше, чем, например, в Gimp или Sodipodi (векторный редактор, из которого “вырос” Inkscape). Минимально возможный масштаб равен 1%, а максимальный — целых 25 600%! Можно указать и любой (целый) произвольный масштаб, что очень удобно.

Объектом работы в Inkscape, как и в любом векторном редакторе, является элемент изображения: прямая, кривая, круг, прямоугольник и др.

Простейший путь создать произвольную фигуру — нарисовать ее при помощи Карандаша (“Рисовать произвольные контуры”)


Векторный карандаш

С помощью Пера (инструмент “Рисовать кривые Безье и прямые линии”) можно получить более правильные фигуры. Каждый щелчок мыши будет создавать узел, серия щелчков создает последовательность из прямых отрезков линии. Щелчок и смещение создает гладкий узел Безье с двумя узлами управления, лежащими на одной линии, но направленными в разные стороны. Если нажать при перемещении узла управления, будет крутиться только один ус, другой зафиксируется. Нажатие клавиши закончит линию. Если не удался последний сегмент незаконченной линии, его можно отменить нажатием .

Перо и Карандаш создают так называемые “контуры”. Контур — это последовательность отрезков прямых линий и/или кривых Безье, которая, как и любой другой объект в Inkscape, может иметь собственные параметры заполнения и штриха. В отличие от фигур, создаваемых с помощью инструментов для рисования прямоугольников, эллипсов, звезд и спиралей, контур может свободно редактироваться смещением любого из его узлов (а не только предустановленных рычагов) или перетаскиванием сегмента. Любая фигура или текст может быть преобразована в контур. Эта операция никак не изменит внешний вид объекта, но изменит все его специфические свойства. Уже нельзя будет округлить углы прямоугольника или редактировать текст, но зато можно будет редактировать их узлы.


Объекты, контуры и заливки

Выполнив операцию группировки нескольких объектов, можно создавать комбинации объектов или новый сложный единый объект. Независимо от внешнего вида любой векторный объект имеет ряд общих характеристик. Область внутри замкнутого круга можно залить одним цветом, смесью цветов или узором. У замкнутого объекта не может быть различных заливок или соединительных линий различной толщины и различных цветов.

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


+ перемещение узла по касательной искажает звезду случайным образом

Еще один инструмент для создания сюрреалистических объектов и узоров — не удивляйтесь — каллиграфическое перо. Конечно, оно создано для того, чтобы с помощью различных настроек и тренировок добиться, например, красивого готического или размашистого итальянского написания.


“Штатное” применение каллиграфического пера

Но можно таким пером и рисовать (очень необычно получается), и стилизованные узоры создавать. Попробуйте “поиграть” с установками ширины пера и сужения. Дрожание при этом установите на максимум (единица). Если мышь при этом будет передвигаться с разной скоростью (то резко, то притормаживая), узор получится сам собой.


Абстрактная каллиграфия

Помимо создания каллиграфических шедевров, Inkscape обладает и массой других возможностей для работы с текстом. Например, можно разместить текст по поверхности любой созданной кривой. Для этого достаточно выбрать текст и контур одновременно и использовать функцию “Разместить по контуру” из меню “Текст”. Текст разместится от начала контура. Самый надежный вариант — использовать отдельный контур для заполнения текстом. В этом случае вы будете гораздо лучше контролировать ситуацию, чем в случае заполнения текстом одного из уже существующих элементов.

Еще одна интересная функция — текстура по контуру. Это мощное расширение позволяет гнуть, повторять или растягивать уже не текст, а текстуру вдоль скелетного контура. Основные параметры функции — “Копии текстуры” (одиночная вытянутая копия текстуры, повторенная вытянутая, одиночные и повторенные) и “Тип деформации” (“Змея” гнет текстуру ровно по плоскости рисунка, ширина не зависит от направления, “Лента” гнет текстуру как вертикальную ленту или как каллиграфический штрих с максимальной фиксацией, так что ширина зависит от направления).

Остальные параметры позволяют корректировать интервалы между копиями текстуры и их смещение в двух направлениях (вдоль скелетного контура и перпендикулярно ему).

Для преобразования растровых изображений в векторные предусмотрена функция векторизации. Ее целью не является создание точной копии исходного изображения или готового продукта. Ни одному векторизатору это не под силу. Все, что возможно, — это получить набор контуров. После векторизации рекомендуется воспользоваться функцией Контуры/Упростить на полученном контуре, чтобы уменьшить количество узлов. Результат может получиться грубоватым, но добиться точной копии все равно практически невозможно. Зато после упрощения получается набор кривых и конечное число узлов, с которыми можно работать дальше.

Как любой порядочный редактор Inkscape позволяет отменить целый ряд последних шагов. Более того, с помощью диалога “История действий” (Правка/История действий) можно быстро вернуться к любому этапу создания рисунка. Тип каждого изменения сопровождается в окне “История действий” своим значком и кратким описанием. Однотипные действия группируются и сворачиваются под треугольник, для каждой группы отображается число сгруппированных однотипных действий. Щелчком по событию в списке можно переместиться по истории действий вперед или назад.




Результаты векторизации при разном числе сканирований объекта

Никого сегодня уже не удивляет, что практически вся информация, размещенная в Интернете, — это тем или иным образом оформленный/иллюстрированный текст. То есть сайты наполнены и текстом, и графическими объектами. Для того чтобы страницы загружались быстрее (ведь графика передается намного медленнее текста), картинки стараются сделать небольшими и “оптимизированными”, довольно низкого качества. В лучшем случае на качественные изображения большего размера делаются ссылки. Но все равно многие пользователи такие изображения не загружают, экономя свое время и деньги. Такое положение вещей уже достаточно давно дало толчок к появлению нового графического формата SVG (Scalable Vector Graphics — масштабируемая векторная графика).

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

Самой яркой особенностью SVG является тот факт, что этот формат объединяет в себе и графические данные, и текст, и даже интерактивные компоненты. Причем SVG-файл может создаваться даже в обычном Блокноте!

Хотите небольшой фокус? Откройте простой текстовый редактор (тот же Блокнот, например), наберите команды:

<svg width = "300" height = "100" >
<rect x = "10" y = "10" width = "210" height = "70" fill = "black"/>
</svg>

Сохраните файл под именем, например, “proba.txt” и потом переименуйте его в “proba.svg”. Теперь откройте этот файл в Inkscape. А вот и фокус! Мы ничего не рисовали и не компилировали, а получился прямоугольник!


Результат интерпретации SVG-файла

Дело в том, что формат SVG создан на основе интернет-стандарта XML (фактически — на основе набора определенных правил написания кода HTML). То есть SVG описывает изображение при помощи HTML. Революция, можно сказать! В отличие от SWF (Flash) SVG-изображение не является компилированным файлом.
И создаваться может не только в графическом редакторе, но и в любом редакторе верстки HTML-страниц. Поэтому неудивительно, что и в обычном Блокноте.

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

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

Благодаря хорошей масштабируемости (в любую сторону) SVG-файлы хорошо отображаются не только на компьютерных экранах, но и на КПК, и на экранах мобильных телефонов. Причем SVG-графика может быть создана с помощью любого языка программирования (JavaScript, Java или C#) и, соответственно, может управляться в режиме работы приложения.

Графические возможности SVG чрезвычайно велики и вполне сравнимы с возможностями пакетов Corel Draw и Adobe Illustrator:

  • произвольные заливки, штриховки, градиенты, заливки заданным растром, а также произвольным фрагментом векторного изображения,

  • разнообразные стили линий — линии произвольной толщины, штриховые, с различными стилями угловых и конечных точек,

  • возможность использования кривых Безье (кубических и квадратичных),

  • поддержка прозрачности всего изображения или его части с заданной степенью,

  • возможность применения фильтров, типичных для растровой графики: размытие, попиксельное смешивание, наложение,

  • поддержка Unicode — возможность отображения в одном SVG-документе текстов на различных языках и различными шрифтами,

  • расположение текстовых строк вдоль произвольных кривых,

  • встроенные развитые средства анимации, позволяющие без программирования в режиме реального времени менять практически все атрибуты изображения или его фрагмента,

  • встроенные средства для создания интерактивности, а также поддержка JavaScript,

  • поддержка каскадных таблиц стилей (CSS), что позволяет легко манипулировать визуализацией данных: достаточно изменить параметры в одном месте, и дизайн изменится для всего сайта.

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

Подробное описание формата SVG доступно на официальном сайте http://www.w3.org/Graphics/SVG.

Вы еще не забыли, что мы сегодня знакомимся с векторным редактором Inkscape? И теперь уже понимаем, что означают слова “способ редактирования векторной графики, секрет которого заключается в формате SVG”. Если до этого момента мы рисовали в Inkscape, не слишком задумываясь, в каком формате редактор предлагает сохранить результаты нашего творчества, то теперь обратим внимание, что в Inkscape есть собственный встроенный XML-редактор, отображающий древовидную структуру документа со всеми объектами, их свойствами и даже слоями. Встроенный XML-редактор позволяет вам изменить почти все параметры документа без необходимости использования внешнего текстового редактора. Кроме того, Inkscape поддерживает больше возможностей формата SVG, чем доступно через графический интерфейс. К ним относится, например, отображение масок и обтравочных контуров; через графический интерфейс их пока что нельзя ни создать, ни изменить.

К элементам SVG-файла можно применять фильтры — специальные модификаторы для создания эффектов, подобных применяемым при обработке растровых изображений (размытие, выдавливание, сложные системы трансформации и др.).

Единственным доступным в Inkscape фильтром пока что является Гауссово размывание.

С его помощью вы можете мягко и естественно размывать любые объекты в Inkscape: контуры, фигуры, группы, текст, растровые изображения. Для размывания выбранного объекта нужно открыть раздел меню “Заливка и штрих” и установить ползунок “Размывание” на нужное число (в процентах). Размывание есть и в диалоге “Создание узоров из клонов”. Клоны, кстати, наследуют размывание от оригинала, но также могут быть размыты независимо от оригинала. Заливка и штрих размываются одновременно, создавая полупрозрачные области, которые плавно переходят в фон.

Хотя мы и не собирались сравнивать Inkscape с Corel Draw, вспомним об одной его довольно часто используемой возможности — создании тени объекта. В Inkscape такой возможности на первый взгляд нет. Но с помощью Гауссова размывания простую отбрасываемую тень сделать можно и даже довольно просто. Для этого необходимо скопировать объект, залить копию черным цветом, размыть ее и сместить немного в сторону и вниз (или туда, куда должна падать тень по задумке автора). Такая тень, конечно, не будет сама обновляться при изменении исходного объекта. Если же объект клонировать, а не копировать, то тень будет автоматически обновляться. Правда, тень в этом случае будет того же цвета, что и сам объект. Чтобы сделать тень черной и при этом автоматически обновляемой, можно сделать заливку объекта неопределенной (он перекрасится в черный цвет) и создать два клона. Один клон следует поместить сверху и закрасить его как необходимо. Второй пусть помещается внизу, размытый и немного смещенный в сторону, как полагается тени. Теперь можно спокойно редактировать исходный объект, его тень будет обновляться.

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

Остановимся, поскольку где-то надо остановиться. Ведь мы просто знакомимся с бесплатным мощным кроссплатформенным редактором векторной графики Inkscape. Редактор вполне доступен и полезен каждому: и начинающему пользователю, и опытному профессионалу. Операционная система: Windows 9x/NT/2000/XP, Mac OS X, Linux. Размер дистрибутива: 13,4 Мб. Сайт: http://www.inkscape.org.

Традиционно предлагаем не пренебрегать разделом Справка. Вместо того чтобы искать по закоулкам Интернета всю возможную информацию о работе в редакторе Inkscape, начните с изучения Учебника (Справка/Учебники), который уже переведен на русский. А уж потом, если захочется, можно и по Интернету походить .

Учебник, являясь документом Inkscape, демонстрирует основы работы с этим редактором. Его можно просматривать и сразу пытаться редактировать. Учебник разбит на уровни. “Начальный” познакомит с приемами прокрутки и масштабирования документа, с инструментами рисования и трансформации объектов, их группировкой и т.д. “Второй” уровень научит копировать и вставлять объекты, изменять узлы, рисовать произвольные линии и кривые Безье, производить логические операции с контурами, упрощать их и работать с инструментом набора текста. Всем полезно будет познакомиться с разделом “Векторизация”. А особо усидчивым рекомендуем внимательно проштудировать статью “Каллиграфия”: и руки чернилами пачкать не придется, и результат вдохновляющий обязательно получите.

 
Страница учебника, посвященная каллиграфии

Учебник познакомит даже с базовыми понятиями и правилами дизайна.


Композиция — это…

Любители работы с клавиатурой должны обратиться за помощью к разделу меню “Клавиатура и мышь” (Справка/Клавиатура и мышь), который выдаст огромную справочную таблицу. Правда, на английском языке.

Надеемся, что после такого хвалебного текста вас не испугает одно замечание о недостаточной оптимизации программы. При длительной работе в редакторе (а не длительно, наверное, и не получится) ощущается заметное снижение быстродействия компьютера. Перемещение фигур становится “рваным”, фоновые программы начинают зависать… Впрочем, говорят, что в Linux Inkscape показывает более приличные результаты по производительности и стабильности, а Windows можно просто перезагрузить.

Обзор тематических ресурсов

1. http://www.inkscape.org   — официальный сайт Inkscape.

2. http://www.w3.org/Graphics/SVG/   — официальный сайт SVG.

3. http://www.w3.org/TR/SVG11.

4. http://www.svgi.org/

5. http://www.adobe.com/svg/viewer/install/main.html   — Adobe SVG Viewer, версия 3.02 (бесплатный модуль для просмотра SVG-файлов в окне браузеров IE, Netscape).

6. http://www.adobe.com/svg/viewer/install/beta.html   — Adobe SVG Viewer, версия 6.0 (бесплатный модуль для просмотра SVG-файлов в окне браузеров Mozilla).

7.  http://www.corel.com/servlet/Satellite?pagename=Corel2/Products/Content&pid=1047023276653&cid=1047023286996     — Corel SVG Viewer.

8. http://xml.nsu.ru/extra/svgintro_0.xml   — статья о SVG на сайте Новосибирского государственного университета.

9. http://www.openclipart.org/   — огромное количество свободных клипартов.

10. http://www.w3schools.com/svg/default.asp   — учебник, примеры, демонстрации, интерактивное изучение SVG-графики (на английском языке).

11. http://www.itk.ilstu.edu/faculty/javila/SVG/index.htm   — учебник по SVG (на английском языке).

12. http://www.learnsvg.com/  — учебник по SVG (на английском языке).

TopList