Анализ программных средств, предназначенных для создания банка данных электронных карт

Для оформления любой web-страницы необходима как статичная графика, так и разнообразные анимационные и интерактивные элементы, которые, во-первых, обеспечивают большую привлекательность представленной на ней информации, а во-вторых, способствуют лучшему восприятию материала.

Графическая информация передается намного медленнее текстовой, а время загрузки изображений находится в прямой зависимости от размера их графических файлов, поэтому быстрая загрузка web-страниц предполагает небольшой размер внедренных в них графических изображений. Последнее достигается путем оптимального выбора формата графического файла, а также за счет оптимизации, задача которой — найти компромисс между скоростью загрузки страницы и качеством представленных на ней изображений. Однако возможности оптимизации небезграничны, а высококачественные изображения, как правило, имеют внушительный объем, вследствие чего достижение высокого качества представленных в web изображений при их небольших размерах по-прежнему остается серьезной проблемой [4, 5].

Для статичной графики применяют форматы GIF, JPG или PNG, создавать которые можно в самых разных графических пакетах.

Для анимационных объектов используют форматы animation GIF и Flash, а разрабатывают такие объекты в специализированных программных приложениях (особых для каждого из названных типов форматов). Интерактивные элементы (ролловеры, карты ссылок Image Map и т. п.) тоже, как правило, создаются в специализированных приложениях и представляют собой набор графических изображений, связь между которыми устанавливается в дополняющем их файле с HTML-кодом.

Удачным решением названных проблем может стать переход на графический формат SVG (Scalable Vector Graphics — масштабируемая векторная графика), основанный на языке XML, благодаря чему любое SVG-изображение можно представить набором командных строк, а сам SVG-файл можно открыть в любом текстовом редакторе, включая блокнот. Эта сравнительно новая технология изначально разрабатывалась компанией Adobe специально для web, а сегодня представляет большой интерес и для мобильных устройств, обеспечивая создание высококачественной статичной, анимационной и интерактивной графики. Поэтому нет ничего удивительного в том, что она активно поддерживается консорциумом W3C— в 2003 году стандарт SVG 1.1 был принят в W3C в качестве рекомендации, а на данный момент идет разработка спецификации SVG 1.2.

Технология SVG позволяет объединить в одном формате текст, графику, анимацию и интерактивные компоненты и базируется на трех типах графических изображений: векторных формах, рисунках и тексте. Формы, как это принято в векторной графике, представлены либо прямолинейными и криволинейными контурами, либо графическими примитивами (прямоугольниками, эллипсами и др.), а рисунки представляют собой импортированные растровые изображения. Помимо этого формат SVG поддерживает различные виды анимационных (напоминающих GIFи flash-анимацию) и интерактивных объектов, таких как ролловеры, карты ссылок и прочие элементы навигации. А поскольку данный стандарт основан на языке XML, то SVG-файл наряду с элементами, предназначенными для визуального отображения, может содержать также различные метаданные.

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

• — высокое качество изображений независимо от их размеров, что объясняется векторной природой SVG-формата. Изображения могут неограниченно уменьшаться или увеличиваться без потери качества) в соответствии с размером дисплея, что позволяет получать качественное изображение графической информации на различных типах устройств (десктопах, карманных компьютерах и пр.), а также дает возможность более тщательно рассмотреть отдельные детали — это важно, например, при работе с техническими рисунками;
• — гораздо меньший размер файлов по сравнению с форматами GIF, JPG, PNG и animation GIF, а тем более с форматом Flash.

По сравнению с традиционными вариантами графического представления Сети применение SVG-формата имеет немало других неоспоримых преимуществ.

Так, для разработчиков важными плюсами являются:

• — возможности совмещения в одном формате разработки статичных, анимационных и интерактивных элементов, а также сочетания векторных и растровых объектов;
• — улучшенная работа с текстом, включая кернинг, текст по кривой и неограниченное использование шрифтов;
• — более эффективное управление точностью передачи цветов и широчайшие возможности в плане использования в web-изображениях градиентных заливок высокого разрешения, теней, фильтров и т. п.;
• — текстовая природа SVG-формата и поддержка им каскадных таблиц стилей, что значительно упрощает процесс обновления web-сайта и позволяет при необходимости вносить в него изменения без обращения к специальным программам;
• — интеграция с построенными на стандартах XML (Extensible Markup Language) и CSS (Cascading StyleSheets) базами данных, что позволяет сохранять SVG-изображения в базе данных и создавать с их использованием динамические web-страницы — различные для разных платформ, персональных настроек и т. д.;
• — отсутствие проблем индексации — SVG-файлы индексируются любыми поисковыми машинами (в отличие, например, от SWF-файлов).

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

Тем не менее, как водится, наряду с плюсами у технологии SVG имеются и минусы, причем весьма серьезные.

• — SVG-изображения слабо поддерживаются производителями Интернет-браузеров. В результате для просмотра SVG-графики из браузера пользователи вынуждены дополнительно устанавливать обеспечивающий данную возможность плагин от сторонних производителей, например SVG Viewer от компании Adobe. Теоретически это несложно — соответствующие плагины просты в установке, бесплатны, имеют небольшой объем и их можно быстро скачать по Сети. На практике все оказывается гораздо сложнее, поскольку большинство Интернет-пользователей не догадываются о существовании данных возможностей и потому не могут просматривать данный вид графики — без плагина она просто не видна. Однако ситуация постепенно меняется, и в прошедшем году два ведущих разработчика web-браузеров внедрили поддержку формата SVG. Весной компания OperaSoftware выпустила 8-ю версию браузера Opera, поддерживающую SVG 1.0 Tiny; в появившейся чуть позже версии Opera 9.0 реализована частичная поддержка формата SVG 1.0 Basic. Вторым разработчиком, включившим поддержку SVG, стала The Mozilla Organization — в состав выпущенного ею браузера Firefox 1.5 включен модуль Mozilla SVG project, обеспечивающий просмотр SVG-графики спецификации 1.1. Кроме того, в середине 2005 года активную работу по внедрению поддержки SVG 1.1 начали разработчики браузера Safari, функционирующего на компьютерах под управлением Mac OS X;
• — в сравнении с другими графическими форматами формат SVG пока слабо поддерживается и разработчиками графического ПО, хотя такие ведущие графические пакеты, как Adobe Illustrator, Corel DRAW и др., позволяют экспортировать графику в SVG-файлы. Конечно, SVG-файлы могут быть созданы и в любом текстовом редакторе, однако это нецелесообразно в смысле быстроты и дешевизны разработки. В текстовом редакторе удобно подправить файл в случае необходимости (что, кстати, возможно только при наличии глубоких знаний о XML-технологии), но создавать его с нуля неразумно, поскольку это потребует чрезмерных затрат времени и сил.

Специализированные пакеты для создания SVG-графики.

Evol Grafi XXStudio 6.1.

Профессиональный пакет XStudio представляет собой удобный инструмент для создания разноплановой SVG-графики для Сети и мобильных устройств и обеспечивает полный контроль как над SVG-проектом в целом, так и над векторными изображениями, анимацией, скриптами [1, 4].

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

Пакет XStudio поставляется с подробной документацией, дополненной серией уроков, и прост в освоении.

Рис. 11. Совмещение визуального создания изображения с правкой исходного кода в Evol Grafi XX Studio

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

Встроенная инструментальная панель Document Object Model (DOM) обеспечивает иерархическое представление SVG-объектов, удобный XML-редактор позволяет исправлять исходный код на текстовом уровне, а скриптовой редактор — дополнять его Java-скриптами. Работа с кодом организована очень удобно: автоматически выделяются фрагменты кода выбранного объекта, имеется возможность поиска текста и установки закладок и пр. Любые изменения кода мгновенно отражаются в визуальном окне просмотра, а визуальные изменения — в окне редактора.

Inkscape.

Inkscape — самый перспективный векторный редактор на базе модели Open Source, являющийся многоплатформенным и представляющим собой мощный инструмент для разработки графики в соответствии со стандартом Scalable Vector Graphics.

Рис. 12. Диалоговое окно редактора Inkscape

Этот редактор представляет собой мощный и удобный инструмент для создания художественных и технических иллюстрации в формате векторной графики [2, 5].

Программа кроссплатформенная, имеются версии для ОС Windows, Mac OS X и Linux. Также существует portable версия Inkscape. Интерфейс редактора поддерживает большое количество языков, включая русский.

Вектор и растр.

В компьютерной графике изображения могут быть представлены в двух видах — растровом и векторном. Растровое изображение представляет собой двухмерную матрицу состоящую из элементарных точек (пикселей), каждая из которых имеет свой цвет. В нормальном масштабе эти отдельные точки воспринимаются как цельное изображение. Но, при значительном увеличении растрового изображения, мы можем наблюдать эти пиксели в виде равномерно окрашенных квадратов. Векторное изображение создаётся на основе набора так называемых «векторных примитивов» — простейших геометрических фигур, линий, точек и тому подобного. А файл векторного изображения хранит в себе не сами эти фигуры в виде набора точек, как в растре, но лишь их описание. Так, например, для построения равномерно окрашенного круга необходима лишь информация о координатах его центра, диаметре, толщине и цвете контура, а также о цвете самого круга. Для треугольника достаточны координаты трёх его вершин, толщина и цвет контура, цвет треугольника. Таким образом можно компактно описать все фигуры и линии, а также отношения между ними, и, на основе этой информации, построить цельное изображение.

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

Векторный графический редактор Inkscape.

Существенным недостатком векторных форматов являются значительные сложности получения фотореалистичных изображений. Такие изображения должны содержать огромное количество примитивных объектов со сложными градиентами (цветовыми переходами). Это приводит к трудностям при их создании и редактировании, а также к значительному увеличению объёма файла изображения. В этом случае может пригодиться функция векторизации (или трассировки, от англ. tracing), которая предназначена для создания в автоматическом режиме векторного изображения из растрового, с заданной степенью достоверности. Эта функция имеется в большинстве векторных редакторов, хотя результаты её работы часто оставляют желать лучшего. Гораздо удобнее в векторных редакторах создавать несложные рисунки, состоящие из простых геометрических форм.

При создании гиперреалистичных изображений в векторных редакторах, что называется «с нуля», часто используется инструмент градиентной заливки «Mesh» («Gradient Mesh Tool» в Adobe Illustrator и «Interactive Mesh Fill» в Corel DRAW). В Inkscape пока этот инструмент отсутствует, но подобные фотореалистичные изображения можно создавать с помощью фильтра размытия по Гауссу («Gaussian Blur filter»), появившегося в версии 0.45.

Векторный формат SVG.

SVG (Scalable Vector Graphics) — язык разметки масштабируемой векторной графики, созданный Консорциумом Всемирной паутины W3C (World Wide Web Consortium) — организацией, которая разрабатывает стандарты для Интернета. Этот язык разметки позволяет описывать двумерные векторные объекты в формате XML, то есть в виде определённого текста, который, например, можно включить в содержание веб-страницы. Браузеры, поддерживающие SVG, отобразят этот текст в виде векторного изображения.

Формат документов редактора Inkscape основан на SVG. Так как SVG является открытым форматом, это даёт возможность использовать векторные изображения, созданные в Inkscape, в других редакторах, поддерживающих SVG. И, наоборот, импортировать в Inkscape документы, созданные в других векторных редакторах, преобразовав их в SVG.

Основные возможности Inkscape.

Векторный редактор Inkscape хорошо подходит для создания технических иллюстраций, логотипов, визиток, пиктограмм, иконок, различных схем, диаграмм и тому подобного. Совместимость со стандартами W3C позволяет широко использовать Inkscape в веб-дизайне.

Поддерживаемые форматы документов:

• — открывает файлы форматов SVG, SVGZ (сжатый SVG), PDF, AI (Adobe Illustrator) без установки дополнительных расширений;
• — для импорта Post Script или EPS, необходима установка Ghostscript.
• — после установки Uni Converter возможно открытие/сохранение файлов в форматах Corel Draw, CGM и SK1;
• — для работы с форматами Dia, XFig или Sketch, необходимо, чтобы в системе были установлены соответствующие программы;
• — Inkscape может напрямую импортировать большинство растровых форматов (JPEG, PNG, GIF и тому подобное), но экспортировать только в формат PNG;
• — результаты работы в Inkscape можно сохранить в форматах SVG, SVGZ, PDF, Postscript / EPS / EPSi, Adobe Illustrator (*.ai), LaTeX (*.tex), POVRay (*.pov), HPGL и других.

Создание объектов:

• — рисование: карандаш (рисование от руки простых контуров), ручка (создание кривых Безье и прямых линий), каллиграфическое перо (рисование от руки закрашенных контуров в форме каллиграфических штрихов);
• — примитивы: прямоугольники (могут иметь скруглённые углы), эллипсы (включая окружности, дуги и сектора), звёзды/многоугольники (могут быть закруглёнными и/или деформированы случайным образом), спирали;
• — инструмент текста (многострочный текст, полная поддержка);
• — встраиваемые растровые изображения (имеется команда для создания и внедрения растровых копий из выбранных объектов);
• — клонирование («живое» создание присоединённых к оригиналу копий), включая инструмент для создания паттернов и упорядоченных систем, состоящих из клонов.

Управление объектами:

• — точные преобразования (перемещение, масштабирование, вращение, наклон), как интерактивно, так и путём задания точных числовых значений;
• — операции с Z-order («высотой» объектов относительно друг друга);
• — группировка объектов, с возможностью «выбора объекта в группе» без разгруппировки, либо «входа в группу», что помещает группу во временный слой;
• — слои, с возможностью блокировки и/или погашения конкретного слоя, изменения их порядка, и так далее.

Слои могут быть скомпонованы в виде иерархического дерева:

• — копирование и вставка объектов;
• — команды выравнивания и размещения.

Заливка и обводка:

• — выбор цвета (RGB, HSV, цветовой круг);
• — инструмент «пипетка»;
• — копирование/вставка стиля;
• — редактор градиентов с возможностью добавления узлов;
• — заливка паттернами (растровыми/векторными);
• — штриховая обводка, со многими предопределёнными стилями;
• — маркеры контуров (например стрелки).

Операции с контурами:

• — редактирование узлов: перемещение узлов и ручек Безье, выравнивание и размещение узлов, и так далее;
• — преобразование в контур (для текста и примитивов), включая конвертацию обводки в контур;
• — булевы операции;
• — упрощение контуров с изменяемым порогом чувствительности;
• — вытяжка/втяжка контуров, включая динамическое и связанное с другим объектом смещение;
• — трассировка растровых изображений (цветных и чёрно-белых).

Поддержка текста:

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

Рендеринг:

• — отображение с полным сглаживанием;
• — поддержка alpha-канала при отображении и PNG-экспорте;
• — «Живой» рендеринг объектов во время трансформаций.

А также:

• — просмотр и редактирование кода прямо из окна программы с мгновенным отображением результатов;
• — возможность экспорта и конвертации в режиме командной строки;
• — редактирование и сохранение документов в полном соответствии со спецификациями стандарта SVG.

Corel Web Draw.

Пакет Corel Web Draw, более известный как Jasc Web Draw, — универсальное решение для создания высококачественной графики и анимации в формате SVG, ориентированное на профессиональных дизайнеров. А интуитивно понятный интерфейс программы делает ее привлекательной и для широкого круга пользователей [1].

Рис. 13. Интерфейс программы Web Draw

В приложении доступен обширный набор стандартных графических инструментов, характерных для полнофункционального приложения работы с векторной графикой: базовые формы (эллипс, прямоугольник, звезда и пр.), перо, полигон, полилиния, текст и т. п. Наряду с векторными объектами Web Draw позволяет дополнять SVG-объекты внешними растровыми изображениями. Помимо обычных заливок и наложения готовых стилей можно использовать сложные градиенты, заливки, в том числе и созданные собственноручно узоры. Для получения более эффектных изображений можно воспользоваться фильтрами — как достаточно простыми (размытие и наложение тени), так и сложными (текстурирование и освещение). Для точного размещения объектов предназначены сетки, направляющие и линейки, а встроенная инструментальная панель DocumentObjectModel (DOM) представляет SVG-объекты в виде иерархического дерева, что существенно упрощает управление.

Web Draw оснащен универсальной линейкой раскадровки анимации Animation Timeline, которая построена на базе объектной модели SVG DOM (Document Object Model), что позволяет выбирать и анимировать практически любой атрибут или свойство объекта всех типов в любое время. Механизм перетаскивания позволяет редактировать непосредственно в монтажной линейке начальную и конечную точки анимации, а также продолжительность каждой фазы анимации. Поскольку ключевые точки анимации (keytime) вставляются каждый раз при установке параметров анимации для атрибута или свойства объекта, их можно переносить на другие участки раскадровки в целях автоматической настройки распределения эффектов анимации во времени.

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

Sketsa SVG Editor 3.2.3.

Приложение Sketsa относится к самым популярным из SVG-редакторов и позволяет создавать профессиональную SVG-графику, в том числе с оптимизацией в формате SVGZ. Пакет удачно сочетает в себе простоту и удобство работы с широким перечнем возможностей и совместим с Windows, Mac и Linux-системами.

Рис. 14. Визуальное редактирование изображения в Sketsa

Sketsa поддерживает классический набор характерных для любого векторного приложения инструментальных средств, позволяющих создавать и трансформировать любые векторные объекты на основе как контуров, так и графических примитивов и текста, которые при желании несложно дополнить растровыми изображениями. Возможно управление прозрачностью, использование градиентных заливок и фильтров. Все это удачно дополнено специализированными SVG-возможностями, благодаря которым любое изображение можно редактировать не только визуально, но и в текстовом режиме. Для редактирования SVG-кода в пакете предусмотрен встроенный текстовый редактор XML. В целях удобства управления объектами имеется встроенная инструментальная панель Document Object Model (DOM), представляющая собой иерархический древовидный набор объектов в документе SVG, что позволяет выбрать любой объект документа для редактирования его свойств.