svgson: A JavaScript repository from j1mie

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

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

Take a look to svgson-next for new versions and experiments.

How to use

$ [sudo] npm install -g svgson

$ svgson [options] <keywords>

Options

    -h, --help             output usage information
    -V, --version          output the version number
    -i, --input [input]    Specifies input folder or file.
                           Default current folder
    -o, --output [output]  Specifies output file. Default ./svgson.json
    -t, --title            Add title from svg filename
    -P, --prefix <prefix>  Remove prefix from title
    -S, --suffix <suffix>  Remove suffix from title
    -k, --key [key]        Specifies a key where include all paths
    -a, --attrs <attrs>    Custom Attributes: key=value, key=value...
    -p, --pretty           Prettyfied JSON
    -s, --svgo             Optimize SVG with SVGO

Examples

input current folder | output svgson.json file
```
$ svgson
```

input /svgs folder | output my-svgs.json file

$ svgson --input svgs --output my-svgs.json

input myfile.svg file | output my-file.json file
```
$ svgson -i myfile.svg -o my-file.json
```
Complex example
- input /svgs folder
- output svgson.json file
- adds title from each file and removes icon- prefix
- prettifies JSON output
- group all paths into the key myPaths
- adds { author: me, foo: bar } custom attributes per file
- optimize output with svgo
```
$ svgson -i ./svgs --title --prefix icon- --pretty --key myPaths --svgo --attrs author=me,foo=bar
```

Use as Node Module

$ npm i --save svgson

const svgson = require('svgson')

// From .svg file
const fs = require('fs')
fs.readFile('myfile.svg', 'utf-8', function(err, data) {
  svgson(
    data,
    {
      svgo: true,
      title: 'myFile',
      pathsKey: 'myPaths',
      customAttrs: {
        foo: true,
      },
    },
    function(result) {
      console.log(result)
    }
  )
})

// From svg String
const SVG =
  '<svg width="100" height="100"><circle r="15" stroke-linecap="round" /></svg>'
svgson(SVG, {}, result => console.log(result))

Use in Browser

$ npm run bundle

$ browserify ./lib/svgson.js --standalone svgson -o svgson-bundle.js

then in html file

<body>
  <svg viewBox="0 0 100 100" id="mySVG">
  	<circle cx="50" cy="50" r="48" stroke="red" stroke-width="4"/>
  </svg>
  <script src="svgson-bundle.js"></script>
  <script>
    svgson(document.querySelector('#mySVG').outerHTML, {
      title: 'mySVG',
      pathsKey: 'paths',
      customAttrs: {
        a: 123,
        foo: true,
        bar: 'baz'
      }
    }, function(result) {
      console.log(result);
    });
  </script>
</body>

Tests

npm test