Создание картографических web-сервисов с использованием SVG формата

Материал из GIS-Lab
Перейти к навигации Перейти к поиску
Эта страница опубликована в основном списке статей сайта
по адресу http://gis-lab.info/qa/svg.html


В статье приводиться краткое описание формата SVG и возможности его примения для создания WMS.

NB: Эта статья адаптирована под IE, Opera и (частично) Firefox и требует установки дополнительного плагина.

Scalable Vector Graphics (SVG) – основанный на XML язык разметки, предназначенный для описания двухмерной векторной графики (как статической, так и анимированной — или, в иных терминах, декларативной и скриптовой). Стандарт SVG является открытым стандартом, который разрабатывается и поддерживается Консорциумом Всемирной паутины (W3C). Несмотря на то, что разработки в области представления векторной графики в Интернете ведутся довольно давно и существует несколько языков разметки (например, VML от Microsoft или PGML от Adobe), SVG на данный момент является одним из наиболее популярных и часто используемым форматов.

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

В SVG существуют три типа графических примитивов — формы, растровые рисунки и текст. Формы представляют собой собственно векторные объекты: либо отдельные точки и линии, либо распространенные графические примитивы - овалы, прямоугольники, квадраты и т.д.

<embed src="/other/rect.svg" width="300" height="100" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/" />

Растровые рисунки представляют собой импортированные изображения в других форматах. Формат SVG поддерживает различные виды анимации.

Анимация может быть описана заранее или задаваться программно. Обратите внимание, что вы можете увеличивать, уменьшать и панорамировать графику без использования каких-либо специальных настроек:

  • Увеличение — удерживая клавишу ctrl выделить область для увеличения.
  • Панорамирование — удерживайте клавишу alt и передвигайте изображения с помощью мышки.
  • Уменьшение и возвращение к полному экстенту изображения — нажать правой кнопкой мыши по изображению и выбрать Zoom out или Original View.
<embed src="/other/animation.svg" width="400" height="400" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/" />

Назначая элементам рисунка различные ссылки, можно создавать карты ссылок. Карта ссылок - это разбиение одного изображения на несколько частей разной формы, каждая из которых связана с отдельной Web-страницей.

Поскольку этот стандарт основан на XML, SVG файл может содержать не только элементы, предназначенные для визуального представления, но и метаданные, предназначенные для описания альтернативного текстового представления изображения. В настоящее время при создании Web-страниц в качестве текстовой альтернативы рисунков используется параметр alt тега <img>. В отличие от этого, SVG рисунки могут содержать метаданные (т.е. данные о данных) в самых разных форматах — таких как Resource Description Framework (RDF), Meta Content Framework (MCF) и других. В Internet информацию о RDF и MCF можно найти, соответственно, по адресам RDF и MCF. Пример использования SVG с метаданными в формате RDF смотрите здесь.

Несмотря на то, что Flash на сегодняшний день является стандартом де-факто для представления векторной графики в Интернете, это закрытый формат, требующий платного приложения для разработки. Кроме этого, написание интерактивных сценариев возможно только с использованием специального языка программирования – ActionScript, по синтаксису схожего с JavaScript. SVG же напротив полностью интегрируется с такими распространенными языками как JavaScript, PHP, Perl. Одно из наиболее ярких преимуществ SVG как языка XML-группы это возможность интеграции с практически любыми СУБД (в том числе Oracle, MS SQL, Informix, MySQL).

Достоинства:

  1. Текстовый формат — файлы SVG можно читать и редактировать при помощи обычных текстовых редакторах.
  2. Масштабируемость — SVG является векторным форматом. Существует возможность увеличить любую часть изображения SVG без потери качества.
  3. Текст в графике SVG является текстом, а не изображением, поэтому его можно выделять и копировать.
  4. Применение скриптов и анимации — SVG позволяет создавать динамичную и интерактивную графику.
  5. Открытость
  6. Все преимущества XML:
    • Возможность работы в различных средах.
    • Интернационализация (поддержка Юникода).
    • Широкая доступность для различных приложений.
    • Лёгкая модификация через стандартные API — например, DOM.
    • Лёгкое преобразование таблицами стилей XSLT.

Недостатки:

Один из наиболее серьезных недостатков формата – очень слабая поддержка браузерами. В тоже время, в связи с бурным развитием формата, можно ожидать, что в ближайшее время поддержка будет включена в большую часть браузеров, либо будут разработаны специальный расширения для популярных браузеров. Среди других недостатков: довольно быстрое увеличение размера SVG-файла, особенно при описывание объектов сложной геометрической формы и как следствие снижение скорости выгрузки страницы клиенту.

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

Поддержка браузерами (Сентябрь, 2006) для Win2000/NT/XP:

  1. Internet Explorer – необходим Adobe SVG Viewer (ASV). Версия ASV на момент написания статьи — 3.03
  2. Netscape/Mozilla – ASV не работает для Netscape 6, Netscape 7, Netscape 8, Mozilla 1.5. Firefox 1.0, но работает для Netscape 4. Plugin ASV 6 pre-alpha был протестирован на Netscape 7.1 и работает, но после инсталляции необходимо вручную скопировать NPSVG6.dll и NPSVG6.zip в Netscape или Mozilla plugin директорию C:\Program Files\Common Files\Adobe\SVG Viewer 6.0\Plugins\
  3. Firefox — встроенная поддержка формата SVG.
  4. Opera – начиная с версии 8 имеет частичную поддержку SVG формата. Также работает с ASV, но потребуется вручную скопировать NPSVG6.dll и NPSVG6.zip в вашу plugin директорию.

Особенная привлекательность SVG-формата для ГИС-приложений в веб заключается, с одной стороны, в простоте их создания таким способом, отсутствии необходимости покупки специального программного обеспечения, высоком качестве представления графической (в том числе пространственной) информации. Отличным примером такого рода приложения может служить карта Йосемитского национального парка.

Кроме того, многообещающе выглядит возможность использования функциональности Oracle Spatial в качестве возможной СУБД. В заключение, приводим ряд ссылок на существующие web-приложения, разработанные с использованием SVG-формата:

Ссылки по теме