Статьи / Веб-Дизайн / Графическое представление данных в вебе нового поколения

  2008-11-03 17:49

ссылке http://w3c.dstc.edu.au/presentations/2002-05- web-services.svgz загружается полноценная презентация, напоминающая ролик Microsoft PowerPoint. Если попробовать изменить размеры текущего окна, мы обнаружим, что изображение корректно масштабируется, тем самым, оправдывая название технологии. Ролики SVG могут включать интерактивные элементы, «кнопки», ссылки. Вообщем-то, это с успехом делает и широко известный Macromedia Flash. Однако в случае SVG, мы можем выделять и копировать тексты страниц, с той же легкостью, что и в HTML. И поверьте, страницы SVG в отличии от Flash, замечательно индексируются поисковыми машинами. Но, что мне лично понравилось еще больше, так это возможность сохранения просматриваемого документа и свободный доступ к его коду. Вы можете кликнуть на SVG-документе правой кнопкой мыши и выбрать любую из операций Copy SVG, View SVG, View source, Save SVG As. Попробуйте сохранить на локальном диске открытую презентацию. В результате вы обнаружите SVG-файл размером всего 20КБ. Этот файл содержит все 30 слайдов презентации, включая графику. Но возможности SVG далеко не ограничиваются созданием презентаций. Посмотрите примеры на http://www.adobe.com/svg/demos/main.html. Меня особенно впечатлила навигация по виртуальному зданию. Мои коллеги по работе как-то выполняли подобную задачу с помощью Java-applet’ов и, надо сказать, трудозатраты в том случае несоизмеримы с вариантом SVG. Я бы обратил еще ваше внимание на вариант визуализации молекулярных структур химических соединений. Это наглядная демонстрация взаимодействия различных стандартов (SVG и CML) платформы XML.

Сам собой напрашивается вопрос: «Насколько сложно создавать документы SVG?!». Могу только сказать, что начать работать с SVG не сложнее чем с HTML. Например, для того, что бы отобразить прямоугольник и окружность достаточно написать несколько строк кода:
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/SVG/DTD/svg10.dtd"> <svg xmlns="http://www.w3.org/2000/svg"> <title>Hello world!</title> <rect x="200" y="150" width="100" height="50" rx="0" ry="0" style="fillopacity: 1;fill:green;opacity:1"/> <circle cx="200" cy="200" r="10" stroke="red" stroke-width="2px" fill="none"/> </svg>

Поместите это код в файл sample.svg и откройте этот файл в своем браузере.


Рис.1. SVG Demo

SVG будучи полноправным потомком XML, может совместно с XSLT описывать представление данных. Имея исходный XML-документ со структурированными данными, мы можем в сопроводительном шаблоне XSLT задать как XHTML форму представления, так и SVG. Элементы SVG также «понимают» каскадные таблицы стилей (CSS). Анимация SVG описывается XML-базированным языком SMIL. Функциональностью SVG можно управлять через DOM (объектную модель документа) языком Java-script

Впрочем, создавать документы SVG можно в режиме визуального редактирования из различных программ. Скажем, SVG включен в Adobe Illustrator 10. Полный каталог программ, работающих с SVG представлен по этой ссылке http://www.w3.org/Graphics/SVG/SVG-Implementations.htm8.

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

Автор: Дмитрий Шейко