{"_id":"svg-bbox-polyfill","_rev":"2-7b276c342ff0cd5324c16a90f8ff980e","name":"svg-bbox-polyfill","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"svg-bbox-polyfill","version":"0.1.0","author":{"name":"FrameMuse"},"license":"MIT","_id":"svg-bbox-polyfill@0.1.0","maintainers":[{"name":"framemuse","email":"minicablestone@gmail.com"}],"homepage":"https://github.com/pinely-international/svg-bbox#readme","bugs":{"url":"https://github.com/pinely-international/svg-bbox/issues"},"dist":{"shasum":"d174f785abb31e94949b54432666163099a9aff6","tarball":"https://registry.npmjs.org/svg-bbox-polyfill/-/svg-bbox-polyfill-0.1.0.tgz","fileCount":21,"integrity":"sha512-0GCgDspBXvXdFxdwHNtO6alxL2RZL+MKT8Y7Q+t63FmkvUnBSl1lKX9AfQRKKreZZDSzB3wTjbTPFJsF+OfQwQ==","signatures":[{"sig":"MEUCIA6gmwcn0Yl6iOIpGLif7TXTelbhXDEi7lqc1jnr9RP9AiEAxHWGVPmbwFkeZze4ZjwB4hiSNHbrwPXkdiNhYlDlmC4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":108761},"main":"build/index.js","type":"module","types":"build/index.d.ts","gitHead":"c705f1d9403eb57a690c9c05c3e56ebd8232c7ec","scripts":{"build":"vite build && bun build:types","build:types":"tsup src/index.ts --outDir build --format esm --dts-only --tsconfig tsconfig.build.json"},"_npmUser":{"name":"framemuse","email":"minicablestone@gmail.com"},"repository":{"url":"git+https://github.com/pinely-international/svg-bbox.git","type":"git"},"_npmVersion":"11.2.0","description":"SVG `getBBox` Polyfill","directories":{},"sideEffects":false,"_nodeVersion":"23.9.0","dependencies":{"svg-path-bbox":"^2.1.0"},"_hasShrinkwrap":false,"devDependencies":{"bun":"^1.2.21","tsup":"^8.5.1","vite":"^7.1.3","eslint":"9.34.0","@types/bun":"^1.2.21","typescript":"^5.9.3","@types/opentype.js":"^1.3.8","@typescript-eslint/parser":"^8.19.0","eslint-plugin-unused-imports":"^4.1.4","vite-plugin-externalize-deps":"^0.10.0","@typescript-eslint/eslint-plugin":"^8.19.0","eslint-plugin-simple-import-sort":"^12.1.1"},"_npmOperationalInternal":{"tmp":"tmp/svg-bbox-polyfill_0.1.0_1766346673659_0.40214935026716536","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"type":"module","name":"svg-bbox-polyfill","version":"0.1.1","description":"SVG `getBBox` Polyfill","keywords":["svg","bbox","polyfill","bounding box","getBBox","dom","no browser","ssr","server side"],"sideEffects":false,"main":"build/index.js","types":"build/index.d.ts","scripts":{"build":"vite build && bun build:types","build:types":"tsup src/index.ts --outDir build --format esm --dts-only --tsconfig tsconfig.build.json"},"dependencies":{"svg-path-bbox":"^2.1.0"},"devDependencies":{"@types/bun":"^1.2.21","@types/opentype.js":"^1.3.8","@typescript-eslint/eslint-plugin":"^8.19.0","@typescript-eslint/parser":"^8.19.0","bun":"^1.2.21","eslint":"9.34.0","eslint-plugin-simple-import-sort":"^12.1.1","eslint-plugin-unused-imports":"^4.1.4","tsup":"^8.5.1","typescript":"^5.9.3","vite":"^7.1.3","vite-plugin-externalize-deps":"^0.10.0"},"homepage":"https://github.com/pinely-international/svg-bbox#readme","bugs":{"url":"https://github.com/pinely-international/svg-bbox/issues"},"repository":{"type":"git","url":"git+https://github.com/pinely-international/svg-bbox.git"},"license":"MIT","author":{"name":"FrameMuse"},"_id":"svg-bbox-polyfill@0.1.1","gitHead":"86c19e543f7ad832ca71672c436601bb4df4bdf5","_nodeVersion":"23.9.0","_npmVersion":"11.2.0","dist":{"integrity":"sha512-TLoYQj7dGKEepq1zXqDBaIWFY8eLELkJ75ayizuYfYKfdTXiMk0i6Rms+ZnquwV75YXFUOXj42YZUaa7DBrbxg==","shasum":"852f92ec0fbe5eabb9a406432867089ed4ac9340","tarball":"https://registry.npmjs.org/svg-bbox-polyfill/-/svg-bbox-polyfill-0.1.1.tgz","fileCount":21,"unpackedSize":115495,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCMqB+X3hFh/aZirSDeutL5yQX3bXS0OEIYvjrqDRfYxAIgTJQXj4bnfcFj7mUau9uarvArTGS9wjtBUA6WkORzT3E="}]},"_npmUser":{"name":"framemuse","email":"minicablestone@gmail.com"},"directories":{},"maintainers":[{"name":"framemuse","email":"minicablestone@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/svg-bbox-polyfill_0.1.1_1766414498811_0.8083891350129637"},"_hasShrinkwrap":false}},"time":{"created":"2025-12-21T19:51:13.658Z","modified":"2025-12-22T14:41:39.159Z","0.1.0":"2025-12-21T19:51:13.816Z","0.1.1":"2025-12-22T14:41:38.977Z"},"bugs":{"url":"https://github.com/pinely-international/svg-bbox/issues"},"author":{"name":"FrameMuse"},"license":"MIT","homepage":"https://github.com/pinely-international/svg-bbox#readme","repository":{"type":"git","url":"git+https://github.com/pinely-international/svg-bbox.git"},"description":"SVG `getBBox` Polyfill","maintainers":[{"name":"framemuse","email":"minicablestone@gmail.com"}],"readme":"# svg-bbox-polyfill\n\nProvides a polyfill for SVG elements in environments where `getBBox` is not available.\n\n<a href=\"https://www.npmjs.com/package/svg-bbox-polyfill\">\n  <img src=\"https://img.shields.io/npm/v/svg-bbox-polyfill?color=007ec6\" />\n  <img alt=\"npm package minimized gzipped size\" src=\"https://img.shields.io/bundlejs/size/svg-bbox-polyfill\">\n</a>\n<a href=\"http://commitizen.github.io/cz-cli/\"><img src=\"https://img.shields.io/badge/commitizen-friendly-brightgreen.svg\" alt=\"Commitizen friendly\" /></a>\n\nProvides a set of utils to calculate the bounding box of SVG paths and shapes, by using `DOMRect`, `DOMMatrix`, `DOMPoint` and pure math calculations.\n\n## Installation\n\nAs this packges only polyfills `getBBox`, it still requires other DOM APIs.\nInstalling [`happy-dom`](https://npmjs.com/package/happy-dom) or [`jsdom`](https://npmjs.com/package/jsdom) is recommended for non-browser environments.\n\n```bash\nnpm i svg-bbox-polyfill happy-dom\n```\n\n### Missing `DOMPoint.prototype.matrixTransform`\n\nIt's also very likely you're missing `DOMPoint.prototype.matrixTransform` (even with `happy-dom`).\nIn that case, you can use `injectDOMPointPolyfill` from this package or any other polyfill.\n\n## Preparation\n\nInject the polyfill for `DOMPoint.prototype.matrixTransform`:\n\n```js\nimport { injectDOMPointPolyfill } from \"svg-bbox-polyfill\"\n\ninjectDOMPointPolyfill(globalThis) // In case `matrixTransform` is missing.\n```\n\nRegister fonts used in SVGs (required for text elements):\n\n```js\nimport opentype from \"opentype.js\"\nimport { SvgBBox } from \"svg-bbox-polyfill\"\n\n// Use `opentype.js` or anything that returns `opentype.Font` interface.\nSvgBBox.fonts[\"Arial\"] = await opentype.load(\"path/to/Arial.ttf\")\nSvgBBox.fonts[\"Times New Roman\"] = opentype.loadSync(\"path/to/TimesNewRoman.ttf\")\n```\n\n## Usage\n\nCompute the bounding box of an SVG element without polyfilling:\n\n```js\nimport { SvgBBox, injectDOMPointPolyfill } from \"svg-bbox-polyfill\"\n\ninjectDOMPointPolyfill(globalThis) // In case `matrixTransform` is missing. Apply before `SvgBBox.compute`.\n\nSvgBBox.compute(svgElement)\n\n// Other utils:\nSvgBBox.computeLine(lineElement)\nSvgBBox.computeRect(rectElement)\nSvgBBox.computeCircle(circleElement)\nSvgBBox.computeEllipse(ellipseElement)\nSvgBBox.computePoly(polyElement)\nSvgBBox.computeFont(fontElement)\nSvgBBox.computeTspan(tspanElement)\nSvgBBox.computeTransformedBBox(lineElement)\nSvgBBox.computeBoundingBox(rect, transform, origin) // Read inline docs for more details.\n```\n\nInject the polyfill for `SVGGraphicsElement` (base class for all SVG elements):\n\n```js\nimport { injectSvgBBoxPolyfill, injectDOMPointPolyfill } from \"svg-bbox-polyfill\"\n\ninjectDOMPointPolyfill(globalThis) // In case `matrixTransform` is missing. Apply before `injectSvgBBoxPolyfill`.\ninjectSvgBBoxPolyfill(globalThis)\n\nsvgElement.getBBox()\n```\n\n## Application\n\nThis polyfill can be used in various scenarios, such as:\n\n- Server-side rendering of SVGs\n- Testing SVG-related code in non-browser environments\n\n### Mermaid Rendering\n\nOne of the main use cases of this polyfill is to enable rendering of Mermaid diagrams in server-side environments **without** tools like Puppeteer or Playwright (`@mermaid-js/mermaid-cli` is also based on Puppeteer).\n\nMermaid relies on `getBBox` to calculate the size and position of SVG elements when rendering diagrams. However, it also relies on other DOM APIs like Canvas, so looks at [mermaid-svg-native](https://npmjs.com/package/mermaid-svg-native) library.\n","readmeFilename":"README.md","keywords":["svg","bbox","polyfill","bounding box","getBBox","dom","no browser","ssr","server side"]}