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

SVG.js logo

SVG.js

[3.2]
Skip to Main Content

  * Home
  * Installation
  * Getting started
  * + Container Elements
      + SVG.Svg
      + SVG.G
      + SVG.Symbol
      + SVG.Defs
      + SVG.A
  * + Other Elements
      + General Handling of svg.js elements
      + SVG.Dom
      + SVG.Rect
      + SVG.Circle
      + SVG.Ellipse
      + SVG.Line
      + SVG.Polyline
      + SVG.Polygon
      + SVG.Path
      + SVG.Text
      + SVG.TextPath
      + SVG.Tspan
      + SVG.Image
      + SVG.Gradient
      + SVG.Stop
      + SVG.Pattern
      + SVG.Mask
      + SVG.ClipPath
      + SVG.Use
      + SVG.Marker
      + SVG.Style
      + SVG.ForeignObject
  * + Referencing / Creating Elements
      + Referencing using CSS selectors
      + Referencing existing DOM elements
      + Using jQuery or Zepto
      + Circular reference
      + Child references
      + Parent references
      + URI references
      + Creating Elements
  * + Manipulating
      + Attributes
      + Positioning
      + Resizing
      + Syntactic sugar
      + Transforming
      + Styles
      + Classes
      + Data
      + Memory
      + Document Tree
      + Arranging
      + Geometry
  * + Animating
      + Animate
      + SVG.Runner
      + Easing
      + SVG.Timeline
      + Controllers
      + Orchestrate Animations
  * + Events
      + Basic events
      + Event listeners
      + Custom events
  * + Classes
      + SVG.Box
      + SVG.List
      + SVG.Array
      + SVG.PointArray
      + SVG.PathArray
      + SVG.Color
      + SVG.Matrix
      + SVG.Number
      + SVG.Point
      + SVG.EventTarget
  * Importing / Exporting
  * + Extending
      + SVG.extend
      + Subclassing
  * Tutorials / Examples
  * + Plugins
      + svg.easing.js
      + svg.draggable.js
      + svg.filter.js
      + svg.topath.js
      + svg.topoly.js
      + svg.panzoom.js
      + ngx-svg
  * + Contributing
      + Coding Style
      + Documentation
  * Compatibility
  * + FAQ
      + Two SVG's are generated when I initialize SVG.js. Is that a
        bug?
      + Can SVG.js run on Node.js?
      + How can I modify an element that already exists in the dom?
      + I need help getting something to work...
      + I found a bug. Where do I report it?
      + Where can I find tutorials?
      + How do I contribute or fix something in the docs?
  * Acknowledgements & Thanks

SVG.js

The lightweight library for manipulating and animating SVG.

Star


Why choose SVG.js?

SVG.js has no dependencies and aims to be as small as possible while
providing close to complete coverage of the SVG spec. If you're not
convinced yet, here are a few highlights.


It's speedy.

SVG.js is fast. Obviously not as fast as vanilla js, but many times
faster than the competition:

Index:

  * rects: generate 10000 rects
  * fill: generate 10000 rects with fill color
  * gradient: generate 10000 rects with gradient fill

Less is better. Tested on an Intel Core i7-4702MQ @ 2.2GHz.


Easy readable, uncluttered syntax.

Creating and manipulating SVG using JavaScript alone is pretty
verbose. For example, just creating a simple pink square requires
quite a lot of code:

SVG.js provides a syntax that is concise and easy to read. Doing the
same as the vanilla js example above:

// SVG.js
var draw = SVG().addTo('#drawing')
  , rect = draw.rect(100, 100).fill('#f06')

That's just two lines of code instead of ten! And a whole lot less
repetition.


Go crazy with animations


There is more...

  * animations on size, position, transformations, color, ...
  * painless extension thanks to the modular structure
  * various useful plugins available
  * unified api between shape types with move, size, center, ...
  * binding events to elements
  * full support for opacity masks and clipping paths
  * text paths, even animated
  * element groups
  * dynamic gradients and patterns
  * fully documented (you're looking at it :)

License

SVG.js is licensed under the terms of the MIT License.

Changelog

Wondering what has changed in the latest releases? Have a look at the
change log.

SVG.js (c) 2012-2025 Wout Fierens - SVG.js is released under the terms
of the MIT license.

Fork me on GitHub