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

Мне нужно отобразить некоторую интерактивную (прикрепление со слушателями 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 все время.

13.08.2008 09:43:53
9 ОТВЕТОВ

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

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

1
13.08.2008 09:58:35

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

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

ELGIN

0
13.08.2008 09:59:13
Насколько мне известно, Adobe прекращает поддержку своего плагина.
Sergey Ilinsky 8.01.2009 13:59:11

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.

0
13.08.2008 10:12:54

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

  • «Самый распространенный плагин для IE был создан компанией Adobe. Однако Adobe планирует отозвать этот продукт в начале 2009 года»
  • «... Internet Explorer, который также не будет поддерживать SVG в следующей версии IE8»
  • «... все имеют неполную поддержку SVG 1.1 ...»
  • «Плагин Corel SVG Viewer был когда-то предложен Corel. Его разработка остановлена».
0
13.08.2008 10:18:18
Ни один векторный формат не работает во всех браузерах, но SVG может стать частью хорошего решения. Просто признайте, что он никогда не будет работать в IE (поэтому вам нужно что-то еще там), и что никто не поддерживает его полностью (например, HTML, CSS и любой другой веб-стандарт), поэтому вам все равно нужно тестировать везде.
Ken 14.07.2009 01:44:57

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

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

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

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

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

9
13.08.2008 11:19:29

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

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

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

6
13.08.2008 11:42:58

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

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

0
13.08.2008 12:43:36

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

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

2
16.08.2008 07:06:17

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

1
17.09.2008 01:11:24