DOCSEARCHbyAlgolia
Submit Docs

SVG.js

website·Indexed 33 days ago

https://svgjs.dev/docs/3.2/

A lightweight JavaScript library for manipulating and animating SVG. Version 3.2 includes features for creating and manipulating SVG elements, attribute management, animation timelines, and support for Node.js. The ecosystem includes various plugins such as svg.draggable.js, svg.panzoom.js, svg.filter.js, and ngx-svg for Angular 2+.

Tokens
20.3K
Snippets
155
Records
172
Agent score
68%

What's inside SVG.js

  1. Overview of SVG.js

    SVG.js is a lightweight JavaScript library designed for manipulating and animating SVG. It has no dependencies and aims to provide comprehensive coverage of the SVG specification while maintaining a small footprint.

  3. Make SVG elements draggable using svg.draggable.js

    The svg.draggable.js plugin provides functionality to make SVG elements draggable within the browser.
    # Install via npm (implied by plugin structure) 
npm install @svgjs/draggable

  4. Ensure SVG.js browser compatibility

    SVG.js is transpiled to support most modern browsers. The default target is defined by the browserlist query: last 1 version or > 0.25% or not maintained node versions or not dead. While JavaScript syntax is transpiled, missing browser APIs are not automatically added. Developers must configure their own build's syntax transforms and provide additional polyfills for older target browsers.

  6. Convert SVG shapes to paths using svg.topath.js

    The svg.topath.js plugin provides functionality to convert any SVG shape element into a path element. This is useful for animations or manipulations that require the flexibility of path data.
    # Install via npm
npm install svg.topath.js

  7. Extend SVG.js animation easing methods with svg.easing.js

    The svg.easing.js plugin provides a wider variety of easing methods for animations within the SVG.js ecosystem. It can be integrated into projects to allow for more complex and natural movement patterns beyond the default easing options.

  8. Integrate SVG.js with Angular using ngx-svg

    ngx-svg is a library designed for Angular 2+ that provides a wrapper to easily integrate and use the SVG.js library within Angular applications.

  9. Create and add HTML elements using foreignObject()

    The foreignObject() constructor on an SVG.Container allows you to embed elements from non-SVG namespaces (primarily HTML) within an SVG. To ensure HTML elements are created in the correct HTML namespace, pass true as the second parameter to the SVG() function when adding them to the foreign object.
    var foreignObject = draw.foreignObject(width, height)

// Pass true as second parameter to SVG() to create an element in the html-namespace
foreignObject.add(SVG('<input type="text">', true))

  10. Animate transforms with absolute or relative modes

    The Runner.transform() method supports two interpolation modes and can apply targets absolutely or relatively.

    • Absolute (Default): Replaces the previous transform at the endpoint.
    • Relative: Composes the animated transform with the element's current transform. The baseline is read when the runner starts.
    • Affine Interpolation: Decomposes transforms into translation, scale, shear, rotation, and origin. This is the default for transform objects. Use a SVG.Matrix for direct component interpolation.
    // Absolute transform
rect.animate(1000).transform({ rotate: 90, scale: 2 })

// Relative transform (using second argument true)
rect.animate(1000).transform({ translate: [100, 0] }, true)

// Relative transform helpers (shorthand)
rect.animate(1000).translate(100, 0).rotate(90).scale(2)

// Matrix interpolation with affine forced (third argument true)
const target = new SVG.Matrix().rotate(90)
rect.animate(1000).transform(target, false, true)

  11. Adopt an existing DOM element into SVG.js

    You can wrap an existing native DOM element with SVG() to allow SVG.js to manage it and provide access to the SVG.js API.
    var polygon = document.createElementNS('http://www.w3.org/2000/svg', 'polygon')
var element = SVG(polygon)
element.fill('#f06')

  12. Build the SVG.js library from source

    To build the SVG.js library, ensure Node.js is installed, navigate to the svg.js directory, install dependencies, and run the rollup build script. The compiled files will be generated in the dist folder.
    npm install
npm run build