Concept

The goal is to create and manipulate SVG files dynamically through an object-oriented programmatic interface. The solution is a typed library for generating, composing and exporting shapes, paths and animations for web and server environments.

Installation

npm install vectis

Quick start

import { SvgCanvas, Circle, Rect } from "vectis";

const canvas = new SvgCanvas({ width: 200, height: 200 });
canvas.add(new Circle({ cx: 100, cy: 100, r: 50, fill: "steelblue" }));
canvas.add(new Rect({ x: 10, y: 10, width: 80, height: 60, fill: "orange" }));
console.log(canvas.toString());
// '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200"><circle cx="100" cy="100" r="50" fill="steelblue"/><rect x="10" y="10" width="80" height="60" fill="orange"/></svg>'

Canvas options

Option	Type	Default	Description
width	number | string	300	Width of the SVG viewport. Accepts a number (user units) or a CSS string such as "100%" or "50em".
height	number | string	150	Height of the SVG viewport. Accepts a number (user units) or a CSS string such as "100%" or "50em".
viewBox	string	"0 0 {numericWidthOr300} {numericHeightOr150}"	Value of the viewBox attribute (e.g. "0 0 300 150"). When omitted, it defaults to 0 0 W H, where W/H are the width/height values if and only if they are numbers; otherwise 300/150 are used for the corresponding dimension. If either width or height is provided as a string (including numeric strings like "300"), a warning is emitted and 300/150 are used for viewBox in place of that dimension.
namespaces	Record<string, string>	{}	Additional XML namespace declarations for the root <svg> element (e.g. { xlink: "http://www.w3.org/1999/xlink" }).

Responsive SVG with viewBox

Set width and height to "100%" and supply an explicit viewBox to produce a fluid, scalable SVG that fills its container:

import { SvgCanvas, Circle } from "vectis";

const canvas = new SvgCanvas({
  width: "100%",
  height: "100%",
  viewBox: "0 0 200 200",
});
canvas.add(new Circle({ cx: 100, cy: 100, r: 50, fill: "steelblue" }));
console.log(canvas.toString());
// '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="100%" height="100%"><circle cx="100" cy="100" r="50" fill="steelblue"/></svg>'

Shapes

Class	SVG element	Key options
Circle	<circle>	cx, cy, r
Ellipse	<ellipse>	cx, cy, rx, ry
Rect	<rect>	x, y, width, height
Line	<line>	x1, y1, x2, y2
Path	<path>	d (SVG path data string)
Polygon	<polygon>	points (space- or comma-separated coordinates)
Group	<g>	use .add(shape) for nested shapes

All shapes accept common presentation attributes such as fill, stroke, strokeWidth, opacity, transform, id, className, and style.

Animations (SMIL)

Attach one or more SMIL animations to any shape with the .animate() method:

import { SvgCanvas, Circle } from "vectis";

const canvas = new SvgCanvas({ width: 200, height: 200 });
const circle = new Circle({ cx: 100, cy: 100, r: 50, fill: "steelblue" });

circle.animate({
  attributeName: "r",
  from: "50",
  to: "80",
  dur: "1s",
  repeatCount: "indefinite",
});

canvas.add(circle);
console.log(canvas.toString());

Use .animate() with a type option to produce an <animateTransform> element:

circle.animate({
  type: "rotate",
  from: "0 100 100",
  to: "360 100 100",
  dur: "2s",
  repeatCount: "indefinite",
});

Technical Stack

• Language: TypeScript (strict static typing, autocompletion for building node trees).
• Tests: Vitest (fast execution, native ESM support).
• Build: tsup (fast bundling based on esbuild, automatic type definition generation).
• Linting: Biome (formatting and static analysis performance).