Scripting SVG rectangles without all the boilerplate
The declarative-versus-imperative split is the second biggest distinction between SVG and Canvas, after the vector/raster one, and it shapes how developers actually build things. Canvas is a JavaScript API that fits naturally into JS-heavy environments, while SVG lives in — and is part of — the DOM. That means SVG can be scripted, since the DOM exposes its own APIs. The catch is that doing so isn't what most people would call convenient.
That's the itch Graphery SVG appears built to scratch.
Standard DOM APIs make this a multi-step chore:
const div = document.querySelector('#drawing');
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('width', '100%');
svg.setAttribute('height', '100%');
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);Graphery SVG condenses it into a chained call:
const svg = gySVG().width('100%').height('100%');
const rect = svg.add('rect').x(10).y(10).width(90).height(90).fill('#f06');
svg.attachTo('#drawing');jQuery veterans will recognize the appeal of that style of chaining.
