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


254

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

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

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

Ответы:


194

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

Рафаэль

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

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

jQuery SVG

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

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

SnapSVG как чистая SVG-версия Raphael

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

Вывод

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


15
Документация на RaphaelJS тоже не так уж и хороша, она ограничена, и вам иногда приходится обращаться к документации SVG или jQuery, чтобы получить всю информацию. Тем не менее, благодаря доступной демоверсии (исходному коду), а также форуму и многим пользователям, мне удается получить ответы, которые мне нужны.
Roalt

11
Я только начал использовать Raphael и обнаружил, что документация является одной из лучших, с которыми мне доводилось сталкиваться для API javascript, с очень четкими примерами рядом с более формальными спецификациями
wheresrhys

71
Не забывайте, что RaphaelJS имеет обратную совместимость с VML для Internet Explorer. Это ОГРОМНО, потому что SVG не работает в старых браузерах.
стронгри

3
Вопрос был конкретно о SVG, а не о обратной совместимости. Если вы хотите использовать кросс-браузерную векторную графику, вы правы.
Анатолий Г

4
Еще один аргумент jQuery SVG состоит в том, что проект, хотя и является открытым (GPL и MIT), кажется, что его разработчик забросил (версия 1.4.5 последнее обновление 28 апреля 2012 г.). jquery.svg.dom вызывает некоторые конфликты с jQuery 1.8. В идеале я бы подождал, пока кто-нибудь возьмется за проект и, надеюсь, поместит его в github
Хоффманн,

53

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


1
Хорошая поддержка IE для Рафаэля отличная. Квадраты с закругленными углами в IE? ... нет проблем;)
Питер Айтай

26

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

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


1
Это Рафаэль v. 1.5.2 на данный момент.
topdev gamedev

3
нет ничего особенного в том, что текущая версия 2.1.2. Этот комментарий ожидает исправления другим парнем через несколько лет ...
Tebe

Kopat 'Sho Ya Nashel, Несколько лет спустя ... Сейчас это Raphael v2.2.1
Натанград

12

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

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


11

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


6

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


12
Я смотрел как на холст в целом, так и на обработку в частности. Проблема заключается в том, что (насколько мне известно) события мыши нельзя легко прикрепить к отдельным элементам на холсте для таких функций, как перетаскивание, в отличие от SVG, который полностью доступен для DOM.
Люк Деннис

1
Я не проделал большую работу с canvas, но взглянул на Flot - плагин jquery, который использует canvas для диаграмм. Он хорошо справляется с щелчками мыши.
Бхарани

4
Мышь да, но не дом событий на предметах на холсте. Фактически, для Canvas вы не можете поместить обработчик событий на холст (из-за IE), хотя вы можете поместить его в div, который содержит холст.
Носредна

3
canvas отлично подходит для растровых изображений, SVG отлично подходит для векторной графики. Способность SVG масштабироваться для этого просто фантастическая. Я думаю, что холст и SVG являются взаимодополняющими технологиями.
Анатолий Г

Что касается событий мыши для canvas, взгляните на Easel.js, который обрабатывает все это для вас.
Нил

6

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

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


5

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



5

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

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

Cons

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

Pros

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

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

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

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

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


3

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

Эта презентация убедила меня использовать ее вместо Raphael / 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/



2

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

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


0

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

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

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


1
Для чистой графики, я абсолютно согласен. Единственное, что SVG / VML предлагает, а холст не поддерживает, - это DOM и иерархия событий, поскольку нарисованные элементы являются полными объектами DOM, а не необработанным растровым изображением. С холстом X / Y координаты кликов являются лучшими, чем это можно сделать. В любом случае, проект давно закончился, поэтому он не актуален, но спасибо за ваш ответ. :)
Люк Деннис
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.