Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/elrumordelaluz/svgson
Transform svg files to json notation
https://github.com/elrumordelaluz/svgson
svg svg-files svg-icons svgo tool
Last synced: 3 days ago
JSON representation
Transform svg files to json notation
- Host: GitHub
- URL: https://github.com/elrumordelaluz/svgson
- Owner: elrumordelaluz
- License: mit
- Created: 2015-12-29T21:14:16.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2023-10-26T08:35:21.000Z (about 1 year ago)
- Last Synced: 2024-10-26T18:31:00.348Z (16 days ago)
- Topics: svg, svg-files, svg-icons, svgo, tool
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/svgson
- Size: 3.52 MB
- Stars: 446
- Watchers: 5
- Forks: 27
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Funding: FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
Simple tool to transform svg files and Strings into Object or JSON.
Useful to manipulate SVG with js, to store in noSQL databses.
[`v2` docs](https://github.com/elrumordelaluz/svgson/tree/v2)
## Install
```bash
yarn add svgson
```
## Usage
```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](https://codepen.io/elrumordelaluz/full/XBKedz/)
# API
## svgson.parse
```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`
## svgson.parseSync
> Added in `3.1.0`
```js
svgson.parseSync(input[, options])
```
This function is a synchronous version of [`svgson.parse`](#svgsonparse). The arguments are the same, but unlike `svgson.parse`, the return value is not wrapped in a `Promise`.
Returns: `Object` `[Object]`
## svgson.stringify
```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](https://github.com/elrumordelaluz/svgson/blob/master/src/tools.js#L73-L80) function on it.
Default:
```js
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:
```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](https://www.npmjs.com/package/pretty):
```js
pretty = require('pretty')
formatted = pretty(svg)
```
# Related
[svgson-cli](https://github.com/elrumordelaluz/svgson-cli) Transform SVG into `Object` from the Command Line
[element-to-path](https://github.com/elrumordelaluz/element-to-path) Convert SVG element into `path`
[path-that-svg](https://github.com/elrumordelaluz/path-that-svg) Convert entire SVG with `path`
[svg-path-tools](https://github.com/elrumordelaluz/svg-path-tools) Tools to manipulate SVG `path` (d)
## License
MIT © [Lionel T](https://lionel.tzatzk.in)