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

Мне нужно отобразить интерактивную векторную графику (подключение с помощью прослушивателей 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 или просто проанализировать их.

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

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

Ответов (9)

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

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

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

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

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

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

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

ELGIN

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.

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

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

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

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

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

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

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

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

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

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

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

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