Для создания простого SVG требуется много строк кода на JavaScript. Исходный код для создания элементов SVG и работы с ними имеет тенденцию к неконтролируемому росту. Со временем понять и поддерживать код становится непросто.

Этот код создает прямоугольник с помощью SVG:

const div = document.querySelector('#drawing');
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('width', '100px');
svg.setAttribute('height', '100px');
div.appendChild(svg);
const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
rect.setAttribute('x', '10');
rect.setAttribute('y', '10');
rect.setAttribute('width', '90');
rect.setAttribute('height', '90');
rect.setAttribute('fill', '#F06');
svg.appendChild(rect);

Существующие библиотеки позволяют максимально упростить этот код:

• SVG.js
• SNAP SVG
• Graphery SVG

Последняя, Graphery SVG, использует очень полезную цепочку вызовов (в стиле JQuery), которая позволяет создавать динамический SVG-контент очень быстро и легко.

Предыдущий код сокращается до:

const svg = gySVG().width('100px').height('100px');
const rect = svg.add('rect').x(10).y(10).width(90).height(90).fill('#f06');
svg.attachTo('#drawing');

Код SVG очень похож на этот код Graphery SVG Javascript:

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

Пожалуйста, поделитесь своим мнением об этом решении