Create SVG from Javascript

pabloalmunia — Mon, 13 Dec 2021 12:21:42 +0000

Creating a simple SVG requires many lines of code from JavaScript. The source code for creating and manipulating SVG elements tends to grow uncontrollably. Over time it isn't straightforward to understand and maintain the code.

This code creates a rectangle with 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);

Exist libraries to keep this code most uncomplicated:

The last one, Graphery SVG, uses a very useful call chain (in the style of JQuery), which allows you to create dynamic SVG content very quickly and easily.

The previous code is reduced to:

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');

The SVG code is very similar to this Graphery SVG Javascript code:

<svg viewBox="0,0,100,100" width="100px" height="100px">
  <rect x="10" y="10" width="90" height="90" fill="#f06"></rect></svg>

Graphery SVG is a well-documented library, and it is possible to create very attractive and dynamic SVG.

Please, share your opinion about this solution.

DEV Community: pabloalmunia

Create SVG from Javascript