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 в дальнейшем?

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

    Поделиться публикацией
    Похожие публикации
    Реклама помогает поддерживать и развивать наши сервисы

    Подробнее
    Реклама
    Комментарии 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
                                                Не хочу занудствовать, но таки четыре.
                                            • +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
                                                          Зашибись тогда саму библиотеку обсудили.

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