Просмотр векторной графики в браузере

Question

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

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

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

[EDIT] Спасибо всем за ваши комментарии/предложения. Ниже приведены лишь некоторые мои случайные замечания/выводы по этому вопросу:

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

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

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

Answer 1

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

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

Answer 2

Перейти к SVG - и просто попросите пользователей подключить ADOBE SVG для IE.

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

ELGIN

Answer 3

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 4

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

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

Answer 5

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

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

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

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

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

Answer 6

Посмотрите на Raphael Javascript library. Это первые дни, но это выглядит очень многообещающе.

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

В зависимости от того, насколько интерактивным вы хотите его видеть?

Answer 7

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

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

Answer 8

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

Вы были отброшены отсутствием поддержки Amiga?

Answer 9

Walter Zorn имеет JavaScript library для произвольной векторной графики. Это выглядит прилично.