Отображение векторной графики в браузере

Question

Мне нужно отобразить некоторую интерактивную (прикрепление с помощью DOM-слушателей и т. Д. И обработку событий) векторную графику на веб-сайте, над которым я работаю. Существует рекомендация W3C для SVG, хотя этот формат все еще не распознается Internet Explorer, поддержка которого является обязательной (для общедоступного веб-сайта). IE обрабатывает VML, хотя есть даже библиотеки javascript, которые делают некоторые холстоподобные рисунки в зависимости от браузера (SVG против VML) - excanvas , GFX из Dojo Toolkit и более Это было бы хорошо и приемлемо, хотя ни один из них не может отобразить изображение SVG из данной разметки.

Таким образом, вопрос на самом деле состоит из нескольких частей:

1. Существуют ли кросс-браузерные библиотеки Javascript, которые отображают векторную графику с заданной разметкой (не обязательно SVG) и предлагают возможность присоединения к событиям DOM?
2. Если нет, то какая из наиболее популярных технологий встроенных в браузер будет наиболее подходящей для выполнения такой задачи? Я могу выбрать из Flex / Flash, Java-апплет. Silverlight недоступен из-за блокировки Windows.

[ РЕДАКТИРОВАТЬ ] Спасибо всем за ваши комментарии / предложения. Ниже приведены лишь некоторые мои случайные заметки / выводы по этому вопросу:

• Мне нужен уровень интерактивности: способность обнаруживать события DOM на отображаемом векторном изображении - при наведении курсора, наведении мыши, щелчке и т. Д. - и возможность реагировать на них, например, при изменении цвета фона, отображении диалогового окна и т. Д.
• Идея придерживаться формата SVG довольно хороша, поскольку она является родной во многих браузерах, кроме самого популярного - IE. После некоторых экспериментов с отображением динамического SVG я понял, что IE версии 7 наиболее проблематичен. Слишком много хлопот из-за несовместимости браузера.
• Cake кажется отличным Javascript-фреймворком, хотя я не смог получить примеры, работающие на IE7.
• Java-апплеты - эта идея мне понравилась больше всего, поскольку я мог использовать библиотеку Apache Batik, качественный рендеринг SVG. Однако Batik - очень большая библиотека, и я не могу позволить себе развертывание апплета, который весит несколько мегабайт.
• Я решил придерживаться опции Flex. Я нашел хорошую библиотеку векторной графики Degrafa . Он использует свой собственный формат разметки, однако распознает нотацию SVG-пути, поэтому в моем случае будет довольно легко преобразовать мои SVG-файлы с помощью XSLT или просто проанализировать их.

[ EDIT 2 ] Появилось еще несколько комментариев. Я хотел бы уточнить, что под «блокировкой Windows» я подразумеваю ситуацию, когда Silverlight обычно работает в Windows, а точнее в IE. Я сомневаюсь, что это приемлемое решение (например, Flash или Java Applet) в других системах. Да, я не сомневаюсь, что один способен запустить приложение Silverlight на любой системе, хотя, боюсь, это будет слишком много усилий для обычного пользователя.

@ Акира: Были ли у вас проблемы с этими "SVG рендерами" на IE7? Я получаю ошибки Javascript все время.

Answer 1

Safari, Opera и Firefox все поддерживают SVG изначально (например, без плагинов) с различной степенью полноты и правильности, включая возможность написания сценариев svg из javascript.

Существует также элемент canvas, который теперь стандартизирован в html5 и уже поддерживается в вышеупомянутых браузерах (с некоторыми причудами в некоторых крайних случаях из-за относительно недавних изменений в черновике html5).

К сожалению, любой основанный на стандартах подход в некотором роде разрушен преднамеренным игнорированием IE того, что происходит за пределами его собственной экосистемы, однако есть ряд библиотек, которые пытаются преобразовать canvas / svg в VML (собственный векторный язык IE), такой как iecanvas .

[Редактировать: упс, я забыл свою любимую библиотеку js - Торт ! который может анализировать и отображать svg на холсте, а также полагает, что поддерживает и IE]

[Еще одно редактирование: на самом деле Cake имеет демо , делающее то, что, я думаю, вы хотите сделать]

Answer 2

Взгляните на библиотеку Raphael Javascript . Это первые дни, но выглядит очень многообещающе.

Я помню план IE, в котором поддержка SVG была указана в IE7.2.

Зависит от того, насколько интерактивно вы хотите это?

Answer 3

Можете ли вы уточнить, что вы подразумеваете под "блокировкой Windows" в Silverlight? Он работает в Windows и MacIntel, а векторные части прекрасно работают в Linux с плагином Moonlight.

Вас отбросило отсутствие поддержки Amiga?

Answer 4

У Уолтера Зорна есть библиотека JavaScript для произвольной векторной графики. Это выглядит прилично.

Answer 5

Взгляните на новый элемент Canvas , который был реализован во многих браузерах. Я также слышал, что есть элемент управления ActiveX для IE, который также реализует элемент Canvas.

Обновление: подождите, вы уже это сказали. Я должен прочитать весь вопрос в следующий раз! :)

Answer 6

Из всех возможностей, которые вы перечислите, единственной, которая не является ужасным злоупотреблением существующей технологией (Javascript), едва поддерживаемой (SVG, элемент Canvas) или большой работой (Java), является Flash. Он был разработан как пакет векторной графики и совместим с большим количеством браузеров, чем SVG и тег canvas.

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

Answer 7

Я не думаю, что SVG - хороший выбор на будущее. От Википедия :

• «Самый распространенный плагин для IE был создан Adobe. Однако Adobe планирует отозвать этот продукт в начале 2009 года»
• "... Internet Explorer, который также не будет поддерживать SVG в следующей версии IE8"
• "... все имеют неполную поддержку SVG 1.1 ..."
• «Плагин Corel SVG Viewer когда-то предлагался Corel. Его разработка остановлена.»

Answer 8

IE поддерживает VML, но больше ничего не делает, и это ужасно. Microsoft утверждала, что они удалили его (с новым XAML и всем остальным), но он все еще является частью их формата Office XML (это то, как Excel .xlsx поддерживает комментарии, как ни странно).

FX и многие другие поддерживают новый элемент Canvas. Многие поддерживают SVG, но, учитывая работу MS над Silverlight, я не вижу, чтобы IE поддерживал SVG в ближайшее время.

Предполагается, что Microsoft предоставит подключаемые модули Silverlight для операционных систем MS.

Я использовал Flex - это довольно хорошо, несмотря на использование Eclipse. Вам не нужно покупать чрезвычайно дорогие серверные компоненты Adobe, чтобы использовать Flex - он может использовать сервисы SOAP.

Инструменты разработчика для Flex вполне доступны, и почти у всех есть Flash.

Answer 9

Перейти на SVG - и просто сказать пользователям, чтобы получить плагин ADOBE SVG для IE.

Смотрите этот отличный сайт - сайт правительства Великобритании (государственная служба)

ELGIN