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

^[1]

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

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

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 я писал в этой статье ^[5])
• Модульная структура, простота написания расширений

  SVG.extend(SVG.Shape, {
    paintRed: function() {
      return this.fill({ color: 'red' })
    }
  })
  
  SVG.extend(SVG.Ellipse, {
    paintRed: function() {
      return this.fill({ color: 'orangered' })
    }
  })
  

• Text paths (с поддержкой анимации)
• Группировка элементов
• Динамичные градиенты
• События
• Понятная документация ^[6]

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

• svg.filter.js ^[7] — набор SVG фильтров (gaussian blur, horizontal blur, desaturate, saturate и др.)
• svg.draggable.js ^[8] — позволяет перетаскивать элементы
• svg.easing.js ^[9] — easing методы для анимации
• svg.path.js ^[10] — очень удобный плагин для создания кривых (демо ^[11])
• svg.math.js ^[12] — набор математических функций
• svg.foreignobject.js ^[13] — реализация foreignObject (элемент SVG, внутрь которого вставляется произвольный HTML)
• svg.export.js ^[14] и svg.import.js ^[15] плагины импорта и экспорта целого 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+

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

Автор: ilusha_sergeevich

Источник ^[16]