Skip to content

A wafer-thin wrapper around native SVGElement that makes creating/manipulating SVGs as painless as possible

License

Notifications You must be signed in to change notification settings

runningskull/ssvg

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Simple SVG

A wafer-thin wrapper around the built-in SVGElement which adds some creature comforts that make creating SVGs a lot less verbose.

This uses proxies, classes, modules, and template strings and thus only works in modern browsers.

Idea

SVG is really not that hard to understand, and in fact it's pretty pleasant to work with, conceptually. In practice, however, it involves a ton of very verbose method calls with arcane namespace strings, and some other annoyances.

By minimizing that boilerplate, we can bring practice closer to concept and provide a pretty decent way of creating SVGs.

Usage

To start, create an instance:

let svg = new SSVG()

All of the SVGElement types can be created and immediately appended to the SVGElement by calling their name as a method:

svg.circle()  // appends & returns a new <circle> (SVGCircleElement)
svg.line()    // appends & returns a new <line> (SVGLineElement)
// etc...

To just create an element without appending, use the create* variation:

svg.createCircle()  // returns a new <circle>
svg.createLine()    // returns a new <line>
// etc...

Created elements also have some syntax sugar applied. Normally, the short syntax (circle.cx = 10) doesn't work because those properties are read-only. Instead you have to do circle.setAttribute('cx', 10)

SSVG makes those attributes writable:

let circle = svg.circle()
circle.cx = 100
circle.cy = 100
circle.r = 50
circle.fill = 'red'
circle.stroke = 'blue'
// etc...

You can also set attributes when you create the element:

let circle = svg.circle({ 
    cx: 100, 
    cy: 100, 
    r: 50,
    fill: 'red',
    stroke: 'blue',
    // etc...
})

Elements can also create/append nested children. This only makes sense to do with the g (group) element:

let g = svg.g({fill: red})
g.circle({cx:100, cy:100, r:50})
g.rect({x:10, y:10, width:50, height:50})

You can apply classes to elements, but use .class instead of .className:

let circle = svg.circle(...)
circle.class = 'myClass'

The actual Element instance can be gotten from the .root property:

svg.root      // SVGElement
circle.root   // SVGCircleElement

Other Userful Documentation:

License

MIT

About

A wafer-thin wrapper around native SVGElement that makes creating/manipulating SVGs as painless as possible

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published