❌ deprecated

Use svgson@3.x instead

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

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

This is the new version of svgson

Install

yarn add svgson-next

Usage

const svgson = require('svgson-next')

// ----------------------------
// Convert SVG to JSON AST
// ----------------------------
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))
    /*
    {
      name: 'svg',
      type: 'element',
      value: '',
      attributes: {},
      children: [
        {
          name: 'line',
          type: 'element',
          value: '',
          attributes: {
            stroke: '#bada55',
            'stroke-width': '2',
            'stroke-linecap': 'round',
            x1: '70',
            y1: '80',
            x2: '250',
            y2: '150'
          },
          children: []
        }
      ]
    }
  */

    // -------------------------------
    // Convert JSON AST back to SVG
    // -------------------------------
    mysvg = svgson.stringify(json)
    /* returns the SVG as string */
  })

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.compat

  Use keys from previuos version of svgson

  Type: Boolean

  Default: false

• options.camelcase

  Apply camelCase into attributes

  Type: Boolean

  Default: false

svgson.stringify

svg = svgson.stringify(json)

• 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