Естественно, создавать реальные, сложные приложения с использованием SVG — значит обрекать себя на написание большого количества повторяющегося, однообразного и рутинного кода. Но это только если отказаться от подсобных инструментов — библиотек для работы с векторной веб-графикой, которые уже давно существуют и постоянно развиваются.
Посмотрим, что есть у нас в арсенале.
Библиотека Raphael, написанная Дмитрием Барановским, значительно облегчает процесс создания векторных рисунков на вебстранице и предоставляет общий программный интерфейс SVG-объектам (и к VML, к слову). Работать с SVG с ее использованием — одно удовольствие:
Создаем холст 320 х 200 в точке с координатами 10, 50 var paper = Raphael(10, 50, 320, 200);
Создаем окружность в точке с координатами x = 50, y = 40 и радиусом 10 var circle = paper. circle(50, 40, 10);
Заливаем пространство внутри окружности красным цветом (#f00) circle. attr("fill", "#f00");
устанавливаем белый цвет для самой окружности. circle. attr("stroke", "#fff");
Возможно, для совсем уж комфортной работы библиотека слишком низкоуровневая. Зато ей доступны все возможности формата (примеры Raphael-приложений на рис. 63). Синтаксис библиотеки очень похож на jQuery, что не случайно (автор сам признается в заимствовании) и в общем неплохо — можно использовать привычный синтаксис.
Pottis. js — небольшая библиотека для придания интерактивности SVG-сценам. Вполне может применяться совместно с Raphael.
SVGWeb — библиотеки JavaScript, основная цель которых — корректное подключение SVG в HTML-страницы при отображении в разных браузерах, в том числе устаревших. Особенно такая поддержка нужна Internet Explorer, вплоть до девятой версии обозревателя.
Jquery. SVG — плагин для рабо ты с SVG популярной JavaScript библиотекой jQuery. Не очень большой набор функций и очень удобный синтаксис.
Polymaps. js — отличная библиотека для работы с географическими картами и данными геолокации. Если вы хотите сделать свой картографический сервис, вам точно следует обратить на нее внимание. Она работает с картами OpenStreetMap, Bing, CloudMade, Поддерживает GeoJSON.
D3.js — библиотека для создания документов, «управляемых данными», заточенная для создания эффектной интерактивной инфографики.
Protovis/InfoVis — обе библиотеки предоставляют красивый инструментарий для интерактивной визуализации данных.
Добавить комментарий