Simple tool to transform svg files and Strings into Object or JSON.

Useful to manipulate SVG with js, to store in noSQL databses.

v2 docs

Install

``bash
yarn add svgson
`

Usage

`js
const { parse, stringify } = require('svgson')

// ----------------------------
// Convert SVG to JSON AST
// ----------------------------
parse(

stroke= "#bada55"
stroke-width= "2"
stroke-linecap= "round"
x1= "70"
y1= "80"
x2= "250"
y2= "150">

).then((json) => {
console.log(JSON.stringify(json, null, 2))
/*
{
name: 'svg',
type: 'element',
value: '',
attributes: {},
parent: null,
children: [
{
name: 'line',
type: 'element',
value: '',
attributes: {
stroke: '#bada55',
'stroke-width': '2',
'stroke-linecap': 'round',
x1: '70',
y1: '80',
x2: '250',
y2: '150'
},
parent: null,
children: []
}
]
}
*/

// -------------------------------
// Convert JSON AST back to SVG
// -------------------------------
const mysvg = stringify(json)
/ returns the SVG as string /
})
`

const svgson = require('svgson')
svgson
  .parse(
    <svg>
      <line
        stroke= "#bada55"
        stroke-width= "2"
        stroke-linecap= "round"
        x1= "70"
        y1= "80"
        x2= "250"
        y2= "150">
      </line>
    </svg>
  )
  .then(function(json) {
    console.log(JSON.stringify(json, null, 2)
  )
 
mysvg = svgson.stringify(json)
  

`js
svgson.parse(input[, options])
`

Returns: Promise

- input

Type: String

- options.transformNode

Function to apply on each node when parsing, useful when need to reshape nodes or set default attributes.

Type: Function that returns the node

Default:

`js
function(node){
return node
}
`

- options.camelcase

Apply camelCase into attributes

Type: Boolean

Default: false

svgson.parseSync

> Added in 3.1.0

`js
svgson.parseSync(input[, options])
`

This function is a synchronous version of svgson.parse. The arguments are the same, but unlike svgson.parse, the return value is not wrapped in a Promise.

Returns: Object [Object]

svgson.stringify

`js
svg = svgson.stringify(ast[, options])
`

Returns: String

- ast

svgson parsed result.

Type: Object [Object]

- options.transformAttr

Function to apply on each attribute when stringifying.

Type: Function that returns the key/attribute string with the ability to use the escape function on it.

Default:

`js
function(key, value, escape) {
return ${key}="${escape(value)}"
}
`

- options.transformNode

Function to apply on each node when stringifying, useful when need to reshape nodes or change/update values.

Type: Function that returns the node

Default:

`js
function(node){
return node
}
`

- options.selfClose

Type: Boolean

Default: true

- Pretty Printing

In order to generate pretty formatted SVG output, use pretty npm module:

`js
pretty = require('pretty')
formatted = pretty(svg)
`

Related

svgson-cli Transform SVG into Object from the Command Line

element-to-path Convert SVG element into path

path-that-svg Convert entire SVG with path

svg-path-tools Tools to manipulate SVG path` (d)

License

MIT © Lionel T