elrumordelaluz / svgson

Transform svg files to json notation

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

yarn add svgson

Usage

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
  // -------------------------------
  const mysvg = stringify(json)
  /* returns the SVG as string */
})

umd usage

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)
  

Test in browser here

API

svgson.parse

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){
    return node
  }

• options.camelcase

  Apply camelCase into attributes

  Type: Boolean

  Default: false

svgson.parseSync

Added in 3.1.0

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

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:

  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){
  return node
}

• options.selfClose

  Type: Boolean

  Default: true

• Pretty Printing

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

  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