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

в 12:24, , рубрики: javascript, svg, Веб-разработка, метки: ,

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+

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

Автор: ilusha_sergeevich

Источник


* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js