Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

svgson

Package Overview
Dependencies
Maintainers
1
Versions
28
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

svgson

Transform svg files into Objects

  • 5.3.1
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
24K
decreased by-67.57%
Maintainers
1
Weekly downloads
 
Created
Source

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: {},
      parent: null,
      children: [
        {
          name: 'line',
          type: 'element',
          value: '',
          attributes: {
            stroke: '#bada55',
            'stroke-width': '2',
            'stroke-linecap': 'round',
            x1: '70',
            y1: '80',
            x2: '250',
            y2: '150'
          },
          parent: null,
          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.transformNode

    Function to apply on each node when stringifying, useful when need to reshape nodes or change/update values.

    Type: Function that returns the node

    Default:

    function(node){
      return node
    }
    
  • 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)
    

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

FAQs

Package last updated on 17 Jul 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc