SVG.js

https://svgjs.dev/docs/3.2
Admin
SVG.js is a lightweight, dependency-free JavaScript library for manipulating and animating SVG,...
Tokens:77,343
Snippets:873
Trust Score:7.7
Update:4 months ago
Show doc for...
Tokens:
Raw
### Basic SVG.js Setup and Drawing

Source: https://svgjs.dev/docs/3.2/getting-started

A simple example to get started: initialize SVG.js and draw a pink square on the body.

```javascript
// initialize SVG.js
var draw = SVG().addTo('body')

// draw pink square
draw.rect(100, 100).move(100, 50).fill('#f06')
```

--------------------------------

### Draw Rect and Set Style

Source: https://svgjs.dev/docs/3.2/shape-elements

A complete example showing the setup of the drawing canvas, creation of a rect, and applying fill and move transformations.

```javascript
var draw = SVG().addTo('body').size(300, 130)

var rect = draw.rect(100, 100).fill('#f06').move(20, 20)
```

--------------------------------

### Install Dependencies

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

Installs project dependencies using npm. Ensure Node.js is installed and you are in the svg.js directory.

```bash
$ npm install
```

--------------------------------

### SVG.PathArray Syntax Examples

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

Provides examples of SVG.js syntax for various path commands within SVG.PathArray.

```javascript
['M',0,0]
```

```javascript
['m',0,0]
```

```javascript
['L',100,100]
```

```javascript
['l',100,100]
```

```javascript
['H',200]
```

```javascript
['h',200]
```

```javascript
['V',300]
```

```javascript
['v',300]
```

```javascript
['C',20,20,40,20,50,10]
```

```javascript
['c',20,20,40,20,50,10]
```

```javascript
['S',40,20,50,10]
```

```javascript
['s',40,20,50,10]
```

```javascript
['Q',20,20,50,10]
```

```javascript
['q',20,20,50,10]
```

```javascript
['T',50,10]
```

```javascript
['t',50,10]
```

```javascript
['A',30,50,0,0,1,162,163]
```

```javascript
['a',30,50,0,0,1,162,163]
```

```javascript
['Z']
```

```javascript
['z']
```

--------------------------------

### Instantiating SVG.PointArray

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

Example of precompiling points into an SVG.PointArray instance.

```javascript
new SVG.PointArray([
  [0, 0]
, [100, 100]
])
```

--------------------------------

### Instantiating SVG.PathArray

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

Example of precompiling path segments into an SVG.PathArray instance.

```javascript
new SVG.PathArray([
  ['M', 0, 0]
, ['L', 100, 100]
, ['z']
])
```

--------------------------------

### Avoid Declaring Variables Individually

Source: https://svgjs.dev/docs/3.2/contributing/coding-style

This example shows the discouraged practice of declaring each variable on a new line with an immediate assignment. Declare variables collectively at the start.

```javascript
function reading_board() {
  var aap  = 1
  var noot = 2
  var mies = aap + noot
}
```

--------------------------------

### Install SVG.js with npm

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

Use npm to add SVG.js to your project dependencies.

```bash
npm install @svgdotjs/svg.js
```

--------------------------------

### Install SVG.js with Yarn

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

Use Yarn to add SVG.js to your project dependencies.

```bash
yarn add @svgdotjs/svg.js
```

--------------------------------

### SVG.Color Constructor Examples

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

Shows various ways to instantiate an SVG.Color object using different color formats.

```javascript
new SVG.Color('#f06')
```

```javascript
new SVG.Color('rgb(255, 0, 102)')
```

```javascript
new SVG.Color({ r: 255, g: 0, b: 102 })
```

```javascript
new SVG.Color({ x: 255, y: 0, z: 102 })
```

```javascript
new SVG.Color({ h: 255, s: 0, l: 102 })
```

```javascript
new SVG.Color({ l: 255, a: 0, b: 102 })
```

```javascript
new SVG.Color({ l: 255, c: 0, h: 102 })
```

```javascript
new SVG.Color({ c: 255, m: 0, y: 102, k:0 })
```

```javascript
new SVG.Color(255, 0, 102, 'rgb')
```

--------------------------------

### Run Test Suite (Command Line)

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

Executes the test suite from the command line. Requires Firefox to be installed.

```bash
$ npm test
```

--------------------------------

### viewbox()

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

Gets or sets the viewbox of an element.

```APIDOC
## viewbox()

### Description
Gets or sets the viewbox of an element. This is only available on elements which support viewbox.

### Method
Not specified (likely a method call on an SVG element)

### Parameters
_Setter_
- **x** (number | string | SVG.Box) - The x-coordinate, or a string 'x y width height', or an SVG.Box object.
- **y** (number, optional) - The y-coordinate (only if x is a number).
- **width** (number, optional) - The width (only if x is a number).
- **height** (number, optional) - The height (only if x is a number).

### Returns
_Getter_
- **SVG.Box**: The current viewbox.

### Examples
_Setter_
```javascript
drawing.viewbox(10, 10, 500, 600)
// or
drawing.viewbox('10 10 500 600')
// or
drawing.viewbox(box)
```

_Getter_
```javascript
drawing.viewbox()
```
```

--------------------------------

### Create Line Element

Source: https://svgjs.dev/docs/3.2/shape-elements

Demonstrates creating a Line element by specifying the start and end coordinates.

```javascript
var line = draw.line(0, 0, 100, 150).stroke({ width: 1 })
```

--------------------------------

### Draw Circle and Set Style

Source: https://svgjs.dev/docs/3.2/shape-elements

An example of setting up the drawing canvas, creating a circle, and applying fill and move styles.

```javascript
var draw = SVG().addTo('body').size(300, 130)

var rect = draw.circle(100).fill('#f06').move(20, 20)
```

--------------------------------

### Example: Checkered Pattern on Rectangle

Source: https://svgjs.dev/docs/3.2/shape-elements

Demonstrates creating a checkered pattern and applying it to a rectangle. Includes interactive mouseover/mouseout effects.

```javascript
var draw = SVG().addTo('body').size(500, 130)

var pattern = draw.pattern(20, 20, function(add) {
  add.rect(20,20).fill('#f06')
  add.rect(10,10).fill('#0f9')
  add.rect(10,10).move(10,10).fill('#fff')
})

draw.rect(100, 100).move(20, 20).radius(10).fill(pattern)
```

--------------------------------

### Interactive Clipping Path Example

Source: https://svgjs.dev/docs/3.2/shape-elements

Demonstrates creating a complex clipping path with multiple circles and applying it to a rectangle. Includes event listeners for hover effects.

```javascript
var draw = SVG().addTo('body').size(300, 130)
var circle = draw.circle(50).fill('#fff')

var clip = draw.clip()
clip.add(circle.center(35, 35))
clip.add(circle.clone().center(70, 70).size(70).fill('#ccc'))
clip.add(circle.clone().center(90, 30).size(30).fill('#999'))
clip.add(circle.clone().center(105, 115).size(50).fill('#333'))

var rect = draw.rect(100, 100).move(20, 20).fill('#f06')
rect.clipWith(clip)

rect.on('mouseover', function() {
	this.animate(300, '<>').fill('#0f9')
})
rect.on('mouseout', function() {
	this.animate(300, '<>').fill('#f06')
})
```

--------------------------------

### Start Game on Click and Reset Functionality

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

Allows the game to start by clicking anywhere on the SVG canvas, initiating the ball's movement. The reset function is called when a point is scored, repositioning elements and stopping the ball.

```javascript
draw.on('click', function() {
  if(vx === 0 && vy === 0) {
    vx = Math.random() * 500 - 150
    vy = Math.random() * 500 - 150
  }
})

function reset() {
  // visualize boom
  boom()
  
  // reset speed values
  vx = 0
  vy = 0

  // position the ball back in the middle
  ball.animate(100).center(width/2, height/2)

  // reset the position of the paddles
  paddleLeft.animate(100).cy(height/2)
  paddleRight.animate(100).cy(height/2)
}
```

--------------------------------

### Getting Bounding Box of SVG.PointArray

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

Demonstrates how to get the bounding box of the geometry represented by an SVG.PointArray.

```javascript
array.bbox()
```

--------------------------------

### Basic Animation with animate()

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

Initiates an animation on an element. Use this to start a simple animation sequence.

```javascript
rect.animate().move(150, 150)
```

--------------------------------

### Example: Mask with Multiple Shapes

Source: https://svgjs.dev/docs/3.2/shape-elements

Demonstrates creating a mask with multiple shapes (circles of varying sizes and opacities) and applying it to a rectangle. Includes hover effects.

```javascript
var draw = SVG().addTo('body').size(300, 130)
var circle = draw.circle(50).fill('#fff')

var mask = draw.mask()
mask.add(circle.center(35, 35))
mask.add(circle.clone().center(70, 70).size(70).fill('#ccc'))
mask.add(circle.clone().center(90, 30).size(30).fill('#999'))
mask.add(circle.clone().center(105, 115).size(50).fill('#333'))

var rect = draw.rect(100, 100).move(20, 20).fill('#f06')
rect.maskWith(mask)

rect.on('mouseover', function() {
	this.animate(300, '<>').fill('#0f9')
})
rect.on('mouseout', function() {
	this.animate(300, '<>').fill('#f06')
})
```

--------------------------------

### Get Pattern URL

Source: https://svgjs.dev/docs/3.2/shape-elements

Returns the URL string for a pattern, used for referencing it.

```javascript
pattern.url()
```

--------------------------------

### Draw Ellipse and Set Style

Source: https://svgjs.dev/docs/3.2/shape-elements

An example of creating an ellipse with specified dimensions, fill, and position.

```javascript
var draw = SVG('drawing').size(300, 130)

var ellipse = draw.ellipse(150, 100).fill('#f06').move(20, 20)
```

--------------------------------

### Avoid Code Compression

Source: https://svgjs.dev/docs/3.2/contributing/coding-style

This example illustrates the discouraged practice of compressing code with minimal whitespace and no newlines. Prioritize readability over conciseness.

```javascript
var nest=draw.nested().attr({x:10,y:20,width:200,height:300});
for(var i=0;i<5;i++)nest.circle(100);
```

--------------------------------

### Draw Line and Set Style

Source: https://svgjs.dev/docs/3.2/shape-elements

An example of drawing a line with specified coordinates, applying a move transformation, and styling its stroke.

```javascript
var draw = SVG().addTo('body').size(300, 130)

var line = draw.line(0, 100, 100, 0).move(20, 20)
line.stroke({ color: '#f06', width: 10, linecap: 'round' })
```

--------------------------------

### Initialize SVG Document and Game Elements

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

Sets up the SVG drawing area and creates the initial game elements including the background, paddles, ball, and score display. This code is essential for starting the game.

```javascript
// define document width and height
var width = 450, height = 300

// create SVG document and set its size
var draw = SVG('pong').size(width, height)
draw.viewbox(0,0,450,300)


// draw background
var background = draw.rect(width, height).fill('#dde3e1')

// draw line
var line = draw.line(width/2, 0, width/2, height)
line.stroke({ width: 5, color: '#fff', dasharray: '5,5' })


// define paddle width and height
var paddleWidth = 15, paddleHeight = 80

// create and position left paddle
var paddleLeft = draw.rect(paddleWidth, paddleHeight)
paddleLeft.x(0).cy(height/2).fill('#00ff99')

// create and position right paddle
var paddleRight = paddleLeft.clone()
paddleRight.x(width-paddleWidth).fill('#ff0066')


// define ball size
var ballSize = 10

// create ball
var ball = draw.circle(ballSize)
ball.center(width/2, height/2).fill('#7f7f7f')


// define inital player score
var playerLeft = playerRight = 0

// create text for the score, set font properties
var scoreLeft = draw.text(playerLeft+'').font({
  size: 32,
  family: 'Menlo, sans-serif',
  anchor: 'end',
  fill: '#fff'
}).move(width/2-10, 10)

// cloning rocks!
var scoreRight = scoreLeft.clone()
  .text(playerRight+'')
  .font('anchor', 'start')
  .x(width/2+10)
```

--------------------------------

### SVG.PathArray String Representation

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

Example of the string format for a path array.

```javascript
'M0 0L100 100z'
```

--------------------------------

### SVG() Function Usage Examples

Source: https://svgjs.dev/docs/3.2/getting-started

Demonstrates various ways to use the SVG() function: creating new documents, selecting existing DOM elements, and creating objects from SVG fragments.

```javascript
// new document
var draw = SVG()

// get rect from dom
var rect = SVG('#myRectId')
// or
var rect = SVG('rect')
// any css selector will do
var path = SVG('#group1 path.myClass')

// create new object from fragment
var circle = SVG('<circle>')

// convert node to svg.js object
var obj = SVG(node)
```

--------------------------------

### Initialize SVG.Matrix without arguments

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

Creates a new SVG.Matrix instance with default values. Use toString() to get the matrix string representation.

```javascript
var matrix = new SVG.Matrix
matrix.toString() //-> returns matrix(1,0,0,1,0,0)
```

--------------------------------

### SVG.Color to RGB String

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

Example of converting an SVG.Color instance to its RGB string representation.

```javascript
color.toRgb()
```

--------------------------------

### Create and Apply Linear and Radial Gradients

Source: https://svgjs.dev/docs/3.2/shape-elements

Demonstrates the creation and application of both linear and radial gradients to rectangle elements. Includes setup for the SVG drawing context.

```javascript
var draw = SVG().addTo('body').size(500, 130)

var linear = draw.gradient('linear', function(add) {
  add.stop(0, '#f06')
  add.stop(1, '#0f9')
})

draw.rect(100, 100).move(20, 20).radius(10).fill(linear)

var radial = draw.gradient('radial', function(add) {
	add.stop(0, '#0f9')
  add.stop(1, '#f06')
})

draw.rect(100, 100).move(140, 20).radius(10).fill(radial)
```

--------------------------------

### Avoid Multi-Line Block Comments

Source: https://svgjs.dev/docs/3.2/contributing/coding-style

This example shows the discouraged use of multi-line block comments (/* ... */) for explanations. Prefer concise single-line comments.

```javascript
/*
 * 
 * does something with orange and opacity
 * 
 */
SVG.extend(SVG.Rect, {
  orgf: function() {
    return this.fill('orange').opacity(0.85)
  }
})
```

--------------------------------

### SVG.Color to Hexadecimal String

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

Example of converting an SVG.Color instance to its hexadecimal string representation.

```javascript
color.toHex()
```

--------------------------------

### SVG.Matrix Constructor and Basic Usage

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

Demonstrates how to initialize an SVG.Matrix instance with different types of arguments and convert it to a string representation.

```APIDOC
## SVG.Matrix Constructor

### Description
Initializes a new SVG.Matrix instance. It can accept various forms of input to define the matrix values.

### Usage

**Without a value:**
```javascript
var matrix = new SVG.Matrix()
matrix.toString() //-> returns matrix(1,0,0,1,0,0)
```

**Six arguments:**
```javascript
var matrix = new SVG.Matrix(1, 0, 0, 1, 100, 150)
matrix.toString() //-> returns matrix(1,0,0,1,100,150)
```

**A string value:**
```javascript
var matrix = new SVG.Matrix('1,0,0,1,100,150')
matrix.toString() //-> returns matrix(1,0,0,1,100,150)
```

**An object value:**
```javascript
var matrix = new SVG.Matrix({ a: 1, b: 0, c: 0, d: 1, e: 100, f: 150 })
matrix.toString() //-> returns matrix(1,0,0,1,100,150)
```

**Transformation object:**
```javascript
var matrix = new SVG.Matrix({ translate: [20, 20] })
```

**A native `SVGMatrix`:**
```javascript
var svgMatrix = svgElement.getCTM()
var matrix = new SVG.Matrix(svgMatrix)
matrix.toString() //-> returns matrix(1,0,0,1,0,0)
```

**An instance of `SVG.Element`:**
```javascript
var rect = draw.rect(50, 25)
var matrix = new SVG.Matrix(rect)
matrix.toString() //-> returns matrix(1,0,0,1,0,0)
```
```

--------------------------------

### Get the Parent Element

Source: https://svgjs.dev/docs/3.2/referencing-creating-elements

Navigate up the SVG.js element tree to get the direct parent element using the parent() method. Returns an SVG.Element instance.

```javascript
element.parent()
```

--------------------------------

### Get Child Element by Index

Source: https://svgjs.dev/docs/3.2/referencing-creating-elements

Access a specific child element of a parent SVG.js element by its index in the children array using the get() method. Returns an SVG.Element instance.

```javascript
var rect   = draw.rect(20, 30)
var circle = draw.circle(50)

draw.get(0) //-> returns rect
draw.get(1) //-> returns circle
```

--------------------------------

### Animating with Duration, Delay, and When

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

Animate an element with specified duration, delay, and timing. The 'when' parameter controls when the animation starts.

```javascript
rect.animate(2000, 1000, 'now').attr({ fill: '#f03' })
```

--------------------------------

### Create SVG.Point instances

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

Demonstrates various ways to instantiate an SVG.Point object using different input formats for coordinates.

```javascript
var vector1 = new SVG.Point(1)
var vector2 = new SVG.Point(1,1)
var vector3 = new SVG.Point([1,1])
var vector4 = new SVG.Point({x:1,y:1})
var vector5 = new SVG.Point(new SVG.Point(1,1))
```

--------------------------------

### zoom()

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

Gets or sets the zoom level of an element.

```APIDOC
## zoom()

### Description
Gets or sets the zoom level of an element. This is only available on elements which support viewbox. Make sure to also set an absolute width and height for best results.

### Method
Not specified (likely a method call on an SVG element)

### Parameters
_Setter_
- **level** (number) - The zoom level.
- **point** (object, optional) - An object with `x` and `y` properties to zoom into.

### Returns
_Getter_
- **number**: The current zoom level.

### Examples
_Setter_
```javascript
// zooms to level 10
drawing.zoom(10)

// zooms into the point {x: 20, y: 20}
drawing.zoom(10, {x: 20, y: 20})
```

_Getter_
```javascript
drawing.zoom()
```

**Note**: For wheel and pinch zoom support, have a look at svg.panzoom.js
```

--------------------------------

### Get SVG.TextPath Node

Source: https://svgjs.dev/docs/3.2/shape-elements

Retrieve the SVG.TextPath node for further manipulation.

```javascript
var textPath = text.textPath()
```

--------------------------------

### siblings()

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

Gets all sibling elements of the current element, including itself.

```APIDOC
## siblings()

### Description
Gets all sibling elements of the current element, including itself.

### Method
Not specified (likely a method call on an SVG element)

### Returns
- **array**: An array containing all sibling elements.

### Examples
```javascript
rect.siblings()
```
```

--------------------------------

### prev()

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

Gets the previous sibling element in the SVG structure.

```APIDOC
## prev()

### Description
Gets the previous sibling element in the SVG structure.

### Method
Not specified (likely a method call on an SVG element)

### Returns
- **SVG.Element**: The previous sibling element.

### Examples
```javascript
rect.prev()
```
```

--------------------------------

### Avoid Double Quotes and Semicolons

Source: https://svgjs.dev/docs/3.2/contributing/coding-style

This example demonstrates the discouraged practice of using double quotes for strings and including semicolons. Adhere to the single quote and no-semicolon convention.

```javascript
var text = draw.text("with double quotes here");
var nest = draw.nested().attr("x", "50%");

for (var i = 0; i < 5; i++) {
  if (i != 3) {
    nest.circle(100);
  };
};
```

--------------------------------

### next()

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

Gets the next sibling element in the SVG structure.

```APIDOC
## next()

### Description
Gets the next sibling element in the SVG structure.

### Method
Not specified (likely a method call on an SVG element)

### Returns
- **SVG.Element**: The next sibling element.

### Examples
```javascript
rect.next()
```
```

--------------------------------

### SVG.Number Constructor and Basic Usage

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

Explains how to create an SVG.Number instance and perform basic operations like addition and conversion to a numerical value.

```APIDOC
## SVG.Number Constructor

### Description
Numbers in SVG.js have a dedicated number class to be able to process string values. Creating a new number is simple.

### Usage
```javascript
var number = new SVG.Number('78%')
number.plus('3%').toString() //-> returns '81%'
number.valueOf() //-> returns 0.81
```
Operators are defined as methods on the `SVG.Number` instance.
```

--------------------------------

### Get All Siblings

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

Retrieves an array containing the element itself and all its siblings.

```javascript
rect.siblings()
```

--------------------------------

### SVG.Color Morphing and Interpolation

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

Shows how to morph a color to another and get intermediate colors using the 'to' and 'at' methods.

```javascript
var color = new SVG.Color('#ff0066').to('#000')
color.at(0.5).toHex()
```

--------------------------------

### Create Rect with Attributes

Source: https://svgjs.dev/docs/3.2/shape-elements

Shows how to set attributes like width and height directly during the construction of a Rect element.

```javascript
var rect = new Rect({width: 100, height: 100}).addTo(draw)
// or
var rect = draw.rect({width: 100, height: 100})
```

--------------------------------

### position()

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

Gets the position (index) of the current element among its siblings.

```APIDOC
## position()

### Description
Gets the position (index) of the current element among its siblings.

### Method
Not specified (likely a method call on an SVG element)

### Returns
- **number**: The position of the element among its siblings.

### Examples
```javascript
rect.position()
```
```

--------------------------------

### Get All Transformations

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

Retrieves all current transformation values of an element as an object.

```javascript
element.transform()
```

--------------------------------

### Get Rectangle Height

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

Retrieves the current height of a rectangle element.

```javascript
rect.height()
```

--------------------------------

### Initialize SVG.Matrix with six arguments

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

Creates a new SVG.Matrix instance using six explicit numerical arguments. The toString() method returns the matrix in a string format.

```javascript
var matrix = new SVG.Matrix(1, 0, 0, 1, 100, 150)
matrix.toString() //-> returns matrix(1,0,0,1,100,150)
```

--------------------------------

### Get Rectangle Width

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

Retrieves the current width of a rectangle element.

```javascript
var width = rect.width()
```

--------------------------------

### Render and Style an SVG Path

Source: https://svgjs.dev/docs/3.2/shape-elements

This snippet demonstrates creating a path, setting its fill to none, and applying stroke properties. It also includes a move transformation.

```javascript
var draw = SVG().addTo('body').size(300, 130)

var path = draw.path('M0 0 H50 A20 20 0 1 0 100 50 v25 C50 125 0 85 0 85 z')
path.fill('none').move(20, 20)
path.stroke({ color: '#f06', width: 4, linecap: 'round', linejoin: 'round' })
```

--------------------------------

### node.instance

Source: https://svgjs.dev/docs/3.2/referencing-creating-elements

Provides a reference to the SVG.js instance associated with a native SVGElement.

```APIDOC
## instance

### Description
Similarly, the `node` carries a reference to the SVG.js `instance`.

### Returns
`SVG.Element`

### Example
```javascript
node.instance
```
```

--------------------------------

### Get Gradient URL

Source: https://svgjs.dev/docs/3.2/shape-elements

Returns the URL string for a gradient, used for referencing it.

```javascript
gradient.url()
```

--------------------------------

### SVG.Color Space Conversion Methods

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

Demonstrates methods for converting colors between different color spaces.

```javascript
color.rgb()
```

```javascript
color.xyz()
```

```javascript
color.hsl()
```

```javascript
color.lab()
```

```javascript
color.lch()
```

```javascript
color.cmyk()
```

--------------------------------

### Make Pre-push Hook Executable

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

Makes the pre-push hook script executable. Place this script in the .git/hooks/ folder of your local SVG.js repository.

```bash
sudo chmod +x .git/hooks/pre-push
```

--------------------------------

### gradient.from().to()

Source: https://svgjs.dev/docs/3.2/shape-elements

Defines the direction of the gradient by specifying the start and end points.

```APIDOC
## gradient.from().to()

### Description
Defines the direction of the gradient by specifying the start and end points. The values are expressed in percentages.

### Method
GET

### Endpoint
None

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **from_x** (float) - The x-coordinate of the starting point.
- **from_y** (float) - The y-coordinate of the starting point.
- **to_x** (float) - The x-coordinate of the ending point.
- **to_y** (float) - The y-coordinate of the ending point.

### Request Example
```javascript
gradient.from(0, 0).to(0, 1)
```

### Response
#### Success Response (200)
- **itself** (object) - Returns the gradient instance for chaining.

#### Response Example
None
```

--------------------------------

### Get Stop from Gradient

Source: https://svgjs.dev/docs/3.2/shape-elements

Retrieves a specific stop element from an existing gradient by its index.

```javascript
var gradient = draw.gradient('radial', function(add) {
  add.stop({ offset: 0, color: '#000', opacity: 1 })   // -> first
  add.stop({ offset: 0.5, color: '#f03', opacity: 1 }) // -> second
  add.stop({ offset: 1, color: '#066', opacity: 1 })   // -> third
})

var s1 = gradient.get(0) // -> returns "first" stop
```

--------------------------------

### Build SVG.js Library

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

Builds the SVG.js library using rollup. The output is placed in the 'dist' folder.

```bash
$ npm run build
```

--------------------------------

### Initialize SVG.Matrix with an SVG.Element

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

Constructs an SVG.Matrix from an existing SVG.Element instance. The toString() method returns the matrix as a string.

```javascript
var rect = draw.rect(50, 25)
var matrix = new SVG.Matrix(rect)
matrix.toString() //-> returns matrix(1,0,0,1,0,0)
```

--------------------------------

### tspan.length()

Source: https://svgjs.dev/docs/3.2/shape-elements

Gets the total computed text length of the tspan element. Returns a number.

```APIDOC
## tspan.length()

### Description
Gets the total computed text length of the tspan element.

### Returns
- **number**: The computed text length.

### Example
```javascript
tspan.length()
```
```

--------------------------------

### Use Single-Line Comments for Explanations

Source: https://svgjs.dev/docs/3.2/contributing/coding-style

Employ single-line comments (//) to explain code where necessary. Keep comments concise and variable/method names short yet readable.

```javascript
// Adds orange-specific methods
SVG.extend(SVG.Rect, {
  // Add a nice, transparent orange
  orangify: function() {
    // fill with orange color
    this.fill('orange')

    // add a slight opacity
    return this.opacity(0.85)
  }
})
```

--------------------------------

### Get SVG.Path Node from TextPath

Source: https://svgjs.dev/docs/3.2/shape-elements

Retrieve the SVG.Path node linked to an SVG.TextPath element.

```javascript
var path = textpath.track()
```

--------------------------------

### Create a New SVG Document

Source: https://svgjs.dev/docs/3.2/referencing-creating-elements

Initialize a new SVG document by calling the `SVG()` function without any arguments.

```javascript
var draw = SVG()
```

--------------------------------

### Get all CSS properties

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

Retrieves all CSS properties applied to an element as a single string.

```javascript
element.css()
```

--------------------------------

### Create a Rounded Rectangle Instance

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

Demonstrates how to use the custom `rounded` method to create a new rounded rectangle element with specified dimensions.

```javascript
var rounded = draw.rounded(200, 100)
```

--------------------------------

### Get single CSS property

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

Retrieves the value of a specific CSS property from an element.

```javascript
element.css('cursor')
```

--------------------------------

### Create SVG Element with Vanilla JavaScript

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

Demonstrates the verbose process of creating an SVG element and a rectangle using plain JavaScript and the SVG namespace.

```javascript
var ns = 'http://www.w3.org/2000/svg'
var div = document.getElementById('drawing') 
var svg = document.createElementNS(ns, 'svg')
svg.setAttributeNS(null, 'width', '100%')
svg.setAttributeNS(null, 'height', '100%')
div.appendChild(svg)
var rect = document.createElementNS(ns, 'rect')
rect.setAttributeNS(null, 'width', 100)
rect.setAttributeNS(null, 'height', 100)
rect.setAttributeNS(null, 'fill', '#f06')
svg.appendChild(rect)
```

--------------------------------

### element.node

Source: https://svgjs.dev/docs/3.2/referencing-creating-elements

Provides a reference to the underlying native SVGElement instance.

```APIDOC
## node

### Description
Every element instance within SVG.js has a reference to the actual `node`.

### Returns
`SVGElement`

### Example
```javascript
element.node
```
```

--------------------------------

### Get Previous Sibling Element

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

Retrieves the previous element in the SVG structure at the same nesting level.

```javascript
rect.prev()
```

--------------------------------

### show()

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

Shows (unhides) the element, making it visible.

```APIDOC
## show()

### Description
Shows (unhides) the element, making it visible.

### Method
`show()`

### Parameters
None

### Request Example
```javascript
element.show()
```

### Response
#### Success Response (200)
Returns the element itself.

#### Response Example
```javascript
// Returns the element instance for chaining
```
```

--------------------------------

### Get Element Position Among Siblings

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

Returns the zero-based index of the element within its siblings.

```javascript
rect.position()
```

--------------------------------

### Get Next Sibling Element

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

Retrieves the next element in the SVG structure at the same nesting level.

```javascript
rect.next()
```

--------------------------------

### use() constructor

Source: https://svgjs.dev/docs/3.2/shape-elements

Creates a 'use' element, which references another existing element. Changes to the referenced element are reflected in all 'use' instances. It can reference elements within the same SVG or external SVG files.

```APIDOC
## use() constructor

Creates a 'use' element that references another element.

### Method

```javascript
SVG.Container.use(element, href)
```

### Parameters

*   **element** (SVG.Element) - The element to reference. Can be an ID string for external files.
*   **href** (string, optional) - The path to an external SVG file.

### Returns

*   **SVG.Use** - The new 'use' element.

### Example

```javascript
// Reference an element within the same SVG
var rect = draw.rect(100, 100).fill('#f09')
var use = draw.use(rect).move(200, 200)

// Reference an element from an external file
var use = draw.use('elementId', 'path/to/file.svg')
```
```

--------------------------------

### Create Rect Element

Source: https://svgjs.dev/docs/3.2/shape-elements

Demonstrates creating a Rect element using its constructor or a container's method. The constructor requires explicit addition to the draw object.

```javascript
import { Rect } from "@svgdotjs/svg.js"
var rect = new Rect().size(100, 100).addTo(draw)
// or to reuse an existing node
var rect = new Rect(node).size(100, 100)
```

```javascript
var rect = draw.rect(100, 100)
```

--------------------------------

### Get all CSS classes of an element

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

Fetches all CSS classes applied to the element and returns them as an array.

```javascript
element.classes()
```

--------------------------------

### Get all attributes

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

Fetch all attributes of an SVG element as a single object by calling `attr()` with no arguments.

```javascript
var attributes = rect.attr()
```

--------------------------------

### get()

Source: https://svgjs.dev/docs/3.2/referencing-creating-elements

Retrieves a child element at a specific index within the parent's children list.

```APIDOC
## get()

### Description
Get an element on a given position in the children array.

### Returns
`SVG.Element`

### Parameters
- **index** (number) - The index of the child element to retrieve.

### Example
```javascript
var rect   = draw.rect(20, 30)
var circle = draw.circle(50)

draw.get(0) //-> returns rect
draw.get(1) //-> returns circle
```
```

--------------------------------

### SVG.Runner Methods Overview

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

Demonstrates the various methods available on an SVG.Runner instance for controlling animation playback, element binding, and timeline scheduling.

```javascript
let rect = draw.rect(100, 100)
let runner = rect.animate()

runner.element() // returns or sets the element the runner is bound to
runner.timeline() // returns or sets the timeline the runner will be / is scheduled on
runner.animate() // for animation chaining. See element.animate()
runner.schedule(timeline, delay, when) // schedules the runner on the timeline. Timeline can be skipped if already set
runner.unschedule() // removes the runner from the timeline
runner.loop(times, swing, wait) // loops the animation by `times` times with `wait` milliseconds time between each loop
runner.queue(runOnceFn, runOnEveryStepFn) // Lets you chain functions which are not neccecarily animations
runner.during(fn) // Lets you bind a function to every animation step
runner.after(fn) // Lets you bind a function which is executed after the animation is finished
runner.time() // returns or sets the runner time
runner.duration() // returns the duration the runner will run
runner.loops() // Lets you jump to a specific iteration of the runner e.g. 3.5 for 4th loop half way through
runner.persist() // Make this runner persist on the timeline forever (true) or for a specific time. Usually a runner is deleted after execution to clean up memory.
runner.position() // returns or sets the current position of the runner ignoring the wait times (between 0 and 1)
runner.progress() // returns or sets the current position of the runner including the wait times (between 0 and 1)
runner.step(dt) // step the runner by a certain time (for manually stepping trough animations)
runner.reset() // set the runner back to zero time and all animations with it
runner.finish() // steps the runner to its finished state
runner.reverse() // execute the runner backwards
runner.ease() // change the easing of the animation
runner.active() // returns or sets the active state of the runner. Inactive runners are not executed
```

--------------------------------

### Create Ellipse Element

Source: https://svgjs.dev/docs/3.2/shape-elements

Demonstrates creating an Ellipse element with specified width and height using the container's ellipse() method.

```javascript
var ellipse = draw.ellipse(200, 100)
```

--------------------------------

### Get SVG Marker Instance

Source: https://svgjs.dev/docs/3.2/shape-elements

Retrieves a marker instance associated with a specific element, identified by its ID.

```javascript
path.reference('marker-end')
```

--------------------------------

### Get textPath from a text element in SVG.js

Source: https://svgjs.dev/docs/3.2/shape-elements

Retrieves the associated SVG.TextPath element from an SVG.js text element.

```javascript
var textpath = text.textPath().attr('startOffset', '50%')
```

--------------------------------

### Resizing Methods

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

Details the `size()` method for setting the dimensions of an SVG element, including proportional resizing.

```APIDOC
## size(width, height)

### Description
Sets the size of an element to a given `width` and `height`. Proportional resizing is supported by omitting `height` or passing `null` for `width`.

### Method
`size(width, height)`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **width** (number or null) - The target width. If `null`, the height is set proportionally.
- **height** (number, optional) - The target height. If omitted, the width is set proportionally.

### Request Example
```javascript
// Set width and height
rect.size(200, 300)

// Proportional resizing by width
rect.size(200)

// Proportional resizing by height
rect.size(null, 200)
```

### Response
#### Success Response (200)
- **itself** (object) - Returns the SVG element itself for chaining.

```

--------------------------------

### Get Text Length

Source: https://svgjs.dev/docs/3.2/shape-elements

Calculates and returns the total computed length of all tspans within a text element.

```javascript
text.length()
```

--------------------------------

### Get Text Baseline Y Position

Source: https://svgjs.dev/docs/3.2/shape-elements

Retrieves the current y-axis position of the text element based on its baseline.

```javascript
var x = rect.ay()
```

--------------------------------

### SVG.Marker Methods

Source: https://svgjs.dev/docs/3.2/shape-elements

Provides methods to configure marker properties such as size, reference points, and orientation. These methods allow for fine-tuning the appearance and behavior of markers.

```APIDOC
## marker.height()
`returns` **`itself`**
`animate`**`yes`**
Defines the `markerHeight` attribute.
```javascript
marker.height(10);
```

## marker.ref()
`returns` **`itself`**
By default, the `refX` and `refY` attributes of a marker are set to respectively half the `width` and `height` values. To define the `refX` and `refY` of a marker differently.
```javascript
marker.ref(2, 7);
```

## marker.size()
`returns` **`itself`**
`animate`**`yes`**
Defines the `markerWidth` and `markerHeight` attributes.
```javascript
marker.size(10, 10);
```

## marker.update()
`returns` **`itself`**
Updating the contents of a marker will `clear()` the existing content and add the content defined in the block passed as the first argument.
```javascript
marker.update(function(add) {
  add.circle(10);
});
```

## marker.width()
`returns` **`itself`**
`animate`**`yes`**
Defines the `markerWidth` attribute.
```javascript
marker.width(10);
```

## marker.orient()
`returns` **`itself`**
`animate`**`no`**
Defines the `orient` attribute.
```javascript
marker.orient(50);
```
```

--------------------------------

### Get SVG Path Length

Source: https://svgjs.dev/docs/3.2/shape-elements

Retrieve the total length of a path element. This can be useful for animations or calculations.

```javascript
var length = path.length()
```

--------------------------------

### Create SVG.Image Element with Load Callback

Source: https://svgjs.dev/docs/3.2/shape-elements

Create an SVG.Image element and specify a callback function to be executed once the image has finished loading. The callback receives the loading event object.

```javascript
var image = draw.image('/path/to/image.jpg', function (event) {
  // image loaded
  // this is the loading event for the underlying img element
  // you can access the natural width and height of the image with
  // event.target.naturalWidth, event.target.naturalHeight
})
```

--------------------------------

### Flatten and export SVG

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

Combine `flatten()` with `svg()` to get a string representation of the flattened SVG structure.

```javascript
var svgString = drawing.flatten().svg()
```

--------------------------------

### Set Circle Radius

Source: https://svgjs.dev/docs/3.2/shape-elements

Shows how to set the radius of a Circle element using the radius() method.

```javascript
circle.radius(75)
```

--------------------------------

### Get Specific Transformation Value

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

Retrieves the value of a specific transformation property (e.g., 'rotate') as a string.

```javascript
element.transform('rotate')
```

--------------------------------

### Initialize SVG.Matrix with a native SVGMatrix

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

Creates an SVG.Matrix instance from a native SVGMatrix object obtained from an SVG element. The toString() method provides the matrix string.

```javascript
var svgMatrix = svgElement.getCTM()
var matrix = new SVG.Matrix(svgMatrix)
matrix.toString() //-> returns matrix(1,0,0,1,0,0)
```

--------------------------------

### SVG() - Select First Element

Source: https://svgjs.dev/docs/3.2/referencing-creating-elements

Gets the first SVG element that matches the provided CSS selector.

```APIDOC
## SVG()

### Description
Gets the first element matching the passed selector.

### Returns
`SVG.Dom` (or the most relevant subclass of `SVG.Element`)

### Example
```javascript
var rect = SVG('rect.my-class').fill('#f06')
```
```

--------------------------------

### Create SVG.Dom Element

Source: https://svgjs.dev/docs/3.2/shape-elements

Illustrates creating a generic SVG.Dom element using the element() method. Attributes can be passed as a second argument.

```javascript
var element = draw.element('title')
// or with attributes
var element = draw.element('title', {id: 'myId'})
```

--------------------------------

### Get path array from textPath in SVG.js

Source: https://svgjs.dev/docs/3.2/shape-elements

Retrieves the underlying SVG path array from an SVG.js TextPath element.

```javascript
var array = textpath.array()
```

--------------------------------

### front()

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

Moves the current element to the front of its sibling elements.

```APIDOC
## front()

### Description
Moves the current element to the front of its sibling elements.

### Method
Not specified (likely a method call on an SVG element)

### Examples
```javascript
rect.front()
```
```

--------------------------------

### link() constructor

Source: https://svgjs.dev/docs/3.2/container-elements

Creates a hyperlink element (<a> tag) that applies a link to all its child elements. Returns an instance of SVG.A, inheriting from SVG.Container.

```APIDOC
## link()

### Description
Creates a hyperlink element (<a> tag) that applies a link to all its child elements. Returns an instance of `SVG.A`, inheriting from `SVG.Container`.

### Constructor
`constructor on SVG.Container`

### Returns
- **`SVG.A`**: An instance of `SVG.A` which inherits from `SVG.Container`.

### Example
```javascript
var draw = SVG().addTo('#drawing')
var link = draw.link('http://svgdotjs.github.io/')
var rect = link.rect(100, 100)
```
```

--------------------------------

### Get font property with text.font() in SVG.js

Source: https://svgjs.dev/docs/3.2/shape-elements

Retrieves a specific font property, such as 'leading', from an SVG.js text element.

```javascript
var leading = text.font('leading')
```

--------------------------------

### Get Untransformed Bounding Box

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

Returns the tightest bounding box around an element, ignoring any transformations applied to it.

```javascript
element.bbox()
```

--------------------------------

### path() constructor

Source: https://svgjs.dev/docs/3.2/shape-elements

Creates a path element using SVG path data syntax. This allows for complex shapes including curves.

```APIDOC
## path() constructor
`constructor on` **`SVG.Container`**  
`returns` **`SVG.Path`**`which inherits from` **`SVG.Shape`**
The path string is similar to the polygon string but much more complex in order to support curves:
```
draw.path('M0 0 H50 A20 20 0 1 0 100 50 v25 C50 125 0 85 0 85 z')
```

For more details on path data strings, please refer to the SVG documentation on path data.
```

--------------------------------

### height()

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

Sets or gets the height of an element. When used as a setter, it can also animate the change. The setter returns the element itself.

```APIDOC
## height() _as setter_

Set the height of an element.

### Method

```javascript
rect.height(325)
```

### Returns

`itself`

### Animation

`yes`

## height() _as getter_

Get the height of an element.

### Method

```javascript
rect.height()
```

### Returns

`value`
```

--------------------------------

### Create SVG Document with Percentage Size

Source: https://svgjs.dev/docs/3.2/getting-started

Create an SVG document and set its size to 100% of its parent container's dimensions.

```javascript
var draw = SVG().addTo('#someId').size('100%', '100%')
```

--------------------------------

### Create TextPath

Source: https://svgjs.dev/docs/3.2/shape-elements

Creates a text element that follows a path. Use the text() method on a path element.

```javascript
var textpath = path.text('SVG.js rocks!')
```

--------------------------------

### width()

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

Sets or gets the width of an element. When used as a setter, it can also animate the change. The setter returns the element itself.

```APIDOC
## width() _as setter_

Set the width of an element.

### Method

```javascript
rect.width(200)
```

### Returns

`itself`

### Animation

`yes`

## width() _as getter_

Get the width of an element.

### Method

```javascript
var width = rect.width()
```

### Returns

`value`
```

--------------------------------

### Creating a Use Element (Defs)

Source: https://svgjs.dev/docs/3.2/shape-elements

Creates a 'use' element referencing an element defined in the defs section, effectively making it a reusable library element that is not rendered directly.

```javascript
var rect = draw.defs().rect(100, 100).fill('#f09')
var use  = draw.use(rect).move(200, 200)
```

--------------------------------

### Get element center y-coordinate

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

Call `cy()` without arguments to retrieve the current center y-coordinate of the element.

```javascript
var cy = rect.cy()
```

--------------------------------

### Get element center x-coordinate

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

Call `cx()` without arguments to retrieve the current center x-coordinate of the element.

```javascript
var cx = rect.cx()
```

--------------------------------

### Apply Transformations with Flexible Syntax

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

Applies transformations using a flexible syntax for translation, rotation, scaling, skewing, flipping, and origin. Returns the element itself for chaining.

```javascript
element.transform({
  translate: [10, 20],
  origin: 'top left',
  flip: 'both'
})
```

--------------------------------

### SVG() constructor

Source: https://svgjs.dev/docs/3.2/container-elements

Creates a root SVG element or a nested SVG document. It returns an instance of SVG.Svg, which inherits from SVG.Container.

```APIDOC
## SVG()

### Description
Creates a root SVG element or a nested SVG document. It returns an instance of `SVG.Svg`, which inherits from `SVG.Container`.

### Constructor
`SVG()`

### Returns
- **`SVG.Svg`**: An instance of `SVG.Svg` which inherits from `SVG.Container`.

### Example
```javascript
var draw = SVG().addTo('#drawing')
```
```

--------------------------------

### Get specified attributes

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

Retrieve the values of specific attributes by passing an array of attribute names to the `attr()` method.

```javascript
var attributes = rect.attr(['x', 'y'])
```
Tokens:
Raw