{"id":13394007,"url":"https://github.com/elrumordelaluz/svgson","last_synced_at":"2025-04-08T04:15:00.738Z","repository":{"id":39034461,"uuid":"48767438","full_name":"elrumordelaluz/svgson","owner":"elrumordelaluz","description":"Transform svg files to json notation ","archived":false,"fork":false,"pushed_at":"2023-10-26T08:35:21.000Z","size":3690,"stargazers_count":452,"open_issues_count":3,"forks_count":27,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-01T03:35:34.012Z","etag":null,"topics":["svg","svg-files","svg-icons","svgo","tool"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/svgson","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/elrumordelaluz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":"FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null},"funding":{"github":"elrumordelaluz"}},"created_at":"2015-12-29T21:14:16.000Z","updated_at":"2025-02-12T04:59:01.000Z","dependencies_parsed_at":"2023-02-05T01:46:16.469Z","dependency_job_id":"8bff0d4e-e1cb-48dd-a8f0-b9398be3577e","html_url":"https://github.com/elrumordelaluz/svgson","commit_stats":{"total_commits":136,"total_committers":6,"mean_commits":"22.666666666666668","dds":0.09558823529411764,"last_synced_commit":"eeaf3ae1a22294790c6eaef31d3fb67c6a69d0bd"},"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elrumordelaluz%2Fsvgson","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elrumordelaluz%2Fsvgson/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elrumordelaluz%2Fsvgson/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elrumordelaluz%2Fsvgson/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/elrumordelaluz","download_url":"https://codeload.github.com/elrumordelaluz/svgson/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247773719,"owners_count":20993639,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["svg","svg-files","svg-icons","svgo","tool"],"created_at":"2024-07-30T17:01:05.445Z","updated_at":"2025-04-08T04:15:00.711Z","avatar_url":"https://github.com/elrumordelaluz.png","language":"JavaScript","funding_links":["https://github.com/sponsors/elrumordelaluz"],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"svgson\" title=\"svgson\" src=\"logo.svg\" width=\"450\"\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  Simple tool to transform \u003ccode\u003esvg\u003c/code\u003e files and Strings into \u003ccode\u003eObject\u003c/code\u003e or \u003ccode\u003eJSON\u003c/code\u003e.\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  Useful to manipulate \u003ccode\u003eSVG\u003c/code\u003e with \u003ccode\u003ejs\u003c/code\u003e, to store in noSQL databses.\n\u003c/p\u003e\n\n\u003cbr/\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://travis-ci.org/elrumordelaluz/svgson/\"\u003e\n    \u003cimg src=\"https://img.shields.io/travis/elrumordelaluz/svgson.svg\" alt=\"Travis\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://codecov.io/gh/elrumordelaluz/svgson\"\u003e\n    \u003cimg src=\"https://img.shields.io/codecov/c/github/elrumordelaluz/svgson.svg\" alt=\"Codecov\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/svgson\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/svgson.svg\" alt=\"Version\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://npm-stat.com/charts.html?package=svgsont\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/dm/svgson.svg\" alt=\"Download\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://opensource.org/licenses/MIT\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/l/svgson.svg\" alt=\"MIT License\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n[`v2` docs](https://github.com/elrumordelaluz/svgson/tree/v2)\n\n## Install\n\n```bash\nyarn add svgson\n```\n\n## Usage\n\n```js\nconst { parse, stringify } = require('svgson')\n\n// ----------------------------\n// Convert SVG to JSON AST\n// ----------------------------\nparse(`\n  \u003csvg\u003e\n    \u003cline\n      stroke= \"#bada55\"\n      stroke-width= \"2\"\n      stroke-linecap= \"round\"\n      x1= \"70\"\n      y1= \"80\"\n      x2= \"250\"\n      y2= \"150\"\u003e\n    \u003c/line\u003e\n  \u003c/svg\u003e`).then((json) =\u003e {\n  console.log(JSON.stringify(json, null, 2))\n  /*\n    {\n      name: 'svg',\n      type: 'element',\n      value: '',\n      attributes: {},\n      parent: null,\n      children: [\n        {\n          name: 'line',\n          type: 'element',\n          value: '',\n          attributes: {\n            stroke: '#bada55',\n            'stroke-width': '2',\n            'stroke-linecap': 'round',\n            x1: '70',\n            y1: '80',\n            x2: '250',\n            y2: '150'\n          },\n          parent: null,\n          children: []\n        }\n      ]\n    }\n  */\n\n  // -------------------------------\n  // Convert JSON AST back to SVG\n  // -------------------------------\n  const mysvg = stringify(json)\n  /* returns the SVG as string */\n})\n```\n\n\u003cp\u003e\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ccode\u003eumd\u003c/code\u003e usage\u003c/summary\u003e\n\u003cp\u003e\n      \u003cpre lang=js\u003e\nconst svgson = require('svgson')\nsvgson\n  .parse(\n    `\u0026lt;svg\u0026gt;\n      \u0026lt;line\n        stroke= \"#bada55\"\n        stroke-width= \"2\"\n        stroke-linecap= \"round\"\n        x1= \"70\"\n        y1= \"80\"\n        x2= \"250\"\n        y2= \"150\"\u0026gt;\n      \u0026lt;/line\u0026gt;\n    \u0026lt;/svg\u0026gt;`\n  )\n  .then(function(json) {\n    console.log(JSON.stringify(json, null, 2)\n  )\n\u0026nbsp;\nmysvg = svgson.stringify(json)\n  \u003c/pre\u003e\n\u003c/p\u003e\n\u003c/details\u003e\n\u003c/p\u003e\n\nTest in browser [here](https://codepen.io/elrumordelaluz/full/XBKedz/)\n\n# API\n\n## svgson.parse\n\n```js\nsvgson.parse(input[, options])\n```\n\nReturns: `Promise`\n\n- **`input`**\n\n  Type: `String`\n\n- **`options.transformNode`**\n\n  Function to apply on each node when parsing, useful when need to reshape nodes or set default attributes.\n\n  Type: `Function` that returns the node\n\n  Default:\n\n  ```js\n  function(node){\n    return node\n  }\n  ```\n\n- **`options.camelcase`**\n\n  Apply `camelCase` into attributes\n\n  Type: `Boolean`\n\n  Default: `false`\n\n## svgson.parseSync\n\n\u003e Added in `3.1.0`\n\n```js\nsvgson.parseSync(input[, options])\n```\n\nThis 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`.\n\nReturns: `Object` `[Object]`\n\n## svgson.stringify\n\n```js\nsvg = svgson.stringify(ast[, options])\n```\n\nReturns: `String`\n\n- **`ast`**\n\n  `svgson` parsed result.\n\n  Type: `Object` `[Object]`\n\n- **`options.transformAttr`**\n\n  Function to apply on each attribute when stringifying.\n\n  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.\n\n  Default:\n\n  ```js\n  function(key, value, escape) {\n    return `${key}=\"${escape(value)}\"`\n  }\n  ```\n\n- **`options.transformNode`**\n\nFunction to apply on each node when stringifying, useful when need to reshape nodes or change/update values.\n\nType: `Function` that returns the node\n\nDefault:\n\n```js\nfunction(node){\n  return node\n}\n```\n\n- **`options.selfClose`**\n\n  Type: `Boolean`\n\n  Default: `true`\n\n- **Pretty Printing**\n\n  In order to generate pretty formatted SVG output, use [`pretty` npm module](https://www.npmjs.com/package/pretty):\n\n  ```js\n  pretty = require('pretty')\n  formatted = pretty(svg)\n  ```\n\n# Related\n\n[svgson-cli](https://github.com/elrumordelaluz/svgson-cli) Transform SVG into `Object` from the Command Line\n\n[element-to-path](https://github.com/elrumordelaluz/element-to-path) Convert SVG element into `path`\n\n[path-that-svg](https://github.com/elrumordelaluz/path-that-svg) Convert entire SVG with `path`\n\n[svg-path-tools](https://github.com/elrumordelaluz/svg-path-tools) Tools to manipulate SVG `path` (d)\n\n## License\n\nMIT © [Lionel T](https://lionel.tzatzk.in)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felrumordelaluz%2Fsvgson","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Felrumordelaluz%2Fsvgson","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felrumordelaluz%2Fsvgson/lists"}