canvg

canvg

Version 4.0.2
Published 2 hours ago
1.29 MB
5 dependencies
MIT license

Install

npm i canvg

yarn add canvg

pnpm add canvg

Overview

JavaScript SVG parser and renderer on Canvas.

Index

Variables

variable elements

const elements: {
    svg: typeof SVGElement;
    rect: typeof RectElement;
    circle: typeof CircleElement;
    ellipse: typeof EllipseElement;
    line: typeof LineElement;
    polyline: typeof PolylineElement;
    polygon: typeof PolygonElement;
    path: typeof PathElement;
    pattern: typeof PatternElement;
    marker: typeof MarkerElement;
    defs: typeof DefsElement;
    linearGradient: typeof LinearGradientElement;
    radialGradient: typeof RadialGradientElement;
    stop: typeof StopElement;
    animate: typeof AnimateElement;
    animateColor: typeof AnimateColorElement;
    animateTransform: typeof AnimateTransformElement;
    font: typeof FontElement;
    'font-face': typeof FontFaceElement;
    'missing-glyph': typeof MissingGlyphElement;
    glyph: typeof GlyphElement;
    text: typeof TextElement;
    tspan: typeof TSpanElement;
    tref: typeof TRefElement;
    a: typeof AElement;
    textPath: typeof TextPathElement;
    image: typeof ImageElement;
    g: typeof GElement;
    symbol: typeof SymbolElement;
    style: typeof StyleElement;
    use: typeof UseElement;
    mask: typeof MaskElement;
    clipPath: typeof ClipPathElement;
    filter: typeof FilterElement;
    feDropShadow: typeof FeDropShadowElement;
    feMorphology: typeof FeMorphologyElement;
    feComposite: typeof FeCompositeElement;
    feColorMatrix: typeof FeColorMatrixElement;
    feGaussianBlur: typeof FeGaussianBlurElement;
    title: typeof TitleElement;
    desc: typeof DescElement;
};

variable PSEUDO_ZERO

const PSEUDO_ZERO: number;

Functions

function CB1

CB1: (t: number) => number;

function CB2

CB2: (t: number) => number;

function CB3

CB3: (t: number) => number;

function CB4

CB4: (t: number) => number;

function compressSpaces

compressSpaces: (str: string) => string;

HTML-safe compress white-spaces.
Parameter str
String to compress.
Returns
String.

function getSelectorSpecificity

getSelectorSpecificity: (selector: string) => string;

Measure selector specificity.
Parameter selector
Selector to measure.
Returns
Specificity.

function normalizeAttributeName

normalizeAttributeName: (name: string) => string;

Normalize attribute name.
Parameter name
Attribute name.
Returns
Normalized attribute name.

function normalizeColor

normalizeColor: (color: string) => string;

Transform floats to integers in rgb colors.
Parameter color
Color to normalize.
Returns
Normalized color.

function parseExternalUrl

parseExternalUrl: (url: string) => string;

Parse external URL.
Parameter url
CSS url string.
Returns
Parsed URL.

function QB1

QB1: (t: number) => number;

function QB2

QB2: (t: number) => number;

function QB3

QB3: (t: number) => number;

function toMatrixValue

toMatrixValue: (str: string) => MatrixValue;

String to matrix value.
Parameter str
Numbers string.
Returns
Matrix value.

function toNumbers

toNumbers: (str: string) => number[];

String to numbers array.
Parameter str
Numbers string.
Returns
Numbers array.

function trimLeft

trimLeft: (str: string) => string;

HTML-safe left trim.
Parameter str
String to trim.
Returns
String.

function trimRight

trimRight: (str: string) => string;

HTML-safe right trim.
Parameter str
String to trim.
Returns
String.

function vectorMagnitude

vectorMagnitude: (v: VectorValue) => number;

Vector magnitude.
Parameter v
Returns
Number result.

function vectorsAngle

vectorsAngle: (u: VectorValue, v: VectorValue) => number;

Angle between two vectors.
Parameter u
Parameter v
Returns
Number result.

function vectorsRatio

vectorsRatio: (u: VectorValue, v: VectorValue) => number;

Ratio between two vectors.
Parameter u
Parameter v
Returns
Number result.

Classes

class AElement

class AElement extends TextElement {}

constructor

constructor(document: Document, node: HTMLElement, captureTextNodes?: boolean);

property hasText

protected readonly hasText: boolean;

property text

protected readonly text: string;

property type

type: string;

method getText

getText: () => string;

method onClick

onClick: () => void;

method onMouseMove

onMouseMove: () => void;

method renderChildren

renderChildren: (ctx: RenderingContext2D) => void;

class AnimateColorElement

class AnimateColorElement extends AnimateElement {}

property type

type: string;

method calcValue

calcValue: () => string;

class AnimateElement

class AnimateElement extends Element {}

constructor

constructor(document: Document, node: HTMLElement, captureTextNodes?: boolean);

property begin

protected readonly begin: number;

property duration

protected duration: number;

property from

protected readonly from: Property<unknown>;

property frozen

protected frozen: boolean;

property initialUnits

protected initialUnits: string;

property initialValue

protected initialValue: string;

property maxDuration

protected readonly maxDuration: number;

property removed

protected removed: boolean;

property to

protected readonly to: Property<unknown>;

property type

type: string;

property values

protected readonly values: Property<string[]>;

method calcValue

calcValue: () => string;

method getProgress

getProgress: () => IProgress;

method getProperty

protected getProperty: () => Property<unknown>;

method update

update: (delta: number) => boolean;

class AnimateTransformElement

class AnimateTransformElement extends AnimateElement {}

property type

type: string;

method calcValue

calcValue: () => string;

class BoundingBox

class BoundingBox {}

constructor

constructor(x1?: number, y1?: number, x2?: number, y2?: number);

property height

readonly height: number;

property width

readonly width: number;

property x

readonly x: number;

property x1

x1: number;

property x2

x2: number;

property y

readonly y: number;

property y1

y1: number;

property y2

y2: number;

method addBezierCurve

addBezierCurve: (
    p0x: number,
    p0y: number,
    p1x: number,
    p1y: number,
    p2x: number,
    p2y: number,
    p3x: number,
    p3y: number
) => void;

method addBoundingBox

addBoundingBox: (boundingBox: BoundingBox | null) => void;

method addPoint

addPoint: (x: number | undefined, y: number | undefined) => void;

method addQuadraticCurve

addQuadraticCurve: (
    p0x: number,
    p0y: number,
    p1x: number,
    p1y: number,
    p2x: number,
    p2y: number
) => void;

method addX

addX: (x: number) => void;

method addY

addY: (y: number) => void;

method isPointInBox

isPointInBox: (x: number, y: number) => boolean;

class Canvg

class Canvg {}

SVG renderer on canvas.

constructor

constructor(ctx: any, svg: globalThis.Document, options?: IOptions);

Main constructor.
Parameter ctx
Rendering context.
Parameter svg
SVG Document.
Parameter options
Rendering options.

property document

readonly document: Document;

Canvg Document.

property parser

readonly parser: Parser;

XML/HTML parser instance.

property screen

readonly screen: Screen;

Screen instance.

method fork

fork: (
    ctx: RenderingContext2D,
    svg: string,
    options?: IOptions
) => Promise<Canvg>;

Create new Canvg instance with inherited options.
Parameter ctx
Rendering context.
Parameter svg
SVG source string or URL.
Parameter options
Rendering options.
Returns
Canvg instance.

method forkString

forkString: (ctx: RenderingContext2D, svg: string, options?: IOptions) => Canvg;

Create new Canvg instance with inherited options.
Parameter ctx
Rendering context.
Parameter svg
SVG source string.
Parameter options
Rendering options.
Returns
Canvg instance.

method from

static from: (
    ctx: RenderingContext2D,
    svg: string,
    options?: IOptions
) => Promise<Canvg>;

Create Canvg instance from SVG source string or URL.
Parameter ctx
Rendering context.
Parameter svg
SVG source string or URL.
Parameter options
Rendering options.
Returns
Canvg instance.

method fromString

static fromString: (
    ctx: RenderingContext2D,
    svg: string,
    options?: IOptions
) => Canvg;

Create Canvg instance from SVG source string.
Parameter ctx
Rendering context.
Parameter svg
SVG source string.
Parameter options
Rendering options.
Returns
Canvg instance.

method isReady

isReady: () => boolean;

Document is ready value.
Returns
Is ready or not.

method ready

ready: () => Promise<void>;

Document is ready promise.
Returns
Ready promise.

method render

render: (options?: IScreenStartOptions) => Promise<void>;

Render only first frame, ignoring animations and mouse.
Parameter options
Rendering options.

method resize

resize: (
    width: number,
    height?: number,
    preserveAspectRatio?: boolean | string
) => void;

Resize SVG to fit in given size.
Parameter width
Parameter height
Parameter preserveAspectRatio

method start

start: (options?: IScreenStartOptions) => void;

Start rendering.
Parameter options
Render options.

method stop

stop: () => void;

Stop rendering.

class CircleElement

class CircleElement extends PathElement {}

property type

type: string;

method getMarkers

getMarkers: () => any;

method path

path: (ctx: RenderingContext2D) => BoundingBox;

class ClipPathElement

class ClipPathElement extends Element {}

property type

type: string;

method apply

apply: (ctx: RenderingContext2D) => void;

method render

render: (_: RenderingContext2D) => void;

class DefsElement

class DefsElement extends Element {}

property type

type: string;

method render

render: () => void;

class DescElement

class DescElement extends Element {}

property type

type: string;

class Document

class Document {}

constructor

constructor(
    canvg: Canvg,
    {
        rootEmSize,
        emSize,
        createCanvas,
        createImage,
        anonymousCrossOrigin,
    }?: IDocumentOptions
);

property canvg

readonly canvg: Canvg;

property createCanvas

static readonly createCanvas: (
    width: number,
    height: number
) => HTMLCanvasElement;

property createCanvas

readonly createCanvas: CreateCanvas;

property createImage

static readonly createImage: (
    src: string,
    anonymousCrossOrigin?: boolean
) => Promise<HTMLImageElement>;

property createImage

readonly createImage: CreateImage;

property ctx

readonly ctx: any;

property definitions

readonly definitions: Record<string, Element>;

property documentElement

documentElement?: SVGElement;

property elementTypes

static readonly elementTypes: Record<string, AnyElement>;

property emSize

emSize: number;

property fetch

readonly fetch: (
    input: RequestInfo | URL,
    init?: RequestInit
) => Promise<Response>;

property fonts

readonly fonts: SVGFontLoader[];

property images

readonly images: ImageElement[];

property rootEmSize

rootEmSize: number;

property screen

readonly screen: Screen;

property styles

readonly styles: Record<string, Record<string, Property<unknown>>>;

property stylesSpecificity

readonly stylesSpecificity: Record<string, string>;

property window

readonly window: Window;

method createDocumentElement

createDocumentElement: (document: DOMDocument) => SVGElement;

method createElement

createElement: <T extends Element>(node: HTMLElement) => T;

method createTextNode

createTextNode: (node: HTMLElement) => TextNode;

method getUniqueId

getUniqueId: () => string;

method isFontsLoaded

isFontsLoaded: () => boolean;

method isImagesLoaded

isImagesLoaded: () => boolean;

method popEmSize

popEmSize: () => void;

method setViewBox

setViewBox: (config: IViewBoxConfig) => void;

class Element

abstract class Element {}

constructor

constructor(document: Document, node?: HTMLElement, captureTextNodes?: boolean);

property animationFrozen

animationFrozen: boolean;

property animationFrozenValue

animationFrozenValue: string;

property attributes

readonly attributes: Record<string, Property<unknown>>;

property captureTextNodes

protected readonly captureTextNodes: boolean;

property children

children: Element[];

property document

protected readonly document: Document;

property ignoreChildTypes

static readonly ignoreChildTypes: string[];

property node

protected readonly node?: HTMLElement;

property parent

parent: Element;

property styles

readonly styles: Record<string, Property<unknown>>;

property stylesSpecificity

readonly stylesSpecificity: Record<string, string>;

property type

readonly type: string;

method addChild

protected addChild: (childNode: Element | HTMLElement) => void;

method addStylesFromStyleDefinition

addStylesFromStyleDefinition: () => void;

method applyEffects

protected applyEffects: (ctx: RenderingContext2D) => void;

method clearContext

clearContext: (_: RenderingContext2D) => void;

method getAttribute

getAttribute: (name: string, createIfNotExists?: boolean) => Property;

method getHrefAttribute

getHrefAttribute: () => Property;

method getStyle

getStyle: (
    name: string,
    createIfNotExists?: boolean,
    skipAncestors?: boolean
) => Property;

method isFirstChild

isFirstChild: () => boolean;

method matchesSelector

protected matchesSelector: (selector: string) => boolean;

method removeStyles

protected removeStyles: (
    element: Element,
    ignoreStyles: string[]
) => [string, string][];

method render

render: (ctx: RenderingContext2D) => void;

method renderChildren

renderChildren: (ctx: RenderingContext2D) => void;

method restoreStyles

protected restoreStyles: (element: Element, styles: [string, string][]) => void;

method setContext

setContext: (_: RenderingContext2D) => void;

class EllipseElement

class EllipseElement extends PathElement {}

property type

type: string;

method getMarkers

getMarkers: () => any;

method path

path: (ctx: RenderingContext2D) => BoundingBox;

class FeColorMatrixElement

class FeColorMatrixElement extends Element {}

constructor

constructor(document: Document, node: HTMLElement, captureTextNodes?: boolean);

property includeOpacity

protected readonly includeOpacity: boolean;

property matrix

protected readonly matrix: number[];

property type

type: string;

method apply

apply: (
    ctx: RenderingContext2D,
    _x: number,
    _y: number,
    width: number,
    height: number
) => void;

class FeCompositeElement

class FeCompositeElement extends Element {}

property type

type: string;

method apply

apply: (
    _: RenderingContext2D,
    _x: number,
    _y: number,
    _width: number,
    _height: number
) => void;

class FeDropShadowElement

class FeDropShadowElement extends Element {}

constructor

constructor(document: Document, node: HTMLElement, captureTextNodes?: boolean);

property type

type: string;

method apply

apply: (
    _: RenderingContext2D,
    _x: number,
    _y: number,
    _width: number,
    _height: number
) => void;

class FeGaussianBlurElement

class FeGaussianBlurElement extends Element {}

constructor

constructor(document: Document, node: HTMLElement, captureTextNodes?: boolean);

property blurRadius

protected readonly blurRadius: number;

property extraFilterDistance

readonly extraFilterDistance: number;

property type

type: string;

method apply

apply: (
    ctx: RenderingContext2D,
    x: number,
    y: number,
    width: number,
    height: number
) => void;

class FeMorphologyElement

class FeMorphologyElement extends Element {}

property type

type: string;

method apply

apply: (
    _: RenderingContext2D,
    _x: number,
    _y: number,
    _width: number,
    _height: number
) => void;

class FilterElement extends Element {}

static ignoreStyles: string[];

type: string;

apply: (ctx: RenderingContext2D, element: Element | PathElement) => void;

render: (_: RenderingContext2D) => void;

class Font

class Font {}

constructor

constructor(
    fontStyle: string,
    fontVariant: string,
    fontWeight: string,
    fontSize: string,
    fontFamily: string,
    inherit?: string | Font
);

property fontFamily

readonly fontFamily: string;

property fontSize

readonly fontSize: string;

property fontStyle

readonly fontStyle: string;

property fontVariant

readonly fontVariant: string;

property fontWeight

readonly fontWeight: string;

property styles

static readonly styles: string;

property variants

static readonly variants: string;

property weights

static readonly weights: string;

method parse

static parse: (font?: string, inherit?: string | Font) => Font;

method toString

toString: () => string;

class FontElement

class FontElement extends Element {}

constructor

constructor(document: Document, node: HTMLElement, captureTextNodes?: boolean);

property arabicGlyphs

readonly arabicGlyphs: Record<string, Partial<Record<ArabicForm, GlyphElement>>>;

property fontFace

readonly fontFace: FontFaceElement;

property glyphs

readonly glyphs: Record<string, GlyphElement>;

property horizAdvX

readonly horizAdvX: number;

property isArabic

readonly isArabic: boolean;

property isRTL

readonly isRTL: boolean;

property missingGlyph

readonly missingGlyph: MissingGlyphElement;

property type

type: string;

method render

render: () => void;

class FontFaceElement

class FontFaceElement extends Element {}

constructor

constructor(document: Document, node: HTMLElement, captureTextNodes?: boolean);

property ascent

readonly ascent: number;

property descent

readonly descent: number;

property type

type: string;

property unitsPerEm

readonly unitsPerEm: number;

class GElement

class GElement extends RenderedElement {}

property type

type: string;

method getBoundingBox

getBoundingBox: (ctx: RenderingContext2D) => BoundingBox;

class GlyphElement

class GlyphElement extends PathElement {}

constructor

constructor(document: Document, node: HTMLElement, captureTextNodes?: boolean);

property arabicForm

readonly arabicForm: ArabicForm;

property horizAdvX

readonly horizAdvX: number;

property type

type: string;

property unicode

readonly unicode: string;

class GradientElement

abstract class GradientElement extends Element {}

constructor

constructor(document: Document, node: HTMLElement, captureTextNodes?: boolean);

property attributesToInherit

readonly attributesToInherit: string[];

property stops

protected readonly stops: StopElement[];

method addParentOpacity

protected addParentOpacity: (
    parentOpacityProp: Property,
    color: string
) => string;

method createGradient

createGradient: (
    ctx: RenderingContext2D,
    element: PathElement,
    parentOpacityProp: Property
) => string | CanvasGradient | CanvasPattern;

method getGradient

abstract getGradient: (
    ctx: RenderingContext2D,
    element: PathElement
) => CanvasGradient | null;

method getGradientUnits

getGradientUnits: () => string;

method inheritStopContainer

protected inheritStopContainer: (stopsContainer: Element) => void;

class ImageElement

class ImageElement extends RenderedElement {}

constructor

constructor(document: Document, node: HTMLElement, captureTextNodes?: boolean);

property image

protected image: string | CanvasImageSource;

property loaded

loaded: boolean;

property type

type: string;

method getBoundingBox

getBoundingBox: () => BoundingBox;

method loadImage

protected loadImage: (href: string) => Promise<void>;

method loadSvg

protected loadSvg: (href: string) => Promise<void>;

method renderChildren

renderChildren: (ctx: RenderingContext2D) => void;

class LinearGradientElement

class LinearGradientElement extends GradientElement {}

constructor

constructor(document: Document, node: HTMLElement, captureTextNodes?: boolean);

property type

type: string;

method getGradient

getGradient: (ctx: RenderingContext2D, element: PathElement) => CanvasGradient;

class LineElement

class LineElement extends PathElement {}

property type

type: string;

method getMarkers

getMarkers: () => Marker[];

method getPoints

getPoints: () => Point[];

method path

path: (ctx: RenderingContext2D) => BoundingBox;

class MarkerElement

class MarkerElement extends Element {}

property type

type: string;

method render

render: (ctx: RenderingContext2D, point?: Point, angle?: number) => void;

class MaskElement

class MaskElement extends Element {}

property ignoreStyles

static ignoreStyles: string[];

property type

type: string;

method apply

apply: (ctx: RenderingContext2D, element: Element) => void;

method render

render: (_: RenderingContext2D) => void;

class Matrix

class Matrix implements ITransform {}

constructor

constructor(
    _: Document,
    matrix: string,
    transformOrigin: readonly [Property<string>, Property<string>]
);

property matrix

protected matrix: MatrixValue;

property type

type: string;

method apply

apply: (ctx: RenderingContext2D) => void;

method applyToPoint

applyToPoint: (point: Point) => void;

method unapply

unapply: (ctx: RenderingContext2D) => void;

class MissingGlyphElement

class MissingGlyphElement extends GlyphElement {}

property horizAdvX

readonly horizAdvX: number;

property type

type: string;

class Mouse

class Mouse {}

constructor

constructor(screen: Screen);

method checkBoundingBox

checkBoundingBox: (element: Element, boundingBox: BoundingBox | null) => void;

method checkPath

checkPath: (element: Element, ctx: RenderingContext2D | null) => void;

method hasEvents

hasEvents: () => boolean;

method isWorking

isWorking: () => boolean;

method runEvents

runEvents: () => void;

method start

start: () => void;

method stop

stop: () => void;

class Parser

class Parser {}

constructor

constructor({ fetch, DOMParser }?: IParserOptions);

method load

load: (url: string) => Promise<Document>;

method parse

parse: (resource: string) => Promise<Document>;

method parseFromString

parseFromString: (xml: string) => Document;

class PathElement

class PathElement extends RenderedElement {}

constructor

constructor(document: Document, node?: HTMLElement, captureTextNodes?: boolean);

property pathParser

readonly pathParser: PathParser;

property type

type: string;

method getBoundingBox

getBoundingBox: (_ctx: RenderingContext2D) => BoundingBox;

method getMarkers

getMarkers: () => Marker[];

method path

path: (ctx?: RenderingContext2D) => BoundingBox;

method pathA

static pathA: (pathParser: PathParser) => {
    currentPoint: Point;
    rX: number;
    rY: number;
    sweepFlag: 0 | 1;
    xAxisRotation: number;
    centp: Point;
    a1: number;
    ad: number;
};

method pathC

static pathC: (pathParser: PathParser) => {
    current: Point;
    point: Point;
    controlPoint: Point;
    currentPoint: Point;
};

method pathH

static pathH: (pathParser: PathParser) => { current: Point; point: Point };

method pathL

static pathL: (pathParser: PathParser) => { current: Point; point: Point };

method pathM

static pathM: (pathParser: PathParser) => { point: Point };

method pathQ

static pathQ: (pathParser: PathParser) => {
    current: Point;
    controlPoint: Point;
    currentPoint: Point;
};

method pathS

static pathS: (pathParser: PathParser) => {
    current: Point;
    point: Point;
    controlPoint: Point;
    currentPoint: Point;
};

method pathT

static pathT: (pathParser: PathParser) => {
    current: Point;
    controlPoint: Point;
    currentPoint: Point;
};

method pathV

static pathV: (pathParser: PathParser) => { current: Point; point: Point };

method pathZ

static pathZ: (pathParser: PathParser) => void;

method renderChildren

renderChildren: (ctx: RenderingContext2D) => void;

class PathParser

class PathParser extends SVGPathData {}

constructor

constructor(path: string);

property command

command: Command;

property commands

readonly commands: Command[];

property control

control: Point;

property current

current: Point;

property start

start: Point;

method addMarker

addMarker: (point: Point, from?: Point, priorTo?: Point) => void;

method addMarkerAngle

addMarkerAngle: (point: Point, angle: number) => void;

method getAsControlPoint

getAsControlPoint: (xProp?: string, yProp?: string) => Point;

method getAsCurrentPoint

getAsCurrentPoint: (xProp?: string, yProp?: string) => Point;

method getMarkerAngles

getMarkerAngles: () => number[];

method getMarkerPoints

getMarkerPoints: () => Point[];

method getPoint

getPoint: (xProp?: string, yProp?: string) => Point;

method getReflectedControlPoint

getReflectedControlPoint: () => Point;

method isEnd

isEnd: () => boolean;

method makeAbsolute

makeAbsolute: (point: Point) => Point;

method next

next: () => Command;

method reset

reset: () => void;

class PatternElement

class PatternElement extends Element {}

property type

type: string;

method createPattern

createPattern: (
    ctx: RenderingContext2D,
    _: Element,
    parentOpacityProp: Property
) => CanvasPattern;

class Point

class Point {}

constructor

constructor(x: number, y: number);

property x

x: number;

property y

y: number;

method angleTo

angleTo: (point: Point) => number;

method applyTransform

applyTransform: (transform: MatrixValue) => void;

method parse

static parse: (point: string, defaultValue?: number) => Point;

method parsePath

static parsePath: (path: string) => Point[];

method parseScale

static parseScale: (scale: string, defaultValue?: number) => Point;

class PolygonElement

class PolygonElement extends PolylineElement {}

property type

type: string;

method path

path: (ctx: RenderingContext2D) => import('..').BoundingBox;

class PolylineElement

class PolylineElement extends PathElement {}

constructor

constructor(document: Document, node: HTMLElement, captureTextNodes?: boolean);

property points

protected readonly points: Point[];

property type

type: string;

method getMarkers

getMarkers: () => Marker[];

method path

path: (ctx: RenderingContext2D) => BoundingBox;

class Property

class Property<T = unknown> {}

constructor

constructor(document: Document, name: string, value: {});

property textBaselineMapping

static readonly textBaselineMapping: Record<string, string>;

method addOpacity

addOpacity: (opacity: Property) => Property<string>;

method empty

static empty: (document: Document) => Property<string>;

method getColor

getColor: (def?: T) => string;

method getDefinition

getDefinition: <T extends Element>() => T;

method getDpi

getDpi: () => number;

method getEm

getEm: () => number;

method getFillStyleDefinition

getFillStyleDefinition: (
    element: Element | PathElement,
    opacity: Property
) => string | CanvasGradient | CanvasPattern;

method getMilliseconds

getMilliseconds: () => number;

method getNumber

getNumber: (def?: T) => number;

method getPixels

getPixels: {
    (axis?: Axis, processPercent?: boolean): number;
    (isFontSize?: boolean): number;
};

method getRadians

getRadians: () => number;

method getRem

getRem: () => number;

method getString

getString: (def?: T) => string;

method getTextBaseline

getTextBaseline: () => string;

method getUnits

getUnits: () => string;

method getValue

getValue: (def?: T) => T;

method hasValue

hasValue: (zeroIsValue?: boolean) => boolean;

method isPixels

isPixels: () => boolean;

method isString

isString: (regexp?: RegExp) => boolean;

method isUrlDefinition

isUrlDefinition: () => boolean;

method setValue

setValue: (value: T) => this;

method split

split: (separator?: string) => Property<string>[];

class RadialGradientElement

class RadialGradientElement extends GradientElement {}

constructor

constructor(document: Document, node: HTMLElement, captureTextNodes?: boolean);

property type

type: string;

method getGradient

getGradient: (ctx: RenderingContext2D, element: PathElement) => CanvasGradient;

class RectElement

class RectElement extends PathElement {}

property type

type: string;

method getMarkers

getMarkers: () => any;

method path

path: (ctx: RenderingContext2D) => BoundingBox;

class RenderedElement

abstract class RenderedElement extends Element {}

method calculateOpacity

protected calculateOpacity: () => number;

method clearContext

clearContext: (ctx: RenderingContext2D) => void;

method setContext

setContext: (ctx: RenderingContext2D, fromMeasure?: boolean) => void;

class Rotate

class Rotate {}

constructor

constructor(
    document: Document,
    rotate: string,
    transformOrigin: readonly [Property<string>, Property<string>]
);

property type

type: string;

method apply

apply: (ctx: RenderingContext2D) => void;

method applyToPoint

applyToPoint: (point: Point) => void;

method unapply

unapply: (ctx: RenderingContext2D) => void;

class Scale

class Scale {}

constructor

constructor(
    _: Document,
    scale: string,
    transformOrigin: readonly [Property<string>, Property<string>]
);

property type

type: string;

method apply

apply: (ctx: RenderingContext2D) => void;

method applyToPoint

applyToPoint: (point: Point) => void;

method unapply

unapply: (ctx: RenderingContext2D) => void;

class Screen

class Screen {}

constructor

constructor(ctx: any, { fetch, window }?: IScreenOptions);

property animations

readonly animations: AnimateElement[];

property ctx

readonly ctx: any;

property defaultFetch

static readonly defaultFetch: (
    input: RequestInfo | URL,
    init?: RequestInit
) => Promise<Response>;

property defaultWindow

static readonly defaultWindow: Window & typeof globalThis;

property fetch

readonly fetch: (
    input: RequestInfo | URL,
    init?: RequestInit
) => Promise<Response>;

property FRAMERATE

static FRAMERATE: number;

property MAX_VIRTUAL_PIXELS

static MAX_VIRTUAL_PIXELS: number;

property mouse

readonly mouse: Mouse;

property viewPort

readonly viewPort: ViewPort;

property window

readonly window: Window;

method isReady

isReady: () => boolean;

method ready

ready: () => Promise<void>;

method setDefaults

setDefaults: (ctx: RenderingContext2D) => void;

method setViewBox

setViewBox: ({
    document,
    ctx,
    aspectRatio,
    width,
    desiredWidth,
    height,
    desiredHeight,
    minX,
    minY,
    refX,
    refY,
    clip,
    clipX,
    clipY,
}: IScreenViewBoxConfig) => void;

method start

start: (
    element: Element,
    {
        enableRedraw,
        ignoreMouse,
        ignoreAnimation,
        ignoreDimensions,
        ignoreClear,
        forceRedraw,
        scaleWidth,
        scaleHeight,
        offsetX,
        offsetY,
    }?: IScreenStartOptions
) => void;

method stop

stop: () => void;

method wait

wait: (checker: () => boolean) => void;

class Skew

class Skew extends Matrix {}

constructor

constructor(
    document: Document,
    skew: string,
    transformOrigin: readonly [Property<string>, Property<string>]
);

property angle

protected readonly angle: Property<unknown>;

property type

type: string;

class SkewX

class SkewX extends Skew {}

constructor

constructor(
    document: Document,
    skew: string,
    transformOrigin: readonly [Property<string>, Property<string>]
);

property type

type: string;

class SkewY

class SkewY extends Skew {}

constructor

constructor(
    document: Document,
    skew: string,
    transformOrigin: readonly [Property<string>, Property<string>]
);

property type

type: string;

class StopElement

class StopElement extends Element {}

constructor

constructor(document: Document, node: HTMLElement, captureTextNodes?: boolean);

property color

readonly color: string;

property offset

readonly offset: number;

property type

type: string;

class StyleElement

class StyleElement extends Element {}

constructor

constructor(document: Document, node: HTMLElement, captureTextNodes?: boolean);

property parseExternalUrl

static readonly parseExternalUrl: (url: string) => string;

property type

type: string;

class SVGElement

class SVGElement extends RenderedElement {}

property root

root: boolean;

property type

type: string;

method clearContext

clearContext: (ctx: RenderingContext2D) => void;

method resize

resize: (
    width: number,
    height?: number,
    preserveAspectRatio?: boolean | string
) => void;

Resize SVG to fit in given size.
Parameter width
Parameter height
Parameter preserveAspectRatio

method setContext

setContext: (ctx: RenderingContext2D) => void;

class SVGFontLoader

class SVGFontLoader {}

constructor

constructor(document: Document);

property loaded

loaded: boolean;

method load

load: (fontFamily: string, url: string) => Promise<void>;

class SymbolElement

class SymbolElement extends RenderedElement {}

property type

type: string;

method render

render: (_: RenderingContext2D) => void;

class TextElement

class TextElement extends RenderedElement {}

constructor

constructor(document: Document, node: HTMLElement, captureTextNodes?: boolean);

property type

type: string;

property x

protected x: number;

property y

protected y: number;

method adjustChildCoordinates

protected adjustChildCoordinates: (
    ctx: RenderingContext2D,
    textParent: TextElement,
    parent: Element,
    i: number
) => TextElement;

method adjustChildCoordinatesRecursive

protected adjustChildCoordinatesRecursive: (ctx: RenderingContext2D) => void;

method adjustChildCoordinatesRecursiveCore

protected adjustChildCoordinatesRecursiveCore: (
    ctx: RenderingContext2D,
    textParent: TextElement,
    parent: Element,
    i: number
) => void;

method applyAnchoring

protected applyAnchoring: () => void;

method getBoundingBox

getBoundingBox: (ctx: RenderingContext2D) => BoundingBox;

method getChildBoundingBox

protected getChildBoundingBox: (
    ctx: RenderingContext2D,
    textParent: TextElement,
    parent: Element,
    i: number
) => BoundingBox;

method getFontSize

protected getFontSize: () => number;

method getGlyph

getGlyph: (font: FontElement, text: string, i: number) => GlyphElement;

method getInheritedAttribute

protected getInheritedAttribute: (name: string) => string | null;

Inherits positional attributes from TextElement parent(s). Attributes are only inherited from a parent to its first child.
Parameter name
The attribute name.
Returns
The attribute value or null.

method getTElementBoundingBox

protected getTElementBoundingBox: (ctx: RenderingContext2D) => BoundingBox;

method getText

getText: () => string;

method getTextFromNode

protected getTextFromNode: (node?: ChildNode) => string;

method initializeCoordinates

protected initializeCoordinates: () => void;

method measureTargetText

protected measureTargetText: (
    ctx: RenderingContext2D,
    targetText: string
) => number;

method measureText

protected measureText: (ctx: RenderingContext2D) => number;

method renderChild

protected renderChild: (
    ctx: RenderingContext2D,
    textParent: TextElement,
    parent: Element,
    i: number
) => void;

method renderChildren

renderChildren: (ctx: RenderingContext2D) => void;

method renderTElementChildren

protected renderTElementChildren: (ctx: RenderingContext2D) => void;

method setContext

setContext: (ctx: RenderingContext2D, fromMeasure?: boolean) => void;

class TextPathElement

class TextPathElement extends TextElement {}

constructor

constructor(document: Document, node: HTMLElement, captureTextNodes?: boolean);

property dataArray

protected readonly dataArray: IPathCommand[];

property glyphInfo

protected glyphInfo: IGlyphInfo[];

property pathLength

protected pathLength: number;

property text

protected readonly text: string;

property textHeight

protected textHeight: number;

property textWidth

protected textWidth: number;

property type

type: string;

method buildEquidistantCache

protected buildEquidistantCache: (
    inputStep: number,
    inputPrecision: number
) => void;

method calcLength

protected calcLength: (
    x: number,
    y: number,
    commandType: SVGCommand,
    points: number[]
) => number;

method findSegmentToFitChar

protected findSegmentToFitChar: (
    ctx: RenderingContext2D,
    anchor: string,
    textFullWidth: number,
    fullPathWidth: number,
    spacesNumber: number,
    inputOffset: number,
    dy: number,
    c: string,
    charI: number
) => {
    offset: number;
    segment: { p0: ICachedPoint; p1: ICachedPoint };
    rotation: number;
};

method getEquidistantPointOnPath

protected getEquidistantPointOnPath: (
    targetDistance: number,
    step?: number,
    precision?: number
) => ICachedPoint;

method getLetterSpacingAt

protected getLetterSpacingAt: (idx?: number) => number;

method getLineLength

protected getLineLength: (
    x1: number,
    y1: number,
    x2: number,
    y2: number
) => number;

method getPathLength

protected getPathLength: () => number;

method getPointOnCubicBezier

protected getPointOnCubicBezier: (
    pct: number,
    p1x: number,
    p1y: number,
    p2x: number,
    p2y: number,
    p3x: number,
    p3y: number,
    p4x: number,
    p4y: number
) => IPoint;

method getPointOnEllipticalArc

protected getPointOnEllipticalArc: (
    cx: number,
    cy: number,
    rx: number,
    ry: number,
    theta: number,
    psi: number
) => IPoint;

method getPointOnLine

protected getPointOnLine: (
    dist: number,
    p1x: number,
    p1y: number,
    p2x: number,
    p2y: number,
    fromX?: number,
    fromY?: number
) => IPoint;

method getPointOnPath

protected getPointOnPath: (distance: number) => IPoint;

method getPointOnQuadraticBezier

protected getPointOnQuadraticBezier: (
    pct: number,
    p1x: number,
    p1y: number,
    p2x: number,
    p2y: number,
    p3x: number,
    p3y: number
) => IPoint;

method getText

getText: () => string;

method measureText

protected measureText: (ctx: RenderingContext2D, text?: string) => number;

method parsePathData

protected parsePathData: (path: PathElement) => IPathCommand[];

method path

path: (ctx: RenderingContext2D) => void;

method pathA

protected pathA: (pathParser: PathParser) => number[];

method pathC

protected pathC: (pathParser: PathParser, points: number[]) => void;

method pathH

protected pathH: (pathParser: PathParser, points: number[]) => 16;

method pathL

protected pathL: (pathParser: PathParser, points: number[]) => 16;

method pathM

protected pathM: (pathParser: PathParser, points: number[]) => void;

method pathQ

protected pathQ: (pathParser: PathParser, points: number[]) => void;

method pathS

protected pathS: (pathParser: PathParser, points: number[]) => 32;

method pathT

protected pathT: (pathParser: PathParser, points: number[]) => 128;

method pathV

protected pathV: (pathParser: PathParser, points: number[]) => 16;

method renderChildren

renderChildren: (ctx: RenderingContext2D) => void;

method setTextData

protected setTextData: (ctx: RenderingContext2D) => void;

class TitleElement

class TitleElement extends Element {}

property type

type: string;

class Transform

class Transform {}

constructor

constructor(
    document: Document,
    transform: string,
    transformOrigin: readonly [Property<string>, Property<string>]
);

property transformTypes

static transformTypes: Record<string, ITransformConstructor>;

method apply

apply: (ctx: RenderingContext2D) => void;

method applyToPoint

applyToPoint: (point: Point) => void;

method fromElement

static fromElement: (document: Document, element: Element) => Transform;

method unapply

unapply: (ctx: RenderingContext2D) => void;

class Translate

class Translate {}

constructor

constructor(_: Document, point: string);

property type

type: string;

method apply

apply: (ctx: RenderingContext2D) => void;

method applyToPoint

applyToPoint: (point: Point) => void;

method unapply

unapply: (ctx: RenderingContext2D) => void;

class TRefElement

class TRefElement extends TextElement {}

property type

type: string;

method getText

getText: () => string;

class TSpanElement

class TSpanElement extends TextElement {}

constructor

constructor(document: Document, node: HTMLElement, captureTextNodes?: boolean);

property text

protected readonly text: string;

property type

type: string;

method getText

getText: () => string;

class UnknownElement

class UnknownElement extends Element {}

constructor

constructor(document: Document, node: HTMLElement, captureTextNodes?: boolean);

class UseElement

class UseElement extends RenderedElement {}

property element

readonly element: PathElement;

property type

type: string;

method elementTransform

elementTransform: () => Transform;

method getBoundingBox

getBoundingBox: (ctx: CanvasRenderingContext2D) => import('..').BoundingBox;

method path

path: (ctx: RenderingContext2D) => void;

method renderChildren

renderChildren: (ctx: RenderingContext2D) => void;

method setContext

setContext: (ctx: RenderingContext2D) => void;

class ViewPort

class ViewPort {}

property DEFAULT_VIEWPORT_HEIGHT

static DEFAULT_VIEWPORT_HEIGHT: number;

property DEFAULT_VIEWPORT_WIDTH

static DEFAULT_VIEWPORT_WIDTH: number;

property height

readonly height: number;

property viewPorts

viewPorts: IViewPortSize[];

property width

readonly width: number;

method clear

clear: () => void;

method computeSize

computeSize: (d?: number | Axis) => number;

method getCurrent

getCurrent: () => IViewPortSize;

method getRoot

getRoot: () => IViewPortSize;

method removeCurrent

removeCurrent: () => void;

method setCurrent

setCurrent: (width: number, height: number) => void;

Interfaces

interface IDocumentOptions

interface IDocumentOptions {}

property anonymousCrossOrigin

anonymousCrossOrigin?: boolean;

Load images anonymously.

property createCanvas

createCanvas?: CreateCanvas;

Function to create new canvas.

property createImage

createImage?: CreateImage;

Function to create new image.

property emSize

emSize?: number;

Default em size.

property rootEmSize

rootEmSize?: number;

Default rem size.

interface IEvent

interface IEvent {}

property type

type: string;

property x

x: number;

property y

y: number;

method run

run: (eventTarget: IEventTarget) => void;

interface IOptions

interface IOptions
    extends IParserOptions,
        IScreenOptions,
        IScreenStartOptions,
        IDocumentOptions {}

interface IParserOptions

interface IParserOptions {}

property DOMParser

DOMParser?: DOMParserConstructor;

XML/HTML parser from string into DOM Document.

property fetch

fetch?: Fetch;

WHATWG-compatible fetch function.

interface IScreenOptions

interface IScreenOptions {}

property fetch

fetch?: Fetch;

WHATWG-compatible fetch function.

property window

window?: Window | null;

Window object.

interface IScreenStartOptions

interface IScreenStartOptions {}

property enableRedraw

enableRedraw?: boolean;

Whether enable the redraw.

property ignoreAnimation

ignoreAnimation?: boolean;

Ignore animations.

property ignoreClear

ignoreClear?: boolean;

Does not clear canvas.

property ignoreDimensions

ignoreDimensions?: boolean;

Does not try to resize canvas.

property ignoreMouse

ignoreMouse?: boolean;

Ignore mouse events.

property offsetX

offsetX?: number;

Draws at a x offset.

property offsetY

offsetY?: number;

Draws at a y offset.

property scaleHeight

scaleHeight?: number;

Scales vertically to height.

property scaleWidth

scaleWidth?: number;

Scales horizontally to width.

method forceRedraw

forceRedraw: () => boolean;

Will call the function on every frame, if it returns true, will redraw.

interface IScreenViewBoxConfig

interface IScreenViewBoxConfig {}

property aspectRatio

aspectRatio: string;

property clip

clip?: boolean;

property clipX

clipX?: number;

property clipY

clipY?: number;

property ctx

ctx: RenderingContext2D;

property desiredHeight

desiredHeight: number;

property desiredWidth

desiredWidth: number;

property document

document: Document;

property height

height: number;

property minX

minX?: number;

property minY

minY?: number;

property refX

refX?: number;

property refY

refY?: number;

property width

width: number;

interface IViewPortSize

interface IViewPortSize {}

property height

height: number;

property width

width: number;

Type Aliases

type AnyElement

type AnyElement = Elements[keyof Elements];

type Axis

type Axis = 'x' | 'y';

type Command

type Command = {
    type: CommandType;
} & Omit<CommandM, 'type'> &
    Omit<CommandL, 'type'> &
    Omit<CommandH, 'type'> &
    Omit<CommandV, 'type'> &
    Omit<CommandZ, 'type'> &
    Omit<CommandQ, 'type'> &
    Omit<CommandT, 'type'> &
    Omit<CommandC, 'type'> &
    Omit<CommandS, 'type'> &
    Omit<CommandA, 'type'>;

type CommandType

type CommandType = SVGCommand['type'];

type CreateCanvas

type CreateCanvas = (
    width: number,
    height: number
) =>
    | HTMLCanvasElement
    | (OffscreenCanvas & {
          getContext(contextId: '2d'): OffscreenCanvasRenderingContext2D;
      });

Function to create new canvas.

type CreateImage

type CreateImage = (
    src: string,
    anonymousCrossOrigin?: boolean
) => Promise<CanvasImageSource>;

Function to create new image.

type Fetch

type Fetch = typeof fetch;

type IViewBoxConfig

type IViewBoxConfig = Omit<IScreenViewBoxConfig, 'document'>;

type MatrixValue

type MatrixValue = readonly [number, number, number, number, number, number];

type RenderingContext2D

type RenderingContext2D =
    | CanvasRenderingContext2D
    | OffscreenCanvasRenderingContext2D;

type VectorValue

type VectorValue = readonly [number, number];

Namespaces

namespace presets

module 'dist/presets/index.d.ts' {}

function node

node: ({ DOMParser, canvas, fetch }: IConfig) => {
    window: any;
    ignoreAnimation: boolean;
    ignoreMouse: boolean;
    DOMParser: DOMParser;
    fetch: Fetch;
    createCanvas: (width: number, height: number) => any;
    createImage: (src: string) => Promise<any>;
};

Options preset for node-canvas.
Parameter config
Preset requirements.
Parameter
config.DOMParser - XML/HTML parser from string into DOM Document.
Parameter
config.canvas - node-canvas exports.
Parameter
config.fetch - WHATWG-compatible fetch function.
Returns
Preset object.

function offscreen

offscreen: ({ DOMParser: DOMParserFallback }?: IConfig) => {
    window: any;
    ignoreAnimation: boolean;
    ignoreMouse: boolean;
    DOMParser: DOMParser;
    createCanvas(width: number, height: number): OffscreenCanvas;
    createImage(url: string): Promise<ImageBitmap>;
};

Options preset for OffscreenCanvas.
Parameter config
Preset requirements.
Parameter
config.DOMParser - XML/HTML parser from string into DOM Document.
Returns
Preset object.

Package Files (74)

Dependencies (5)

Dev Dependencies (0)

No dev dependencies.

Peer Dependencies (0)

No peer dependencies.

Badge

To add a badge like this oneto your package's README, use the codes available below.

You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/canvg.

Markdown

[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/canvg)

HTML

<a href="https://www.jsdocs.io/package/canvg"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>

Updated 1 second ago.
Package analyzed in 9331 ms.
Missing or incorrect documentation? Open an issue for this package.

canvg

Install

Overview

Index

Variables

Functions

Classes

Interfaces

Type Aliases

Namespaces

Variables

variable elements

variable PSEUDO_ZERO

Functions

function CB1

function CB2

function CB3

function CB4

function compressSpaces

Parameter str

Returns

function getSelectorSpecificity

Parameter selector

Returns

function normalizeAttributeName

Parameter name

Returns

function normalizeColor

Parameter color

Returns

function parseExternalUrl

Parameter url

Returns

function QB1

function QB2

function QB3

function toMatrixValue

Parameter str

Returns

function toNumbers

Parameter str

Returns

function trimLeft

Parameter str

Returns

function trimRight

Parameter str

Returns

function vectorMagnitude

Parameter v

Returns

function vectorsAngle

Parameter u

Parameter v

Returns

function vectorsRatio

Parameter u

Parameter v

Returns

Classes

class AElement

constructor

property hasText

property text

property type

method getText

method onClick

method onMouseMove

method renderChildren

class AnimateColorElement

property type

method calcValue

class AnimateElement

constructor

property begin

property duration

property from

property frozen

property initialUnits

property initialValue