# SVG element

The function gySVG() creates an SVG element and returns an object with a gySVG wrapper over that element. It can be used to nest other elements, define its coordinate system, or establish other configuration parameters.

You can use the method .viewBox() to defines the graphic's internal canvas, .width(), .height () to define the viewport, etc.

# The viewBox

The .viewBox() method defines the internal position and dimensions of an SVG. To determine the view box need four parameters: min-x, min-y, width, height. These numbers specify a rectangle that is mapped within the internal boundaries associated with the SVG element. All measures of nested elements take these dimensions as a reference. Calling this method without parameters returns the current view box value.

# Width and height

These methods define the viewport, that is, the image's size in the HTML page where they will be embedded. The horizontal length is defined with .width() and the vertical length is defined with .height().

It's also possible to define these values by CSS using .style.width and .style.height.

# Attach to DOM element

Finally, to include the SVG within the DOM of our HTML page, we use .attachTo() providing as a parameter a selector to locate the element or, if we already have a reference, the DOM object directly. As a result, our SVG is inserted into the page.

# Add nested elements

To add elements within the SVG we will use .add() passing as a parameter the name of the element that we want to create. This method returns an object which we can use to set up all the characteristics of the element we have created.

The SVG format nests its elements by creating a structure of elements that are contained within one another. All objects returned by .add() can contain other objects by calling their .add() method. For example, we can create a g (group) element and include it inside a circle.