DOCSEARCHbyAlgolia
Submit Docs

Canvg

website·Indexed 30 days ago

https://canvg.js.org

An SVG renderer on canvas. The library provides tools to convert SVG to PNG and render SVG elements onto a canvas, with support for browser environments, Node.js, Web Workers, and OffscreenCanvas. Includes a comprehensive API for handling SVG elements, transforms, and document options, with migration guidance for v4.

Tokens
62.3K
Snippets
613
Records
756
Agent score
62%

What's inside Canvg

  1. PathElement Class Hierarchy

    PathElement inherits from RenderedElement. It serves as the parent class for several specialized shape elements, including:

    • RectElement
    • CircleElement
    • EllipseElement
    • LineElement
    • PolylineElement
    • GlyphElement

  2. AnimateElement class overview

    The AnimateElement class is used to represent animation elements within a document. It inherits from the Element class and serves as the base class for more specific animation types such as AnimateColorElement and AnimateTransformElement.

  3. AnimateTransformElement class overview

    The AnimateTransformElement class is used to handle transform animations in canvg. It inherits from AnimateElement, which in turn inherits from Element. It provides specialized logic for calculating animation values specifically for transformations.

  4. AnimateColorElement class overview

    The AnimateColorElement class is responsible for handling color animations within a document. It inherits from AnimateElement and is defined in src/Document/AnimateColorElement.ts.

  6. Iterate through SVG path commands using PathParser

    Use the next() method to retrieve the next command in the path sequence and isEnd() to determine when the end of the path data has been reached. The reset() method can be used to restart the iteration.
    const parser = new PathParser(pathString);
parser.reset();
while (!parser.isEnd()) {
  const command = parser.next();
  // Process command
}

  7. Update canvg imports for v4

    In canvg v4, the default export has been removed and renamed to a named export Canvg. Update your import statements to use the named export syntax.
    // v3 (Deprecated)
import Canvg, { presets } from 'canvg';

// v4 (Current)
import { Canvg, presets } from 'canvg';

  8. Install canvg via npm

    canvg is a JavaScript SVG parser and renderer that allows you to render SVG files (via URL or text) onto a Canvas element or rasterize SVG images. It can be installed using pnpm, yarn, or npm.
    pnpm add canvg

  9. TextPathElement constructor parameters

    The TextPathElement constructor accepts the following parameters:

    • document (Document): The document instance associated with the element.
    • node (HTMLElement): The DOM element being processed.
    • captureTextNodes (boolean, optional): Whether to capture text nodes.

  10. Configure document and canvas rendering options in IOptions

    Use these properties within the IOptions object to control how the SVG document is parsed and rendered to the canvas:
    const options = {
  rootEmSize: 16,            // Default rem size (number)
  emSize: 16,               // Default em size (number)
  createCanvas: (width, height) => document.createElement('canvas'), // Custom canvas creation function
  createImage: (src) => new Image(), // Custom image creation function
  anonymousCrossOrigin: true, // Load images anonymously (boolean)
};

  11. Configure anonymous cross-origin image loading in IDocumentOptions

    Set the anonymousCrossOrigin property to true in IDocumentOptions to load images anonymously, which is typically required to avoid CORS issues when manipulating images on a canvas.
    const options: IDocumentOptions = {
  anonymousCrossOrigin: true
};

  12. Configure screen start and canvas scaling in IOptions

    Control the initial state and scaling of the canvas using these properties in the IOptions object:
    const options = {
  enableRedraw: true,      // Enable redraw (boolean)
  ignoreMouse: false,       // Ignore mouse events (boolean)
  ignoreAnimation: false,   // Ignore animations (boolean)
  ignoreDimensions: false,  // If true, does not try to resize canvas (boolean)
  ignoreClear: false,       // If true, does not clear canvas (boolean)
  scaleWidth: 800,          // Scale horizontally to this width (number)
  scaleHeight: 600,        // Scale vertically to this height (number)
  offsetX: 0,               // X offset for drawing (number)
  offsetY: 0,               // Y offset for drawing (number)
};