node package manager

svgson

svgson Build Status

SVGJSON is a simple tool to transform svg files and Strings into Object or JSON.

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

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

or

$ 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

License

MIT © Lionel T

Use this within your firewall

Combine open-source packages with your private code and publish to a private registry behind the firewall. npm ♥ enterprise developers

how? learn more

Collaborators list

Stats

Try it out

Keywords

svg, json

Dependencies (6)

chalk, commander, fs-promise, htmlparser2, promise, svgo

Dependents (5)

svgson-loader, sketch-to-svg-json-loader, bepp, and more