svgson

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

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


Travis Codecov Version Download MIT License

[`v2` docs](https://github.com/elrumordelaluz/svgson/tree/v2) ## Install ```bash yarn add svgson ``` ## Usage ```js const { parse, stringify } = require('svgson') // ---------------------------- // Convert SVG to JSON AST // ---------------------------- parse(` `).then((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 // ------------------------------- 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](https://codepen.io/elrumordelaluz/full/XBKedz/) # API ## svgson.parse ```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`](#svgsonparse). 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](https://github.com/elrumordelaluz/svgson/blob/master/src/tools.js#L73-L80) function on it. Default: ```js function(key, value, escape) { return `${key}="${escape(value)}"` } ``` - **`options.selfClose`** Type: `Boolean` Default: `true` - **Pretty Printing** In order to generate pretty formatted SVG output, use [`pretty` npm module](https://www.npmjs.com/package/pretty): ```js pretty = require('pretty') formatted = pretty(svg) ``` # Related [svgson-cli](https://github.com/elrumordelaluz/svgson-cli) Transform SVG into `Object` from the Command Line [element-to-path](https://github.com/elrumordelaluz/element-to-path) Convert SVG element into `path` [path-that-svg](https://github.com/elrumordelaluz/path-that-svg) Convert entire SVG with `path` [svg-path-tools](https://github.com/elrumordelaluz/svg-path-tools) Tools to manipulate SVG `path` (d) ## License MIT © [Lionel T](https://lionel.tzatzk.in)