Рубрики Обзоры

Adobe SVG – первая веха эры сетевого издательства

Опубликовал
ITC.UA

Создав программный язык описания страниц PostScript и дав тем самым зеленый свет технологиям, которые можно определить как Desktop Publishing, Adobe стала почти единоличным законодателем мод в этой области. Но, несмотря на громадные заслуги в продвижении данной концепции, здесь компании уготована лишь почетная роль второго плана — ведь авторство самой идеи принадлежит все-таки не ей.


Чтобы вновь не оказаться в подобной ситуации во время очередной информационной революции, маркетологи компании первыми начали наступление и распространили серию пресс-релизов, повествующих о том, что дальнейшие продукты Adobe будут разрабатываться в соответствии с новой концепцией, получившей название Network Publishing (сетевое издательство). Основной ее постулат гласит: однажды созданный документ должен сохранять свой вид вне зависимости от среды отображения — будь то принтер, Web-броузер, экран PDA или мобильного телефона. Платформа определяет лишь способ представления документа — в одном случае визуализация будет происходить на клиентской части, в другом — растеризацией займется сервер.

Для успешного продвижения любой технологии подобного плана самым важным является универсальный и удобный формат обмена графическими данными. Для Desktop Publishing таким фундаментом стал PostScript, в сетевом же издательстве его роль призван сыграть новый стандарт SVG (Scalable Vector Graphic), активно продвигаемый компанией. Разработки Adobe всегда радуют четким соответствием реализации продукта и целей, для которых он предназначен. Так же как синтаксис PostScript идеально подходит для интерпретации на RISC-процессорах печатных устройств, язык SVG, основанный на спецификациях XML, как нельзя лучше интегрируется с Web-средой — главным местом его использования.

И хотя о каких-либо серьезных событиях в стане Network Publishing говорить пока еще рановато, новый векторный формат уже приобрел множество поклонников, и число их растет с каждым днем. Так же стремительно увеличивается и количество ПО для работы с этим форматом (причем большинство имеет весьма именитых производителей). Одним словом, пришла пора пристальнее взглянуть на файлы с расширением .svg.

Курс UX/UI дизайнер сайтів і застосунків з Alice K.
Курс від практикуючої UI/UX дизайнерки, після якого ви знатимете все про UI/UX дизайн .
Реєстрація на курс

Ну и конечно, описывая возможности этого стандарта де-юре (он официально признан W3C-консорциумом), невозможно не сравнить его с другой популярной технологией, ставшей стандартом де-факто, — Macromedia Flash.

Сразу же следует отметить, что функции SVG практически полностью перекрывают те, что предоставляет пользователям Flash — то есть у Flash нет ничего такого, чего нельзя было бы реализовать с помощью SVG. Мощные средства построения контуров, описанных кривыми Безье (у SVG они лучше), гибкая система управлением цветом с поддержкой градиентов и образцов заливок, альфа-прозрачность и группирование объектов позволяют описывать комплексные векторные изображения. Набор мультимедийных функций, основанный на известных спецификациях W3C SMIL (Synchronized Multimedia Integration Language) и SYMM (Synсhro­nized MultiMedia), дает возможность включать в сцены звуковые файлы, поддерживать несколько систем анимации (параметрическую и программируемую) и достигать с их помощью весьма сложных эффектов — например, точной синхронизации аудио- и видеоряда.

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

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

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

Единственным недостатком SVG в сравнении с Flash на данный момент является отсутствие интегрированного пакета, такого, например, как Macro­media Flash MX, для работы исключительно с этим форматом и полного использования всех возможностей. С другой стороны, работа с бинарным форматом Flash без использования подобного ПО просто невозможна, а код SVG представляет собой простой ASCII-файл и, следовательно, может быть создан с помощью любого текстового редактора.

Кстати, именно благодаря своему XML-подобию SVG гораздо лучше интегрируется с HTML-страницей, в которую он встроен. Этот формат поддерживает стандартизированную W3C объектную модель документа (DOM), и любой объект, описанный в файле SVG, а также его параметры будут доступны скриптовым функциям, введенным в код HTML-страницы. То же самое справедливо и в обратном направлении — любой код, внедренный в SVG, свободно может управлять HTML-элементами страницы. Достижение же подобных результатов в случае с технологией от Macromedia требует весьма хитроумного программирования.

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

Открытый формат, основанный на XML, дает возможность задействовать для его обработки огромное количество уже созданных программных средств. Среди них одно из первых мест занимают таблицы трансформации (XSLT), с помощью которых конвертирование одного XML-файла в другой происходит автоматически. Реальным примером является XSLT, разработанная для визуализации посредством SVG молекул химических элементов, описанных на языке CML (Chemical Markup Language).

Для создания интерактивных элементов в SVG предусмотрена поддержка скриптового языка на основе спецификации ECMAScript. Естественно, в полном объеме присутствует и событийная модель, описанная этим стандартом. Отслеживается загрузка страницы, изменение ее параметров, события мыши, клавиатуры и многое другое.

Инструменты

Конечно же, самую широкую поддержку новый формат получил пока лишь в последних продуктах Adobe. Компанией создан наилучший в данный момент броузерный plug-in для просмотра SVG — Adobe SVG Viewer (www.adobe.com/svg/viewer/install/main.html). Есть в арсенале и средства редактирования. Так, например, Illus­trator 10 позволяет производить полноценный импорт/экспорт SVG. При этом, кроме графической векторной части, пакет обладает возможностью создания несложных интерактивных элементов (например, rollovers) посредством назначения фрагментов кода на различные события мыши, управления SVG-фильтрами, комбинирования растровых и векторных элементов. К сожалению, никак не представлены в программе анимационные функции формата.

Также неплохим инструментом для работы с SVG является HTML-редактор от Adobe — GoLive 6.0, позволяющий непосредственно просматривать файлы этого формата и осуществлять их несложное редактирование. Сервер динамической генерации изображений Adobe AlterCast может изменять содержимое SVG-файла в соответствии с внешними данными.

Недавно о создании модуля импорта/экспорта SVG для своих продуктов объявила и компания Corel. Собственные версии утилит для просмотра SVG представили IBM и Sun. Существуют бесплатные утилиты для конвертирования в SVG популярных графических форматов, таких как WMF, PostScript, Flash, ArcView Gis и многих других. Более подробную информацию о ПО для работы с этим прогрессивным форматом можно получить по адресу www.adobe.com/svg/tools/3party.html. Немало его и на сервере download.com, причем количество таких пакетов растет с каждым днем, а это говорит о том, что число потенциальных сетевых издателей также увеличивается.

Лучше один раз увидеть

Чтобы разобраться в структуре и принципах построения SVG-файлов, лучше всего рассмотреть их на конкретном примере. В данной врезке приведен исходный код небольшого SVG-изображения, его описание, а также изображение в окне броузера.
Строки 1 и 2 содержат стандартный заголовок XML-файла, указывающий URL к DTD-файлу, содержащему описание синтаксиса языка. В нашем случае – это DTD для SVG. В строках 3–5 находятся стандартные дескрипторы, относящиеся уже к SVG-содержимому. Тег указывает физический размер файла (width и height), а также размер окна в броузере (viewBox). Title подобен своему HTML-собрату – по умолчанию надпись, заключенная в этом дескрипторе, будет видна в заголовке окна; desc описывает содержимое файла, в дальнейшем эта информация может быть использована поисковыми машинами.
В строках 6–14, ограниченных дескриптором defs, вводятся служебные элементы, самостоятельно не визуализируемые броузером, но которые будут являться частью других «видимых» объектов. Чаще всего здесь содержатся описания образцов заливок, градиентов, фильтров, библиотечные элементы и т. д. Например, тег linearGradient создает линейный градиент с неограниченным количеством цветов (строки 7–10, два цвета), а тег filter – задает новый фильтр, состоящий из комбинации стандартных. В нашем случае это MyFilter, состоящий из простого размытия, применяемого ко всему объекту.
Строки 15–26 описывают две группы (тег g), каждая из которых состоит из нескольких графических примитивов. Первая из них – CMYK (строки 15–20) содержит четыре прямоугольника (тег rect) разных цветов (fill) с прозрачностью, равной 90% (fill-opacity). Вторая группа Crop (строки 21–26) несколько сложнее  – в ней, помимо графических объектов круга и двух линий (теги circle и line), которым назначен градиентный контур (фрагмент stroke: url(#MyGradient), описаны общий сдвиг группы на 100 пикселов по горизонтали и вертикали (transform= "translate(100,100)") и анимационный эффект, поворачивающий содержимое группы на 180 градусов в течение 6 секунд (строка 25).
Если сравнить, например, строки 16 и 22, можно заметить, что одни и те же атрибуты заданы по-разному. В первом случае имеет место непосредственное задание параметров, а во втором – с помощью CSS. В данном файле оба способа равнозначны. Строки 27–30 демонстрируют использование комбинации текстовых дескрипторов и фильтров.
За дальнейшей информацией можно обратиться по адресу www.zvon.org, где находится детальная спецификация и описание языка SVG.

1. <?xml version="1.0" encoding="iso-8859-1"?>
2. <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN" "https://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">

3. <svg width="800" height="600" viewBox="0 0 800 600" xml:space="preserve">
4. <title>Абстрактная сцена</title>
5. <desc>Тестовый SVG-файл для еженедельника Компьютерное Обозрение</desc>

6. <defs>
7. <linearGradient id="MyGradient">
8. <stop offset="5%" style="stop-color:#F60"/>
9. <stop offset="95%" style="stop-color:#FF6"/>
10. </linearGradient>

11. <filter id="MyFilter">
12. <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="blur"/>
13. </filter>
14. </defs>

15. <g id="CMYK">
16. <rect x="390" y="290" width="410" height="310" fill="black" stroke="red" fill-opacity=".9"/>
17. <rect x="0" y="0" width="410" height="310" fill="cyan" stroke="red" fill-opacity=".9"/>
18. <rect x="390" y="0" width="410" height="310" fill="yellow" stroke="red" fill-opacity=".9"/>
19. <rect x="0" y="290" width="410" height="310" fill="magenta" stroke="red" fill-opacity=".9"/>
20. </g>

21. <g id="Crop" transform="translate(100,100)">
22. <circle cx="8cm" cy="5.5cm" r="5cm" style="fill:none; stroke:url(#MyGradient); stroke-width:0.3cm" />
23. <line x1="150" y1="-20" x2="480" y2="450" style="stroke-width:0.3cm; stroke:url(#MyGradient)" />
24. <line x1="0" y1="400" x2="600" y2="0" style="stroke-width:0.3cm; stroke:url(#MyGradient)" />
25. <animateTransform attributeName="transform" type="rotate" from="0" to="180" begin="0s" dur="6s"/>
26. </g>

27. <text id="main_text" x="360" y="250" fill="gray" fill-opacity=".8" text-anchor="middle" font-size="120">
28. <tspan>Test SVG-file</tspan>
29. <tspan y="360" x="400" text-anchor="middle" font-size="70">Computer Review Weekly</tspan>
30. <tspan y="330" x="400" text-anchor="middle" font-size="150" style="filter:url(#MyFilter)">for</tspan></text>

31. </svg>

Disqus Comments Loading...