3,2
рейтинг
25 сентября 2013 в 16:24

Разработка → SVG.js — достойный конкурент Raphaël

image

Доброго времени суток, уважаемые хабражители. Хочу поделиться с вами одной замечательной находкой на GitHub — SVG.js — удобная манипуляция и анимация SVG. Хочется сказать о трех вещах, которые сосредоточили мое внимание на этой библиотеке. Самое простое и важное это то, что с появлением retina дисплеев SVG становится популярнее, более нужным, чем раньше. SVG.min.js весит 34кб и 9кб в Gzip, что в разы меньше Raphaël и что можно пожертвовать для дизайна и эффектов. Минифицированный SVG.filter.js размером в 3кб является прекрасным кроссбраузерным аналогом для свойства webkit-filter.


Удобный синтаксис:


var draw = SVG('canvas').size(300, 300)
var rect = draw.rect(100, 100).attr({ fill: '#f06' });
rect.animate().move(150, 150);
rect.animate({ ease: '<', delay: 1500 }).attr({ fill: '#f03' });


Функционал:


  • Анимация размеров, позиции, трансформации (translation, rotation, skew, scale, matrix), цвета
  • Masking и Clipping элементов (про подобные свойства на CSS я писал в этой статье)
  • Модульная структура, простота написания расширений
    SVG.extend(SVG.Shape, {
      paintRed: function() {
        return this.fill({ color: 'red' })
      }
    })
    
    SVG.extend(SVG.Ellipse, {
      paintRed: function() {
        return this.fill({ color: 'orangered' })
      }
    })
    
  • Text paths (с поддержкой анимации)
  • Группировка элементов
  • Динамичные градиенты
  • События
  • Понятная документация


Существующие плагины


  • svg.filter.js — набор SVG фильтров (gaussian blur, horizontal blur, desaturate, saturate и др.)
  • svg.draggable.js — позволяет перетаскивать элементы
  • svg.easing.js — easing методы для анимации
  • svg.path.js — очень удобный плагин для создания кривых (демо)
  • svg.math.js — набор математических функций
  • svg.foreignobject.js — реализация foreignObject (элемент SVG, внутрь которого вставляется произвольный HTML)
  • svg.export.js и svg.import.js плагины импорта и экспорта целого SVG Canvas или отдельного элемента


Поддержка браузерами:


Десктопные:

  • Firefox 3+
  • Chrome 4+
  • Safari 3.2+
  • Opera 9+
  • IE9 +

Мобильные

  • iOS Safari 3.2+
  • Android Browser 3+
  • Opera Mobile 10+
  • Chrome for Android 18+
  • Firefox for Android 15+


Большое спасибо всем за внимание.
Планируете ли вы использовать SVG.js в дальнейшем?

Проголосовало 847 человек. Воздержалось 149 человек.

Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.

Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (74)

  • 0
    С какой из двух библиотек легче начинать знакомство?
    • 0
      Мне показалось что с SVG.js. Про Raphaël я знал не один год, но на уровне что-то для чего-то на Javascript для SVG. Привлекло мое внимание именно то о чем я написал: простота, фильтры, плагины… Перед постом я уже начал детально рассматривать библиотеки. Raphaël более профессиональная штука, но мне кажется в скором времени SVG.js со своими плагинами будет значительно функциональнее.
  • +5
    IE9+ — совсем не альтернатива Raphaёl
    • +7
      А разве ещё кто-то использует IE8-? Мы уже 2 года как от него отказались.
      • +1
        Понимаешь ли, существуют такие операционные системы как Windows XP и ранние, в которых предустановлен IE 8-. И есть такие пользователи, которые не знают/ не умеют скачивать сторонние браузеры. И их устраивает их IE.
        • +15
          А я слышал, что есть Windows 98, а в ней IE4. Сочувствую тебе, что приходится всякое древнее дерьмо поддерживать.
          • 0
            Я не говорю что надо делать поддержку IE 4. Я имею ввиду что надо сделать поддержку хотя-бы IE 8 т.к. люди ещё пользуются ими
            • +2
              Есть пару человек, которые пользуются IE5.5, почему не нужно делать поддержку этого браузера?
              • +4
                image
                • +4
                  От у меня такая же реакция, когда я слышу, что люди всякие старьё поддерживают.
            • +12
              Люди пользуются этими браузерами потому что их еще поддерживают.
          • +1
            Ох, а я бы такой ценник за это заломил, что и сочувствовать не пришлось бы.
            Непременно государственная контора же, или банк какой-нибудь.
        • 0
          [удалено автором]
        • 0
          Вполне может быть, что и знают, и умеют, и давным-давно хотят сменить IE на новый или вовсе не на IE, да им не разрешено.
      • 0
        Например у нас доля ИЕ7 + ИЕ8 составляет около 10% от общего числа пользователей, если учитывать, что число зарегистрированных пользователей может переваливать за полтора миллиона, то получается достаточно большая группа потенциальных клиентов терять которых не хочется.
        • +6
          А если бы ресурсы, которые затрачиваете на поддержку всякого старья потратили на что-то вменяемое, то получили бы в обмен на слаболиквидных посетителей более высоколиквидных посетителей.
          • +1
            Вполне возможно. Такие решения я, к сожалению, не принимаю.
          • +4
            Ну прекрати, ну сколько можно. Если бизенс фирмы поставка бревен, например, то поддержка ie8 не будет стоить 10% прибыли.
            • +1
              Если бизнес — поставка брёвен, то сайт — трёхстраничная визитка, которую можно сверстать под любой древний IE.
            • +6
              Из-за современных тенденций все, кто хоть как-то завязан на внешний инет уже перейшли на современные браузеры — слишком много сайтов не поддерживается в ИЕ8-.

              Остаются лишь совсем закореневшие пользователи — слишком бедные, чтобы обновится, всякие корпоративные пользователи с ограниченными по самое «не могу» правами и люди, которые боятся интернета.

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

              Потому я и называю их малоликвидными — процент реальных клиентов среди ни меньше, чем среди других групп.
              • НЛО прилетело и опубликовало эту надпись здесь
                • 0
                  Внутренняя статистика проекта, где была поддержка и старых и новых. Пользователи старых браузеров покупали значительно реже, чем пользователи новых (в среднем).
                  • 0
                    статистика одного проекта — не показатель
                    • +1
                      Это показатель лучше, чем вообще отсутствие статистики
                      • +1
                        Конечно лучше такая статистика, чем вообще ничего, но такая статистика позволяет говорить лишь о том, что пользователи старых браузеров малоликвидны для одного конкретного проекта. И экстраполировать опыт одного проекта на весь спектр веб-приложений по меньшей мере глупо.
              • +1
                Веб-приложения бывают разными. Есть ориентированные именно на корпоративный рынок. Например, анализ и визуализация данных (тут-то Raphael с поддержкой IE8 и будет кстати). Такие пользователи могут годами сидеть на том же IE8 — секьюрити апдейты от MS выходят и ладно.
        • +6
          А вы не пытались каким-то образом узнать почему ваши пользователи используют IE7? Я могу предположить, что в сфере банк-клиентов очень много требований под старый IE — там используются ActiveX элементы и прочие джавы, но в обычных потребительских сайтах это зачем? Делайте graceful degradation, ставьте предупреждающие плашки и пользователи сами будут обновляться на современные браузеры. Они этого не делают сейчас, потому что вы им создаёте комфортные условия использования старых браузеров, зачем им лишние телодвижения, когда и так хорошо?
        • 0
          А сколько денег приносят эти пользователи ИЕ?
          Можно я немного пофантазирую?
          Если дневная аудитория 1.5М уников, то это скорее всего медиа либо развлекательный сайт. 10% на ИЕ вполне могут оказаться корпоративными пользователями, которые просто не могут обновить его. Тогда они могут оказаться даже самыми выгодными пользователями — они же не могут поставить adBlock и посмотрят самое большое кол-во баннеров.
          Либо наоборот, за них админ уже закрыл фаерволом все баннерные системы, и они вообще не смотрят рекламу.

          А на самом деле надо взять статистику за последний месяц и посчитать сколько денег (или хотя бы абстрактных полезных действий) приносят эти пользователи. А потом взять тренд за последние несколько месяцев и понять насколько перспективна такая поддержка.
      • 0
        Статистика liveinternet.ru
        Explorer 10 	48,992	4.3%
        Explorer 8 	33,863	3.0%
        Explorer 7 	27,303	2.4%
        Explorer 9 	19,354	1.7%
        Explorer 6 	4,968	0.4%
        

        И правда, кто же их использует?
        IE9+ версию целых 6%, а вот IE8- всего-то 5.8%
      • +3
        > А разве ещё кто-то использует IE8-?
        Да, пользователи.
      • +5
        Шок от части прав… Вообще забацать бы какую нибудь айтишную договоренность игнорирования старых IE. Сколько мы с ними мучаемся… А когда на каждом сайте будут заглушки, люди будут качать современные браузеры. Кроме офисных клерков, а они пусть работают, а не по сайтам лазают =)
        • +10
          Можно бороться так:
          <!--[if lt IE 9]> <style type="text/css"> * { font-family: "Comic Sans MS"; } </style> <![endif]-->
          upd: парсер лох :(
          • +2
            А !important кто писать будет?!
            • +2
              Точно. Оказывается, не только парсер :(
      • 0
        да, иногда его поддержка обходится меньше, чем генерируемая этими пользователями прибыль :)
      • –1
        Фрилансеры читают это с завистью.
      • –2
        Кучу народу, у которых Windows XP и IE6-8 — корпоративный стандарт.
        На некоторых проектах приходится на низ ориентироваться, увы.
    • 0
      В ie8-7 с raphael сделать что-то более менее производительное довольно сложно. Если говорить о path с большим количество точек и большим количеством самих path. Ну или я не умею (
  • –2
    Не понимаю, зачем везде использовать этот маркетинговый термин retina? Это же просто дисплей с высоким разрешением.
    • +6
      может быть потому что «ретина» — это одно слово, а «дисплей с высоким разрешением» — это три слова, не?
      • 0
        Это просто неправильно. Ретина, это маркетинговое название дисплеев, которые последние годы устанавливаются на устройства эпла, человек же явно желает использовать SVG просто для дисплеев с большой плотностью пикселей.
        • 0
          Для многих русскоговорящих, ретина уже давно превратилась из маркетингового названия Apple, в слово, которым удобно такие дисплеи называть. И многим уже, мягко говоря, без разницы от кого это устройство.
          • 0
            Первый раз слышу. Откройте любой русскоговорящий обзор девайса какого-нибудь и практически в каждом будет сравнение с «ретиной», по плотности пикселей. То есть люди используют этот термин обособленно.
            • 0
              Вы привели лишь один из многих контекстов. В языке у слова может быть десяток значений, которые работают в тех или иных контекстах. Да взять, хотя бы, тот же английский язык, где это сильно выражено, за счет малого количества слов в языке (в отличии от богатого русского языка).

              Язык, в первую очередь, решает задачу коммуникации. И если, педантичность мешает этой задаче, то она уходит на второй план. С логической точки зрения, ваше мнение абсолютно верно. Но, вы же прекрасно поняли, что автор статьи под словом «ретина» имел ввиду как раз «дисплей с высоким разрешением». Язык выполнил свою цель. Донес до вас смысл, при этом наименее кратким способом.
              • 0
                Я понял, только потому что погуглил что такое SVG. Человек же не ставший это делать, мог ложно сделать вывод, что это какой-нибудь специальный формат для эпл девайсов и далее не читать топик.
      • +1
        Не хочу занудствовать, но таки четыре.
        • +1
          Тем более! (=
    • +8
      Это живой язык, за тем же почему говорится «ксерокс» вместо «копировального аппарата».
      • +1
        Ой спасибо) Помимо того, что ретина просто короче вы еще такой замечательный пример привели)
        • +2
          Есть много примеров, когда в языке используется слово, считающееся торговой маркой:
          памперс — одноразовый подрузник,
          термос — усовершенствованный сосуд Дьюара,
          аспирин — ацетилсалициловая кислота,
          тефлон — политетрафторэтилен,
          поролон — эластичный пенополиуретан,
          примус — керосиновая горелка
          и т. д.
          • +2
            джип, джакузи, вазелин, унитаз, новокаин, лейкопластырь, патефон, рубероид и нейлон.
            • +1
              Именно! :-)

              акваланг, барби, винчестер, героин, диктофон, кеды, кульман, линолеум, магнитофон, недобук нетбук, радиола, скотч, тосол, фломастер, эскимо…
              • 0
                Ого! Кеды, магнитофон, диктофон, тосол и фломастер удивили.
      • –1
        Язык то живой, но разве у вас со словом retina ассоциациируется не дисплей использующийся в apple устройствах? Или я не прав и для всех это уже давно Ретина это просто дисплей высокой плотности?
        • 0
          Не сколько тип экрана, сколько явление.
          • +1
            У меня такое ощущение, что вы не читаете, то что я пишу ). Причем здесь тип экрана? Явление разной плотности пикселей у экранов было давно, у одних она была выше, у других ниже. Сейчас стали популярны дисплеи с еще более высокой плотностью, и видимо под них разумно использовать векторную графику. Каким боком тут эпл, с названием своих дисплеев я не понимаю.
            • 0
              А популярны они стали вдруг сами по себе, Эпл тут совсем не причём? Вам самому не смешно от вопроса?
              • +1
                Дисплеи с высокой плотностью стали популярны, потому что они лучше, чем дисплеи с низкой плотностью. Ранее они не были столько популярны из-за своей дороговизны. Я правда не понимаю к чему это вы, тема нашего разговора не об этом.
                • –1
                  То, что вы не понимаете, было видно сразу из вашего вопроса.
    • +1
      Не разрешением, а плотностью пикселей в первую очередь. Разрешение — это уже в зависимости от габаритов.
    • +2
      Вы, кстати, не моргнув глазом, употребили «дисплей» вместо слова «экран».
      • 0
        Я не в курсе, это тоже маркетинговые название чье-то? Я думал это от английского display — отображение.
        • –1
          А я что, что-то сказал про маркетинговое название?
          • –1
            А к чему вы тогда это написали?
            • –1
              Как пример употребления нового слова.
              • –1
                Понятно. Только я вообще не про это.
  • –5
    Raphael.js мертв, используйте d3.js
  • 0
    Сегодня утром поигрался. Приятная и очень простая в освоении библиотека. Обязательно воспользуюсь.
  • 0
    Задача Raphaël была создать кроссбраузерное решение. А именно поддерживать IE6 и выше. Для нервных напоминаю, что это было в 2008 году. Да и сейчас IE8 живее всех живых, как бы вам и мне не хотелось бы обратного. В данном контексте не пойму о какой конкуренции идёт речь.

    Если уж вы упоминаете Raphaël в названии, да ещё и в негативном ключе, то неплохо было бы увидеть сравнительный анализ. Иначе как-то некрасиво получается, дорогой автор.
    • 0
      Raphaël лучший! А придёт время, и выпилишь поддержку vml, так и вообще станет красота. Но и конкуренты пусть будут. Иначе как-то скучно получается %)
      Все же вопросы производительности это к браузерам. IE10 кстати еще не тестировал (да и негде пока в нашей корпоративной среде обитания), и IE9 далёк от идеала. ФФ не везде воткнёшь и IE8 много где ещё. Raphaël только и выручает.
  • 0
    Зашибись тогда саму библиотеку обсудили.

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