svg-el

a handy tool to create svg element

Motivation

There's aleary a package svg. But:

1. at current time, this package can't handle surrounding spaces, this forbid me to use template string (or I need to remember to trim the string, this is a little confusing).

2. I feel a little inconvenient to write a bunch of template string, especially for style attribute. instead of:

svg(`
  <rect
    width="${width}"
    height="${height}"
    style="stroke: ${stroke}; fill: none;"
  />
`)

I prefer:

svgEl('rect', {
    width,
    height,
    style: {
      stroke,
      fill: 'none'
    }
})

Thanks

https://stackoverflow.com/questions/3642035/jquerys-append-not-working-with-svg-element

Installation

npm i svg-el

Usage

• esm way

import svgEl from 'svg-el'

• common js way

const svgEl = require('svg-el')

API

svgEl(tagName, attributes)

parameters

• tagName - a valid svg element tag, if not a valid svg element tag name, an error will be thrown
• attributes - attributes to be set, attribute style could be an object and it will be converted to style string, or you could pass the style string too. eg.

{
  style: { fill: none, stroke: 'red' }
}

and

{ style: 'fill: none; stroke: red' }

are both acceptable.

Attribute whose value is null/void 0 will be omitted

return value

newly created svg element

Developement

$ git clone https://github.com/xiechao06/svg-el.git
$ cd svg-el
$ npm test # test
$ npm build # build