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+


    Большое спасибо всем за внимание.

    Only registered users can participate in poll. Log in, please.

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

    • 30.0%Да273
    • 9.6%Нет87
    • 60.5%Возможно551
    Ads
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More

    Comments 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-.

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

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

                                Потому я и называю их малоликвидными — процент реальных клиентов среди ни меньше, чем среди других групп.
                                • UFO just landed and posted this here
                                    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
                                                  Тем более! (=
                                              • UFO just landed and posted this here
                                                  +1
                                                  Ой спасибо) Помимо того, что ретина просто короче вы еще такой замечательный пример привели)
                                                    +2
                                                    Есть много примеров, когда в языке используется слово, считающееся торговой маркой:
                                                    памперс — одноразовый подрузник,
                                                    термос — усовершенствованный сосуд Дьюара,
                                                    аспирин — ацетилсалициловая кислота,
                                                    тефлон — политетрафторэтилен,
                                                    поролон — эластичный пенополиуретан,
                                                    примус — керосиновая горелка
                                                    и т. д.
                                                      +2
                                                      джип, джакузи, вазелин, унитаз, новокаин, лейкопластырь, патефон, рубероид и нейлон.
                                                        +1
                                                        Именно! :-)

                                                        акваланг, барби, винчестер, героин, диктофон, кеды, кульман, линолеум, магнитофон, недобук нетбук, радиола, скотч, тосол, фломастер, эскимо…
                                                          0
                                                          Ого! Кеды, магнитофон, диктофон, тосол и фломастер удивили.
                                                    –1
                                                    Язык то живой, но разве у вас со словом retina ассоциациируется не дисплей использующийся в apple устройствах? Или я не прав и для всех это уже давно Ретина это просто дисплей высокой плотности?
                                                    • UFO just landed and posted this here
                                                        +1
                                                        У меня такое ощущение, что вы не читаете, то что я пишу ). Причем здесь тип экрана? Явление разной плотности пикселей у экранов было давно, у одних она была выше, у других ниже. Сейчас стали популярны дисплеи с еще более высокой плотностью, и видимо под них разумно использовать векторную графику. Каким боком тут эпл, с названием своих дисплеев я не понимаю.
                                                        • UFO just landed and posted this here
                                                            +1
                                                            Дисплеи с высокой плотностью стали популярны, потому что они лучше, чем дисплеи с низкой плотностью. Ранее они не были столько популярны из-за своей дороговизны. Я правда не понимаю к чему это вы, тема нашего разговора не об этом.
                                                            • UFO just landed and posted this here
                                                    +1
                                                    Не разрешением, а плотностью пикселей в первую очередь. Разрешение — это уже в зависимости от габаритов.
                                                    • UFO just landed and posted this here
                                                        0
                                                        Я не в курсе, это тоже маркетинговые название чье-то? Я думал это от английского display — отображение.
                                                        • UFO just landed and posted this here
                                                            –1
                                                            А к чему вы тогда это написали?
                                                            • UFO just landed and posted this here
                                                                –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
                                                            Зашибись тогда саму библиотеку обсудили.

                                                            Only users with full accounts can post comments. Log in, please.