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

We ♥ your boss

Selectively mirror the npm registry inside your firewall. Filter packages based on security, licensing, code quality and more. Build awesome stuff faster. Try npm Enterprise for free…

how? learn more

Collaborators list

Stats

Try it out

Keywords

svg, json

Dependencies (6)

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

Dependents (4)

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