Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

f2face/artisan

Repository files navigation

npm version

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

Validate SVG

Currently, this library does not validate the elements and attributes.

If you want to validate the generated SVG, use is-svg npm package.

Rasterize SVG

To convert SVG into raster format (PNG, JPG, etc) programmatically, you can use npm package such as sharp, gm, or other image processor.

References

AltStyle によって変換されたページ (->オリジナル) /