Svg-artisan NPM

SVG-Artisan

Simple SVG builder/generator for NodeJS.

Inspired by svg-builder by Joseph Chapman.

Installation

pnpm

pnpm i svg-artisan

npm

npm i svg-artisan

Example

import { RawElement, node, Style, Svg } from 'svg-artisan';

// SVG Root element
const svg = new Svg().width(300).height(300);

// Add child element
const text = node.text({ 'font-weight': 'bold', x: 10, y: 10 }, 'Lorem ipsum');
svg.appendChild(text);

// Add multiple elements
const element1 = node.rect(/* ... */);
const element2 = node.line(/* ... */);
const element3 = node.text(/* ... */);
svg.appendChild(element1, element2, element3);

// Add other/custom element (advanced)
const gradient = RawElement.create(
    'gradient', // Element or tag name
    { id: 'myGradient' }, // Attributes
    [
        /* Content or child element(s) inside this `gradient` element */
    ]
);
const defs = RawElement.create('defs').appendChild(gradient);
svg.appendChild(defs);

// Add style
const style = Style.create({}, '#myText { font-weight: bold; }');
svg.appendChild(style);

// Render SVG
const data = svg.render();

// Render as Buffer
const svgBuffer = svg.buffer();