svgson v5.3.1
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 */
})
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 nodeDefault:
function(node){ return node }
options.camelcase
Apply
camelCase
into attributesType:
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 nodeDefault:
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)
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
2 years ago
2 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
6 years ago
6 years ago
7 years ago
7 years ago
7 years ago
8 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago