АВТОРЫ JavaScript библиотеки SVG.js
dotnetCarpenter
Jon Ege Ronnenberg
aka
dotnetCarpenter
Fuzzyma
Ulrich-Matthias Schäfer
aka
Fuzzyma
saivan
theChosenOne
aka
saivan
wout
wout
aka
wout



svg.js
справочное руководство
          (исходный текст)


Примечание переводчика: в данной справке множество ссылок, которые выглядят вот так: ссылка. При наведении на неё курсора мышки появится всплывающая подсказка. При клике левой кнопкой мышки на ней либо появится ещё одна всплывающая подсказка, либо будет сделан переход в другое место данной справки или на какое-нибудь место в сети Интернет.
Проект перевода на github.com.

svg.js - это легковесная JavaScript библиотека для управления и анимации векторной графики в формате SVG.

Почему стоит выбрать SVG.js?

SVG.js не имеет никаких зависимостей и стремится стать как можно меньше по размеру, при этом обеспечивая почти полное покрытие спецификации SVG. Если вы еще не убедились в этом, вот несколько основных моментов.

SVG.js экономный

SVG.js легковесен. Цифры не лгут, вот он в сравнении с конкурентами:
    Результат Редактировать в JSFiddle

Примечание: Чем меньше тем лучше.
Помните, SVG.js делает все тоже самое, но почти вполовину меньшим кодом!

SVG.js быстрый.

SVG.js работает очень быстро. Конечно, он не быстрее vanilla js, но намного быстрее конкурентов:
    Результат Редактировать в JSFiddle

Указатели:
rects - создание 10000 прямоугольников
fill - создание 10000 прямоугольников и заливка их цветом
gradient - создание 10000 прямоугольников и заполнение их градиентом
Чем меньше тем лучше. Протестировано на Intel Core m5 - 1,2 ГГц.

Легко читаемый, лаконичный синтаксис

Создание и управление SVG при помощи одного лишь JavaScript'а достаточно многословно. Например, простое создание обычного розового квадрата требует довольно много строк кода:
    Код JavaScript       Результат Редактировать в JSFiddle

// Vanilla js
var ns = 'http://www.w3.org/2000/svg'
var div = document.getElementById('drawing')
var svg = document.createElementNS(ns, 'svg')
svg.setAttributeNS(null, 'width', '100%')
svg.setAttributeNS(null, 'height', '100%')
div.appendChild(svg)
var rect = document.createElementNS(ns, 'rect')
rect.setAttributeNS(null, 'width', 100)
rect.setAttributeNS(null, 'height', 100)
rect.setAttributeNS(null, 'fill', '#f06')
svg.appendChild(rect)

SVG.js предоставляет более краткий и легко читаемый синтаксис. Делаем то же, что и в примере выше с ванильным JS:
// SVG.js
var draw = SVG('drawing')
  , rect = draw.rect(100, 100).fill('#f06')
Это всего лишь две строки кода вместо десяти! И намного меньше повторений.

Сногсшибательные анимации

      Результат     Код JavaScript Редактировать в JSFiddle

Dragon----- - - - ->

И кое-что ещё...

анимация по размеру, положению, преобразованиям, цвету, ...
безболезненное расширение благодаря модульной структуре
доступны различные полезные плагины
унифицированный API между типами форм с перемещением (move), размером (size), центром (center), ... unified api between shape types with (link: /manipulating/#move text: move), (link: /manipulating/#resizing text: size), (link: /manipulating/#center text: center), ...
(link: /events/ text: binding events) to elements
full support for opacity (link: /elements/#svg-mask text: masks) and (link: /elements/#svg-clippath text: clipping paths)
(link: /elements/#svg-textpath text: text paths), even animated
element (link: /parents/#svg-g text: groups)
dynamic (link: /elements/#svg-gradient text: gradients) and (link: /elements/#svg-pattern text: patterns)
полная документация (кстати, сейчас вы смотрите её :-)

Лицензия

SVG. js и его документация выпускаются в соответствии с условиями лицензии MIT.
Лицензия MIT на Википедии.

Список изменений

Хотите знать, что изменилось в последних версиях? Смотрите журнал изменений.