Reference

Creating an SVG Object

An SVG object is typically created with SVG() or any of its variants (SVG_() or SVG_t()). Once created, SVG elements, filters, and animations can be added.

SVG()

Create an svg object

SVG_()

Create a compact svg object

SVG_t()

Create a text-height svg object

SVG_import()

Import an SVG file and create an svg object

SVG_la()

Create an svg object with a Line Awesome glyph

Define SVG Elements

SVG elements such as rectangles, circles, paths, images, and text elements can be added to the SVG object using the svg_*() functions.

svg_rect()

Addition of a rect element

svg_circle()

Addition of a circle element

svg_ellipse()

Addition of an ellipse element

svg_line()

Addition of an line element

svg_polyline()

Addition of an polyline element

svg_polygon()

Addition of an polygon element

svg_path()

Addition of an path element

svg_text()

Addition of a text element

svg_image()

Addition of an image element

svg_group()

Addition of a group element

Define SVG Filters

SVG filters can be used on SVG elements to radically alter their appearance.

svg_filter()

Build an SVG <filter>

filter_image()

Filter: display an image

filter_gaussian_blur()

Filter: add a gaussian blur to an element

filter_erode()

Filter: add an erosion effect to an element

filter_dilate()

Filter: add a dilation effect to an element

filter_drop_shadow()

Filter: add a drop shadow to an element

filter_offset()

Filter: offset an element a specified amount

Define SVG Animations

SVG animations can allow for object properties to transition during a fixed time interval. All SVG elements are animatable, and multiple animations can be defined per element.

anims()

Express animations for an element

anim_opacity()

Animate an element through an opacity change

anim_position()

Animate the position of an element

anim_rotation()

Animate an element through rotation

anim_scale()

Animate an element through scaling

Timing and Easing Functions

Timing and easing functions allow us to express the movement of objects over a time duration. The [linear()], [step_start()], and [step_end()] timing functions represent the simplest forms of object movement. The easing functions ease_in(), ease_out(), and ease_in_out() use accelation and deceleration during movement.

linear()

Use a linear movement for animation

ease_in()

Use an 'easing in' animation

ease_out()

Use an 'easing out' animation

ease_in_out()

Use an 'easing in and out' animation

cubic_bezier()

Create a custom easing function for animation

step_start()

Use a 'step-start' animation

step_end()

Use a 'step-end' animation