Wondering what’s next for npm?Check out our public roadmap! »

    svgson
    TypeScript icon, indicating that this package has built-in type declarations

    5.2.1 • Public • Published

    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

    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: {},
          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

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

    Related

    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)

    License

    MIT © Lionel T

    Keywords

    Install

    npm i svgson

    DownloadsWeekly Downloads

    14,550

    Version

    5.2.1

    License

    MIT

    Unpacked Size

    54.1 kB

    Total Files

    7

    Last publish

    Collaborators

    • avatar