svg-parser

library2.0.4jsnpmunverified

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.

serialization web-framework

npm install svg-parser

github ↗package ↗

INSTALL

IMPORT

SIG · SVG-PARSER

svg-parser

serializationjavascriptv2.0.4

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

parse

✓ import { parse } from 'svg-parser'

✗ const { parse } = require('svg-parser')

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`.

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.

import { parse } from 'svg-parser'; // An example SVG string with a rectangle, circle, and text const svgString = ` <svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">  <rect x="10" y="10" width="80" height="80" fill="lightblue" stroke="blue" stroke-width="2" />  <circle cx="150" cy="50" r="40" fill="lightgreen" stroke="green" stroke-width="2" />  <text x="100" y="180" font-family="Arial" font-size="20" text-anchor="middle" fill="purple">SVG Parsed!</text> </svg> `; // Parse the SVG string into a HAST object const parsedSvg = parse(svgString); // Log the entire HAST object for inspection console.log('Parsed SVG HAST object:', JSON.stringify(parsedSvg, null, 2)); // Example: Accessing properties of the first element (the <svg> tag) if (parsedSvg.children && parsedSvg.children.length > 0) { const rootSvgElement = parsedSvg.children[0]; if (rootSvgElement.type === 'element' && rootSvgElement.tagName === 'svg') { console.log('Root SVG ViewBox property:', rootSvgElement.properties.viewBox); } }

Debug

Known issues

gotchaMalformed 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.

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.

affects: >=1.0.0

breakingDirect 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.

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`).

affects: >=2.0.0

Errors

Common errors & fixes

TypeError: (0 , svg_parser__WEBPACK_IMPORTED_MODULE_0__.parse) is not a function

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.

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.

ReferenceError: parse is not defined

Attempting to use the `parse` function without correctly importing it first, or incorrect destructuring from a `require` statement in a CommonJS module.

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');`.

Upgrade

Version history

2.0.4latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

8 hits · last 30 days

node

Resources

githubhttps://github.com/Rich-Harris/svg-parser ↗

packagehttps://www.npmjs.com/package/svg-parser ↗