Awesome

<img alt="svgson" title="svgson" src="logo.svg" width="450"> Simple tool to transform <code>svg</code> files and Strings into <code>Object</code> or <code>JSON</code>. Useful to manipulate <code>SVG</code> with <code>js</code>, to store in noSQL databses. <a href="https://travis-ci.org/elrumordelaluz/svgson/"> <img src="https://img.shields.io/travis/elrumordelaluz/svgson.svg" alt="Travis"> </a> <a href="https://codecov.io/gh/elrumordelaluz/svgson"> <img src="https://img.shields.io/codecov/c/github/elrumordelaluz/svgson.svg" alt="Codecov"> </a> <a href="https://www.npmjs.com/package/svgson"> <img src="https://img.shields.io/npm/v/svgson.svg" alt="Version"> </a> <a href="https://npm-stat.com/charts.html?package=svgsont"> <img src="https://img.shields.io/npm/dm/svgson.svg" alt="Download"> </a> <a href="https://opensource.org/licenses/MIT"> <img src="https://img.shields.io/npm/l/svgson.svg" alt="MIT License"> </a>

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 */
})

<details> <summary><code>umd</code> usage</summary> <pre lang=js> 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) </pre> </details>

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)
```

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)