jQuery SVG против Рафаэля [закрыто]


Я работаю над интерактивным интерфейсом с использованием SVG и JavaScript/jQuery, и я пытаюсь решить между Рафаил и jQuery SVG. Я хотел бы знать

  1. какие компромиссы между ними
  2. где импульс развития, кажется.

Мне не нужна поддержка VML/IE в Raphael или возможности построения графика jQuery SVG. Меня в первую очередь интересует самый элегантный способ создания, анимации, и манипулировать отдельными элементами на холсте SVG.

14 250

14 ответов:

недавно я использовал как Raphael, так и jQuery SVG - и вот мои мысли:

Рафаил

плюсы: хорошая стартовая библиотека, легко сделать много вещей с SVG быстро. Хорошо написано и задокументировано. Много примеров и демо. Очень расширяемая архитектура. Отлично с анимацией.

плюсы: является слоем над фактической разметкой SVG, что затрудняет выполнение более сложных задач с помощью SVG - таких как группировка (он поддерживает наборы, но не группы). Не делает большой Ж / редактирования уже существующих элементов.

jQuery SVG

плюсы: плагин jQuery, если вы уже используете jQuery. Хорошо написано и задокументировано. Много примеров и демо. Поддерживает большинство элементов SVG, позволяет собственный доступ к элементам легко

плюсы: архитектура не такая расширяемая, как у Рафаэля. Некоторые вещи могут быть лучше документированы (например, настройка элемента SVG). Не делает большой Ж / редактирования из уже существующих элементов. Полагается на семантику SVG для анимации-что не так уж и здорово.

SnapSVG как чистая версия SVG Рафаэля

SnapSVG является преемником Рафаэля. Он поддерживается только в браузерах с поддержкой SVG и поддерживает почти все функции SVG.

вывод

Если вы делаете что-то быстро и легко, Рафаэль-это легкий выбор. Если вы собираетесь сделать что-то более сложное, я решил использовать jQuery SVG, потому что я могу манипулировать фактической разметкой значительно проще, чем с Рафаэлем. И если вы хотите не-jQuery решение, то SnapSVG является хорошим вариантом.

для потомков я хотел бы отметить, что я в конечном итоге выбрал Рафаэля, из-за чистого API и "бесплатной" поддержки IE, а также потому, что активное развитие выглядит многообещающе (например, поддержка событий была добавлена только в 0.7). Тем не менее, я оставлю вопрос без ответа, и мне все равно было бы интересно услышать о других опытах с использованием библиотек Javascript + SVG.

Я большой поклонник Рафаэля и импульс развития, кажется, идет сильный (версия 0.85 была выпущена в конце прошлой недели). Еще одним большим плюсом является то, что его разработчик,Дмитрий Барановский, в настоящее время работает над плагином Raphael charting, г.Рафаил, который выглядит как его формирование, чтобы быть довольно гладким (есть несколько образцов вывода из ранних версий на Flickr).

однако, просто бросить еще один возможный соперник в библиотеку SVG mix, Google SVG Web выглядит очень многообещающе (хотя я не большой поклонник Flash, который он использует для визуализации в браузерах, не совместимых с SVG). Наверное, один смотреть, особенно с предстоящим SVG Open conference.

Рафаэль определенно легче настроить и начать, но обратите внимание, что есть способы выражения вещей в SVG, которые невозможны в Рафаэле. Как отмечалось выше, нет никаких "групп". Это означает, что вы не можете реализовать слои преобразований координат. Вместо этого доступно только одно преобразование координат.

Если ваш дизайн зависит от вложенных преобразований координат, Рафаэль не для вас.

о Рафаэль значительно продвинулся с июня. Существует новая библиотека графиков, которая может работать с ним, и они очень привлекательны. Рафаэль также поддерживает полный синтаксис пути SVG и включает в себя действительно продвинутые методы пути. Приходите посмотреть 1.2.8+ на мой сайт (бесстыдный плагин), а затем отскочите на сайт Дмитрия оттуда. http://www.irunmywebsite.com/raphael/raphaelsource.html

Я думаю, что это не совсем не связано, но вы рассматривали холст? что-то вроде процесс JS можно сделать проще.

вы также должны взглянуть на svgweb. Он использует flash для визуализации svg в IE и, возможно, в других браузерах (в тех случаях, когда он поддерживает больше, чем сам браузер).

http://code.google.com/p/svgweb/

Я отдам свой голос за Рафаэля-поддержка кросс-браузера, чистый API и последовательные обновления (до сих пор) делают его радостным для использования. Он играет очень хорошо с jQuery тоже. Обработка-это круто, но более полезно в качестве демо для кровоточащего материала на данный момент.

как Новичок Javascript, я нашел rapahel образцы не так просто, я рекомендую http://cancerbero.mbarreneche.com/raphaeltut, который является реальным шаг за шагом учебник.

для тех, кто не заботится о IE6/IE7, тот же парень, который написал Рафаэль, построил движок svg специально для современных браузеров: .svg .. у них есть действительно хороший сайт с хорошими документами:http://snapsvg.io

.svg не может быть проще в использовании прямо из коробки и может управлять/обновлять существующие SVG или создавать новые. Вы можете прочитать этот материал на snap.io о странице, но вот быстрый запуск вниз:

минусы

  • чтобы использовать функции snap, вы должны отказаться от поддержки старых браузеров. Рафаэль поддерживает браузеры, такие как IE6/IE7, функции snap поддерживаются только IE9 и выше, Safari, Chrome, Firefox и Opera.

плюсы

  • реализует все функции SVG, такие как маскировка, обрезка, шаблоны, полные градиенты, группы и больше.

  • возможность работы с существующими SVGs: контент не должен быть сгенерирован с помощью Snap для его работы с Snap, что позволяет создавать контент с помощью любых общих инструментов проектирования.

  • полная поддержка анимации с помощью простого, простого в реализации JavaScript API

  • работает со строками SVG (например, SVG-файлы загружаются через Ajax) без необходимости фактически отображать их сначала, подобно a контейнер ресурсов или лист спрайта.

проверьте это, если вы заинтересованы:http://snapsvg.io

Так как это еще не упоминается здесь: Вы также должны взглянуть на Dojox.рисунок, что также обеспечивает хорошие возможности рисования SVG. Он имеет довольно впечатляющий набор функций. Я только начинаю проект с ним, но мне кажется, что он намного превосходит (по крайней мере, с точки зрения функций) Рафаэля и JQuerySVG.

данная презентация убедила меня использовать его вместо Рафаэль / JQuerySVG: http://www.slideshare.net/elazutkin/dojo-gfx-svg-in-the-real-world-2114082

ссылка: http://dojotoolkit.org/reference-guide/dojox/index.html

ссылка на Dojocampus: http://docs.dojocampus.org/dojox/drawing

скачать Dojo (включая Dojox): http://dojotoolkit.org/download/

еще одна библиотека SVG javascript, которую вы можете посмотреть, - это d3.js. http://d3js.org/

Я предпочитаю использовать RaphaelJS, потому что он имеет большие кросс-браузерные способности. Однако некоторые эффекты SVG & VML не могут быть достигнуты с помощью RaphaelJS (сложные градиенты...).

Google также разработала собственную библиотеку, чтобы включить поддержку SVG в IE: http://svgweb.googlecode.com/files/svgweb-2009-08-20-B.zip

Если вам не нужна поддержка VML и IE8, используйте Canvas (например, PaperJS). Посмотрите на последние демонстрации IE10 для Windows 7. У них есть удивительные анимации на холсте. SVG не способен сделать ничего близкого к ним. Общий холст доступен во всех мобильных браузерах. SVG не работает на ранних версиях Android 2.0 - 2.3 (Как я знаю)

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

с моей точки зрения оптимизация Microsoft предоставляет средства для использования Canvas в качестве обычного движка GDI и реализации графических приложений, как мы делаем их для Windows сейчас.