Казалось бы, что может быть проще — использовать SVG-элементы в DOM-дереве через JavaScript? Все должно быть также просто как и в HTML документе. Однако, оказалось, там есть свои тонкие места.
Первое что нужно сделать уважающему себя разработчику — научиться подключать внешние ресурсы к своему SVG-документу. Узнать как этого добиться можно прочитав малюсенькую заметку «Как подключить JavaScript и CSS к SVG».
После этого можно приступить к описанию переменных которые будут полезны при обращении к DOM-дереву. Значение этих переменных не должно меняться на протяжении жизненного цикла приложения. Поэтому опишем их в верхнем регистре. Обычно верхний регистр используют для визуального отделения констант (которых на самом деле в JavaScript нет) от других переменных.
var SVGNS = "http://www.w3.org/2000/svg"; var XLINKNS = "http://www.w3.org/1999/xlink"; var ROOT = document.documentElement;
Продолжение следует.