jQuery SVG против Рафаэля

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

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

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

Ответов (14)

Решение

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

Рафаэль

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

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

jQuery SVG

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

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

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

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

Заключение

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

Поскольку это еще не упомянуто здесь: вам также следует взглянуть на 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/

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

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

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

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

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

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

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

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

Минусы

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

Плюсы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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