Pull to refresh

SVG.js — достойный конкурент Raphaël

Reading time 2 min
Views 52K
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.24% Да 277
9.5% Нет 87
60.26% Возможно 552
916 users voted. 162 users abstained.
Tags:
Hubs:
If this publication inspired you and you want to support the author, do not hesitate to click on the button
+43
Comments 74
Comments Comments 74

Articles