Кросс-браузерное решение для работы с SVG-файлами?

Question

Какая кросс-браузерная библиотека JavaScript SVG позволит мне отображать и взаимодействовать с предварительно созданными изображениями SVG.

Мне известны следующие библиотеки:

• Raphaël : я сейчас использую это вместе с плагином загрузки SVG.Но этот плагин не поддерживает SVG Inkscape или Adobe Illustrator (то есть большинство SVG).
• cang : эта библиотека выглядит многообещающе, но требует поддержки <canvas>,который изначально отсутствует в IE.
• svgweb : еще одна более перспективная библиотека.Для этого требуется Flash, но у большинства пользователей IE есть Flash.
• jQuery SVG : кажется, что можно загружать изображения SVG, но разработка, кажется, умерла.И это требует от меня использования модифицированной версии jQuery 1.3.

Я в основном пытаюсь сделать фрагменты произвольных изображений «выбираемыми».

Любая помощь будет принята с благодарностью.

Answer 1

Raphaël поддерживает поддержку импорта SVG-файлов Illustrator, благодаря использованию этого замечательного плагина .Все, что вам нужно сделать, это сохранить файл ai в формате SVG, открыть его с помощью текстового редактора, скопировать код и импортировать его с помощью плагина.Прекрасно работает, за исключением: поддерживает только объекты "пути", без текста, без градиентов, без теней ...

Answer 2

Я использую http://excanvas.sourceforge.net/ для поддержки Canvas в IE и Cang для поддержки SVG с использованием Canvas.

Answer 3

Лучшее решение, которое я нашел, - это использовать Raphael вместе с этим инструментом , который позволяет вам конвертировать файлы SVG (созданные в моем случае в Illustrator) в код Raphael практически как есть. А поскольку Рафаэль - IE6 +, вы легко можете быть раздражительными, если приложите некоторые усилия.

Здесь - мой пример того, чего можно достичь с помощью комбинации этих двух вещей.

Answer 4

Я хотел бы использовать Google Chrome Frame (плагин IE). Это избавит вас от необходимости поддерживать два набора кода (один для пользователей IE, другой для обычных пользователей браузера). Добавление следующего метатега на вашу страницу позволит SVG отображать в IE (через GCF):

<meta http-equiv="X-UA-Compatible" content="chrome=1">

См. Здесь для получения инструкций по обнаружению и возможной подсказке пользователю установить GCF.

Answer 5

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

Вы можете прочитать http://ejohn.org/blog/future-proofing-javascript-libraries/, если не уверены в обнаружении функции JavaScript.