Description

svgtracer is a package to trace SVG paths into a list of points. It is intended to be used with typescript and is compatible with node.js and the browser.

Installation

npm install svgtracer

or

yarn add svgtracer

Usage

import traceSVG from 'svgtracer';

const svg = traceSVG('<file content or data uri>');
svg.forEach((path) => {
	path.forEach((point) => {
		console.log(point.position.x, point.position.y);
	});
});

Functions and classes

traceSVG

traceSVG(svg: string, options?: TraceOptions): SVG;

Returns an SVG object containing the traced paths and groups in the original hierarchy. | Parameter | Description | |---------------|---------------------------------------------------| | svg | contents of the svg in text form or data uri form | | options? | options for the svg tracer, see below |

TraceOptions

class TraceOptions {
	resolution: number;
	colors: boolean;
	subpaths: boolean;
	transform: TransformMatrix;
}

| Field | Default value | Description | | ---------- | ----------------- | -------------------------------------------------------------------------------- | | resolution | 1 | resolution of curves, higher is more accurate. | | colors | true | whether to include colors. | | subpaths | true | whether to split paths into subpaths (a new subpath starts with a move command). | | transform | identity | transformation matrix to apply to the svg. |

SVG

class SVG {
	public children: (SVGPath | SVGGroup)[];
	public getAllPaths(): SVGPath[];
}

| Field / Function | Description | | -------------------- | --------------------------------------------------------- | | children | Array containing all direct children of the root element. | | getAllPaths() | Returns an array of all paths in the svg. |

SVGGroup

class SVGGroup {
	public children: (SVGPath | SVGGroup)[];
}

| Field | Description | | --------- | ----------------------------------------------------- | | children | Array containing all direct children of this element. |

SVGPath

class SVGPath {
	public points: Point[];
	public boundingBox?: BoundingBox;
	public style: PathStyle;
	public subpaths: SVGSubpath[];
}

| Field | Description | | ----------- | --------------------------------------------------------------------------- | | points | Array containing all points of the path. Empty, if subpaths are enabled. | | boundingBox | Bounding box of the path. undefined if subpaths are enabled. | | style | Style element of the path. | | subpaths | Array containing all subpaths of the path. Empty, if subpaths are disabled. |

SVGSubpath

class SVGSubpath {
	public points: Point[];
	public boundingBox: BoundingBox;
}

| Field | Description | | ----------- | --------------------------------------- | | points | Array containing all points of the path | | boundingBox | Bounding box of the path. |

Point

class Point {
	public position: Vector2D;
	public normal: Vector2D;
}

| Field | Description | | --------- | --------------------------- | | position | Position of the point. | | normal | Normal vector of the point. |

PathStyle

class PathStyle {
	public fill?: Color;
	public stroke?: Color;
	public strokeWidth?: number;
}

| Field | Description | | ------------ | ---------------------------------------------------------- | | fill? | Fill color of the path. White if the path is not filled. | | stroke? | Stroke color of the path. White if the path is not filled. | | strokeWidth? | Stroke width of the path. Defaults to 1 if not specified. |

Color

class Color {
	public r: number;
	public g: number;
	public b: number;
	public a: number;
}

| Field | Description | | --------- | --------------------- | | r | Red channel (0-255) | | g | Green channel (0-255) | | b | Blue channel (0-255) | | a | Alpha channel (0-255) |