{"id":13748,"library":"path-data-parser","title":"SVG Path Data Parser","description":"path-data-parser is a lightweight and tree-shakable JavaScript library designed for parsing and manipulating SVG path data strings. It currently stands at version 0.1.0, indicating a stable but early-stage release, likely following an 'as-needed' or infrequent release cadence given its focused utility. Its key differentiators include its small footprint and a direct API offering four core functions: `parsePath` for converting SVG path strings into an array of segment objects, `serialize` for converting segment arrays back into path strings, `absolutize` for transforming relative path commands to absolute ones, and `normalize` for simplifying path segments to only M, L, C, and Z commands. This normalization is particularly useful for rendering SVG paths on non-SVG graphics platforms like Canvas, providing a consistent data structure for further processing.","status":"active","version":"0.1.0","language":"javascript","source_language":"en","source_url":"https://github.com/pshihn/path-data-parser","tags":["javascript","svg path parser","SVG","path parser","SVGPATH","pathdata","svg parser","typescript"],"install":[{"cmd":"npm install path-data-parser","lang":"bash","label":"npm"},{"cmd":"yarn add path-data-parser","lang":"bash","label":"yarn"},{"cmd":"pnpm add path-data-parser","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The package is shipped as ES6 modules only, so CommonJS require() will not work directly.","wrong":"const parsePath = require('path-data-parser').parsePath;","symbol":"parsePath","correct":"import { parsePath } from 'path-data-parser';"},{"note":"Use ES module import syntax for all exports.","wrong":"const serialize = require('path-data-parser').serialize;","symbol":"serialize","correct":"import { serialize } from 'path-data-parser';"},{"note":"All functions are named exports.","wrong":"const absolutize = require('path-data-parser').absolutize;","symbol":"absolutize","correct":"import { absolutize } from 'path-data-parser';"},{"note":"Ensure your environment supports ES modules (e.g., 'type': 'module' in package.json for Node.js).","wrong":"const normalize = require('path-data-parser').normalize;","symbol":"normalize","correct":"import { normalize } from 'path-data-parser';"}],"quickstart":{"code":"import { parsePath, serialize, absolutize, normalize } from 'path-data-parser';\n\n// Type definition for a segment, inferred from README\ntype Segment = { key: string; data: number[]; };\n\n// Example 1: Basic parsing\nconst pathString1 = 'M10 10 h 80 v 80 h -80 C Z';\nconst segments1: Segment[] = parsePath(pathString1);\nconsole.log('Parsed segments 1:', segments1);\n// Expected output: [{ key: 'M', data: [10, 10] }, { key: 'h', data: [80] }, ...]\n\n// Example 2: Absolutize and serialize\nconst pathString2 = 'M10 10 h 80 v 80 h -80 Z';\nconst segments2: Segment[] = parsePath(pathString2);\nconst absoluteSegments: Segment[] = absolutize(segments2);\nconst outputPath: string = serialize(absoluteSegments);\nconsole.log('Absolute and serialized path:', outputPath);\n// Expected output: M 10 10 H 90 V 90 H 10 Z\n\n// Example 3: Normalize absolute segments\nconst pathString3 = ' M 10 80 Q 52.5 10, 95 80 T 180 80';\nconst segments3: Segment[] = parsePath(pathString3);\nconst absoluteSegments3: Segment[] = absolutize(segments3);\nconst normalizedSegments: Segment[] = normalize(absoluteSegments3);\nconsole.log('Normalized path segments:', normalizedSegments);\n// Expected output: [{ key: 'M', data: [10, 80] }, { key: 'C', data: [38.33, 33.33, 66.67, 33.33, 95, 80] }, ...]\n\nconsole.log('All operations complete.');","lang":"typescript","description":"Demonstrates parsing, absolutizing, serializing, and normalizing SVG path data. It shows how to convert a path string to segments, modify them (e.g., to absolute coordinates), and convert them back to a string, or simplify them to M, L, C, Z commands for other graphics contexts."},"warnings":[{"fix":"Use ES module import syntax (`import { ... } from 'path-data-parser'`) and ensure your project or runtime environment (e.g., Node.js with 'type': 'module' in package.json, or a bundler like webpack/Rollup) is configured for ES modules.","message":"The library is shipped exclusively as ES6 modules. Direct CommonJS 'require()' statements will fail in environments not configured to handle ESM.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Review release notes carefully when upgrading between 0.x.x versions, as minor versions might not strictly adhere to semantic versioning until 1.0.0.","message":"As a 0.1.0 release, while functional, the API might undergo minor breaking changes in future 0.x.x versions before a 1.0.0 stable release.","severity":"gotcha","affected_versions":"0.x.x"},{"fix":"Ensure that input path data strings conform to the SVG Path Data specification (e.g., correct command syntax, valid number sequences). Pre-validate user-provided path data if necessary.","message":"The parser expects valid SVG path data strings. Malformed input may lead to unexpected parsing results or errors, as extensive input validation might not be present due to the library's focus on tiny size.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"search_vec":"'0.1.0':32 'absolut':91,98 'api':65 'array':78,86 'as-need':44 'back':87 'c':110 'cadenc':50 'canva':130 'command':96,113 'consist':133 'convert':72,84 'core':68 'current':28 'data':3,7,25,134 'design':18 'differenti':57 'direct':64 'earli':38 'early-stag':37 'focus':53 'follow':42 'footprint':61 'four':67 'function':69 'given':51 'graphic':127 'includ':58 'indic':33 'infrequ':48 'javascript':16,139 'key':56 'l':109 'librari':17 'lightweight':11 'like':41,129 'm':108 'manipul':22 'need':46 'non':125 'non-svg':124 'normal':101,115 'object':81 'offer':66 'one':99 'pars':20 'parsepath':70 'parser':4,8,142,145,149 'particular':117 'path':2,6,24,74,89,95,104,122,141,144 'path-data-pars':5 'pathdata':147 'platform':128 'process':138 'provid':131 'relat':94 'releas':40,49 'render':120 'segment':80,85,105 'serial':82 'shakabl':15 'simplifi':103 'small':60 'stabl':35 'stage':39 'stand':29 'string':26,75,90 'structur':135 'svg':1,23,73,121,126,140,143,148 'svgpath':146 'transform':93 'tree':14 'tree-shak':13 'typescript':150 'use':118 'util':54 'version':31 'z':112","created_at":"2026-04-20T01:56:06.821842+00:00","updated_at":"2026-04-20T01:56:06.821842+00:00","problems":[{"fix":"Ensure your Node.js project's `package.json` contains `\"type\": \"module\"` or use a bundler (like Webpack or Rollup) to transpile your code if targeting a CommonJS environment.","cause":"Attempting to use ES module import syntax (`import`) in a CommonJS environment without proper configuration.","error":"SyntaxError: Cannot use import statement outside a module"},{"fix":"The library is ES module only. Use `import { parsePath } from 'path-data-parser';` in a properly configured ES module context. Do not use `require()`.","cause":"Incorrectly attempting to access named exports from a CommonJS `require()` call, or running the code in a non-ESM environment when the library is ESM-only.","error":"TypeError: parsePath is not a function"},{"fix":"Carefully review the SVG path data string to ensure it strictly follows the SVG Path Data specification. Validate inputs from external sources before passing them to the parser.","cause":"The input SVG path string contains malformed data, such as an incorrect number of arguments for a command, or unsupported/invalid characters.","error":"Error: Invalid SVG path segment detected"}],"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/pshihn/path-data-parser","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/path-data-parser","openapi_spec":null,"status_page":null,"smithery":null,"categories":["serialization"],"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}}