Repository files navigation

Simple tool to transformsvg files and Strings intoObject orJSON.

Useful to manipulateSVG withjs, to store in noSQL databses.

v2 docs

yarn add svgson

const{ parse, stringify}=require('svgson')// ----------------------------// Convert SVG to JSON AST// ----------------------------parse(`  <svg>    <line      stroke= "#bada55"      stroke-width= "2"      stroke-linecap= "round"      x1= "70"      y1= "80"      x2= "250"      y2= "150">    </line>  </svg>`).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// -------------------------------constmysvg=stringify(json)/* returns the SVG as string */})

constsvgson=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)

Test in browserhere

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:

  function(node){returnnode}

• options.camelcase

  ApplycamelCase into attributes

  Type:Boolean

  Default:false

Added in3.1.0

svgson.parseSync(input[,options])

This function is a synchronous version ofsvgson.parse. The arguments are the same, but unlikesvgson.parse, the return value is not wrapped in aPromise.

Returns:Object[Object]

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 theescape function on it.

  Default:

  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:

function(node){returnnode}

• options.selfClose

  Type:Boolean

  Default:true

• Pretty Printing

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

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

svgson-cli Transform SVG intoObject from the Command Line

element-to-path Convert SVG element intopath

path-that-svg Convert entire SVG withpath

svg-path-tools Tools to manipulate SVGpath (d)

MIT ©Lionel T