Simple, chainable SVG-building tool for Node.js and the browser.
[](https://github.com/JoeChapman/svg-builder/actions/workflows/ci.yml)
[](https://badge.fury.io/js/svg-builder)
## Install
Requirements:
- Node.js 16 or newer to consume the published package.
- Node.js 22 or newer to run the local build/test tooling.
```
npm install svg-builder
```
## Importing in your app
svg-builder ships precompiled CommonJS and ES Module bundles, so you can drop it into any build without extra tooling.
```ts
// ESM / modern bundlers
import svgBuilder from 'svg-builder';
const markup = svgBuilder.create().viewBox('0 0 100 100').render();
```
```ts
// CommonJS (older Node services)
const svgBuilder = require('svg-builder');
const markup = svgBuilder.create().viewBox('0 0 100 100').render();
```
## Test
```
npm test
```
## Usage (TypeScript)
```ts
import svgBuilder, { SVGBuilderInstance } from 'svg-builder';
const svg: SVGBuilderInstance = svgBuilder
.create()
.width(200)
.height(200)
.viewBox('0 0 200 200');
const rotatingCircle: string = svg.circle(
{
cx: 100,
cy: 100,
r: 80,
fill: '#0EA5E9',
'stroke-width': 8,
stroke: '#1D4ED8',
'aria-label': 'Animated disk',
},
svg.animateTransform({
attributeName: 'transform',
type: 'rotate',
from: '0 100 100',
to: '360 100 100',
dur: '6s',
repeatCount: 'indefinite',
}),
).render();
```
Chaining builder methods lets you configure filters, gradients, and other SVG 2 elements the same way:
```ts
const glow = svgBuilder
.create()
.width(240)
.height(160)
.viewBox('0 0 240 160');
const softGlowExample = glow
.defs(
undefined,
glow.filter(
{ id: 'softGlow', 'color-interpolation-filters': 'sRGB' },
glow.feGaussianBlur({ stdDeviation: 6, in: 'SourceGraphic' }),
),
)
.rect({ width: 240, height: 160, rx: 32, fill: '#0EA5E9', filter: 'url(#softGlow)' })
.text({
x: 120,
y: 96,
fill: '#FFFFFF',
'font-family': 'Inter, system-ui, sans-serif',
'font-size': 24,
'font-weight': 600,
'text-anchor': 'middle',
}, 'SVG 2')
.render();
```
### Grouping multiple children
When you want to nest multiple elements inside a parent (e.g. a ``), build the children with a separate builder and pass that builder as the content argument. Each call produces a sibling, not a wrapper.
```ts
const circles = svgBuilder.create().circle({ cx: 40, cy: 40, r: 25 }).circle({ cx: 60, cy: 60, r: 25 });
const rectangles = svgBuilder.create().rect({ x: 20, y: 20, width: 40, height: 10 });
const nested = svgBuilder
.create()
.viewBox('0 0 100 100')
.g({ id: 'first-group', fill: 'white', stroke: 'green' }, circles)
.g({ id: 'second-group', fill: 'orange' }, rectangles)
.render();
```
### Inline `