{"id":14082,"library":"svg-parser","title":"SVG Document to HAST Parser","description":"svg-parser is a JavaScript library designed for converting SVG (Scalable Vector Graphics) document strings or fragments into a HAST (Hypertext Abstract Syntax Tree) compliant JavaScript object. This transformation provides a highly structured, JSON-friendly representation of the SVG, enabling programmatic manipulation, analysis, or further transformation within the unified syntax-tree ecosystem. The current stable version, 2.0.4, was last published in early 2020, indicating a maintenance-focused development cycle. It stands out by integrating directly with the HAST specification, making it a suitable choice for projects that already leverage unified or rehype for content processing, offering a consistent AST format across various document types like HTML and SVG. It boasts zero runtime dependencies.","status":"maintenance","version":"2.0.4","language":"javascript","source_language":"en","source_url":"https://github.com/Rich-Harris/svg-parser","tags":["javascript","SVG","parser","JSON","object"],"install":[{"cmd":"npm install svg-parser","lang":"bash","label":"npm"},{"cmd":"yarn add svg-parser","lang":"bash","label":"yarn"},{"cmd":"pnpm add svg-parser","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Primarily designed for ES Modules. While some build tools might transpile, direct CommonJS `require()` might not work in all environments or Node.js versions without explicit configuration. Use named import `parse`.","wrong":"const { parse } = require('svg-parser')","symbol":"parse","correct":"import { parse } from 'svg-parser'"}],"quickstart":{"code":"import { parse } from 'svg-parser';\n\n// An example SVG string with a rectangle, circle, and text\nconst svgString = `\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\tSVG Parsed!\n\t\n`;\n\n// Parse the SVG string into a HAST object\nconst parsedSvg = parse(svgString);\n\n// Log the entire HAST object for inspection\nconsole.log('Parsed SVG HAST object:', JSON.stringify(parsedSvg, null, 2));\n\n// Example: Accessing properties of the first element (the tag)\nif (parsedSvg.children && parsedSvg.children.length > 0) {\n const rootSvgElement = parsedSvg.children[0];\n if (rootSvgElement.type === 'element' && rootSvgElement.tagName === 'svg') {\n console.log('Root SVG ViewBox property:', rootSvgElement.properties.viewBox);\n }\n}","lang":"javascript","description":"This code demonstrates how to parse an SVG string into a HAST object using `svg-parser`, then pretty-prints the result and shows how to access properties of the root SVG element."},"warnings":[{"fix":"Ensure SVG input strictly adheres to W3C SVG specifications. Consider validating SVG strings using dedicated SVG validation tools before feeding them to the parser if robustness is critical.","message":"Malformed SVG input, non-standard attributes, or incorrect XML structure can lead to unexpected HAST output or parsing errors, as the parser strictly adheres to HAST specification for SVG elements.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Always use `import { parse } from 'svg-parser';` for projects using ES Modules. For legacy CommonJS projects, dynamic `await import('svg-parser')` can be used, or consider explicit CommonJS builds if available (though not officially provided for `svg-parser`).","message":"Direct CommonJS `require()` usage for `svg-parser` might fail in modern Node.js environments configured for ES Modules or with bundlers that don't correctly transpile module imports. The library primarily uses ES module syntax in its documentation.","severity":"breaking","affected_versions":">=2.0.0"}],"env_vars":null,"search_vec":"'2.0.4':65 '2020':71 'abstract':28 'across':110 'alreadi':97 'analysi':50 'ast':108 'boast':119 'choic':93 'compliant':31 'consist':107 'content':103 'convert':15 'current':62 'cycl':78 'depend':122 'design':13 'develop':77 'direct':84 'document':2,20,112 'earli':70 'ecosystem':60 'enabl':47 'focus':76 'format':109 'fragment':23 'friend':42 'graphic':19 'hast':4,26,87 'high':38 'html':115 'hypertext':27 'indic':72 'integr':83 'javascript':11,32,123 'json':41,126 'json-friend':40 'last':67 'leverag':98 'librari':12 'like':114 'mainten':75 'maintenance-focus':74 'make':89 'manipul':49 'object':33,127 'offer':105 'parser':5,8,125 'process':104 'programmat':48 'project':95 'provid':36 'publish':68 'rehyp':101 'represent':43 'runtim':121 'scalabl':17 'specif':88 'stabl':63 'stand':80 'string':21 'structur':39 'suitabl':92 'svg':1,7,16,46,117,124 'svg-parser':6 'syntax':29,58 'syntax-tre':57 'transform':35,53 'tree':30,59 'type':113 'unifi':56,99 'various':111 'vector':18 'version':64 'within':54 'zero':120","created_at":"2026-04-20T01:57:50.715895+00:00","updated_at":"2026-04-20T01:57:50.715895+00:00","problems":[{"fix":"Ensure you are using the correct named import: `import { parse } from 'svg-parser';`. If in a CommonJS context that doesn't support ESM, this package might not be directly compatible without bundling/transpilation.","cause":"This error typically occurs in bundled environments (like Webpack or Vite) when attempting to use an incorrect import syntax for a module that exports named functions.","error":"TypeError: (0 , svg_parser__WEBPACK_IMPORTED_MODULE_0__.parse) is not a function"},{"fix":"Add `import { parse } from 'svg-parser';` at the top of your file to import the named export. If in a CommonJS environment, and if the package provides a CJS export, use `const { parse } = require('svg-parser');`.","cause":"Attempting to use the `parse` function without correctly importing it first, or incorrect destructuring from a `require` statement in a CommonJS module.","error":"ReferenceError: parse is not defined"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/Rich-Harris/svg-parser","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/svg-parser","openapi_spec":null,"status_page":null,"smithery":null,"categories":["serialization","web-framework"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-18","install_tag":null}}