# svgdotjs/svg.js

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/svgdotjs-svg-js).**

11,796 stars · 1,079 forks · JavaScript · NOASSERTION

## Links

- GitHub: https://github.com/svgdotjs/svg.js
- Homepage: https://svgjs.dev
- awesome-repositories: https://awesome-repositories.com/repository/svgdotjs-svg-js.md

## Topics

`animation` `javascript` `svg` `svgjs`

## Description

svg.js is a JavaScript library and toolkit for programmatically creating, modifying, and querying Scalable Vector Graphics in the browser. It functions as a programmable interface and DOM wrapper that allows developers to manipulate vector elements through a standardized API rather than writing raw XML.

The library includes a dedicated animation framework for creating fluid motion and visual transitions. This is supported by tools for path morphing and the use of timelines and easing functions to animate vector graphics.

The toolkit covers a broad range of capabilities, including geometric transformations, bounding box calculations, and the management of element styles and sets. It also provides utilities for querying elements via selectors, handling user events, and processing text and paths.

## Tags

### Graphics & Multimedia

- [Dynamic SVG Manipulation](https://awesome-repositories.com/f/graphics-multimedia/dynamic-svg-manipulation.md) — Offers a comprehensive API for programmatically creating and modifying SVG elements without writing raw XML. ([source](https://github.com/svgdotjs/svg.js/blob/master/package.json))
- [Vector Animation Libraries](https://awesome-repositories.com/f/graphics-multimedia/animation-motion/vector-animation-libraries.md) — Includes a dedicated framework for animating SVG paths, strokes, and coordinates using timelines and easing functions.
- [Dynamic Vector Graphics](https://awesome-repositories.com/f/graphics-multimedia/graphics-and-media/dynamic-vector-graphics.md) — Enables programmatic manipulation and animation of vector-based visual elements for interactive graphics. ([source](https://github.com/svgdotjs/svg.js/blob/master/package.json))
- [2D Vector Transformations](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/coordinate-viewport-transformations/matrix-transformation-engines/2d-vector-transformations.md) — Uses matrix-based calculations for rotations, scaling, and translations of SVG elements.
- [SVG Generators](https://awesome-repositories.com/f/graphics-multimedia/media-production-suites/graphics-media-assets/creative-and-cultural-media/generative-media-tools/svg-generators.md) — Generates vector shapes and containers by translating simplified JavaScript inputs into SVG markup. ([source](https://github.com/svgdotjs/svg.js/blob/master/CHANGELOG.md))
- [SVG Element Generators](https://awesome-repositories.com/f/graphics-multimedia/svg-element-generators.md) — Provides constructors that translate simple JavaScript input objects into standard SVG XML markup.
- [SVG Wrapper Interfaces](https://awesome-repositories.com/f/graphics-multimedia/svg-wrapper-interfaces.md) — Wraps existing vector elements into a programmable interface to manipulate them using a standardized set of commands. ([source](https://github.com/svgdotjs/svg.js/blob/master/CHANGELOG.md))
- [Path Morphing](https://awesome-repositories.com/f/graphics-multimedia/path-morphing.md) — Calculates intermediate point arrays between vector shapes to create fluid visual transitions during animations.
- [SVG Text and Path Processing](https://awesome-repositories.com/f/graphics-multimedia/svg-text-and-path-processing.md) — Calculates text lengths and maps characters to specific vector paths using point arrays and segments. ([source](https://github.com/svgdotjs/svg.js/blob/master/CHANGELOG.md))
- [Vector Bounding Box Calculations](https://awesome-repositories.com/f/graphics-multimedia/vector-bounding-box-calculations.md) — Retrieves the exact dimensions and screen positions of individual elements or groups of vector shapes. ([source](https://github.com/svgdotjs/svg.js/blob/master/CHANGELOG.md))

### Web Development

- [DOM Manipulation](https://awesome-repositories.com/f/web-development/dom-manipulation.md) — Provides a programmable DOM wrapper interface for the dynamic manipulation of SVG elements and attributes.

### Part of an Awesome List

- [SVG Libraries](https://awesome-repositories.com/f/awesome-lists/devtools/svg-libraries.md) — Serves as a comprehensive JavaScript library for programmatically creating, modifying, and querying SVG elements.
- [SVG Animation Libraries](https://awesome-repositories.com/f/awesome-lists/devtools/svg-animation-libraries.md) — Lightweight library for SVG manipulation and animation.

### User Interface & Experience

- [CSS Styling](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/styling-systems/class-based-styling/css-styling.md) — Controls the visual appearance of vector graphics using CSS classes, style tags, and color space management. ([source](https://github.com/svgdotjs/svg.js/blob/master/CHANGELOG.md))
- [Transformation Matrix Scaling](https://awesome-repositories.com/f/user-interface-experience/transformation-matrix-scaling.md) — Applies matrix-based rotations, scaling, and translations to SVG elements and coordinate arrays. ([source](https://github.com/svgdotjs/svg.js/blob/master/CHANGELOG.md))
- [Animation Easing Functions](https://awesome-repositories.com/f/user-interface-experience/animation-and-motion-systems/configuration-utility-helpers/animation-configuration/animation-easing-functions.md) — Implements mathematical easing functions to control the acceleration and deceleration of vector animations.

### Data & Databases

- [Interactive Visualization Rendering](https://awesome-repositories.com/f/data-databases/interactive-visualization-rendering.md) — Enables the rendering of dynamic charts and graphs that update in response to user input and real-time data.

### Scientific & Mathematical Computing

- [Vector Geometry Calculations](https://awesome-repositories.com/f/scientific-mathematical-computing/vector-geometry-calculations.md) — Provides specialized utilities for calculating bounding boxes and performing geometric transformations within SVG coordinates.