# SVG Layer

SVG is a vector-based graphics rendering. I2Djs svgLayer exposes all native capabilities of SVG through its intuitive and easy to use APIs. Full scale DOM event types are supported along with some additional event behaviors like Drag, Zoom, etc.

### **Layer API:**

**i2d.svgLayer(** *#containerId, LayerSettings* **);**

svgLayer API return rendering instance of SVG context. It accepts containerID as an input along with the **SettingsObj** object. Please refer to the SVGConfig object.

**Example:** 

```
   var SVGLayer = i2d.svgLayer('#containerId', settingsObj = {});
```

* **containerID** - CSS ID selector which uniquely identifies the container in which the Canvas element will be rendered.
* **SettingsObj** - Object with below settings.
  * **enableEvents** - Boolean - Flag to enable/disable events for the rendered layer. Default is **True**
  * **enableResize -** *Boolean* **-** Flag to enable/disable window resize event. If it is disabled, the layer won't be resized on the container resize. Default is **True.**
  * **autoUpdate** - Boolean - To disable auto rendering of VDom changes to DOM. Used only in special cases to improve rendering performance. On disabling, one should invoke **layerInstance.update()** to manually render the changes to the DOM.

### **Layer specific Methods:**

**Layer.setLayerId(** *String* **); -** For setting ID attribute to the Layer Dom element. 

**Layer.setAttr(** *attr, value* **)**; **-** To set attributes to the layer Dom Element. 

**Layer.setViewBox(** *x, y, width, height* **)**;

**Layer.setStyle(** *prop, value* **)**; - To set style properties to the layer Dom Element.

**Layer.SetSize(** *width, height* **)**; - Optional - To set the Size of the canvas layer.  If not, the parent container size will be inherited by the layer.

**Layer.update( )**; - API to manually trigger the  Layer update. In the case of the default behavior, all the changes from VDOM will be applied to the DOM as a part of the refresh cycle.

**Layer.destroy( )**; To remove layer instance. It removes the DOM element along with the vDOM.and Also unbinds all the event listeners is any.

Example:

```
var SVGLayer = i2d.svgLayer('#containerId', {});

let circle = SVGLayer.createEl({
    el: 'circle',
    attr: {
        r: 50,
        cx: renderer.width / 2,
        cy: renderer.height / 2
    },
    style: {
        fill: '#ff0000'
    }
})

let path = SVGLayer.createEl({
    el: 'path',
    attr: {
        d: "M150 0 L75 200 L225 200 Z"
    },
    style: {
        stroke: '#ff0000'
    }
})
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://nswamy14.gitbook.io/i2djs-v5/api-reference/layers/svg-layer.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.