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

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