Transform svg files into Objects
npm install svgson
Simple tool to transform svg files and Strings into Object or JSON.
Useful to manipulate SVG with js, to store in noSQL databses.
``bash`
yarn add svgson
`js
const { parse, stringify } = require('svgson')
// ----------------------------
// Convert SVG to JSON AST
// ----------------------------
parse(
).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
`js`
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:
`js`
function(node){
return node
}
- options.camelcase
Apply camelCase into attributes
Type: Boolean
Default: false
> Added in 3.1.0
`js`
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]
`js`
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:
`js${key}="${escape(value)}"
function(key, value, escape) {
return `
}
- 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:
`js`
function(node){
return node
}
- options.selfClose
Type: Boolean
Default: true
- Pretty Printing
In order to generate pretty formatted SVG output, use pretty npm module:
`js`
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)
MIT © Lionel T