# SVG structure
The function gySVG()
creates an SVG root element and returns an object with a Graphery SVG 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 size, 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
.
← Load Basic shapes →