@svg-fns/io

Feather-light I/O utilities for working with SVGs in browser and Node.js. Minimal, dev-friendly, and universal.

TL;DR 🚀

| Feature | Browser | Node.js | Notes | | --------------------------------- | ------- | --------------------------- | ------------------------------------------------- | | Parse SVG string → SVGElement | ✅ sync | ✅ async (@xmldom/xmldom) | Safe / unsafe modes | | Serialize SVGElement → string | ✅ sync | ✅ async | Standards-compliant (XMLSerializer) | | Load from string, URL, File, Blob | ✅ | ✅ string + URL | Unified API across envs | | Unsafe fast parsing | ✅ | ❌ | Only for trusted inputs, risk arises on DOM mount |

Why @svg-fns/io?

• Feather-light: No dependencies unless in Node.js.
• Universal: Works in browser + Node.
• Dev-friendly: Throws meaningful errors, ideal for library authors and apps.
• Secure: Unsafe mode is optional and clearly documented.
• Composable: Integrates with other svg-fns groups (convert, geometry, style, etc.).
• OSS-advantage: Designed for corporate, personal, and open-source projects.

Features

• parseSvgBrowser(svgString, config?) – sync, safe (DOMParser) or unsafe (innerHTML).
• unsafeParseSvg(svgString, config) – fast, only for trusted inputs.
• parseSvgNode(svgString, config?) – async Node.js parser.
• parseSvg(svgString, config?) – universal wrapper.

• serializeSvgBrowser(svgElement, config?) – sync, standards-compliant.
• serializeSvgNode(svgElement, config?) – async Node.js serializer.
• serializeSvg(svgElement, config?) – universal wrapper.

• loadSvg(input: string | File | Blob | URL, config?) – unified loader.

  • Browser: string, File, Blob, URL
  • Node.js: string, URL (via fetch)

Usage Examples

import { parseSvg, serializeSvg, loadSvg } from "@svg-fns/io";

// parse SVG safely
const svgEl = parseSvg(`<svg><circle cx="5" cy="5" r="5"/></svg>`);

// serialize back to string
const svgString = serializeSvg(svgEl);

// load from URL
const svgFromUrl = await loadSvg("https://example.com/icon.svg");

Browser & Node Compatibility

| Feature | Browser | Node.js | | ------------------------- | ------- | -------------------------------------- | | DOMParser / XMLSerializer | ✅ | ❌ (needs @xmldom/xmldom, lazy-loaded) | | innerHTML fast parsing | ✅ | ❌ | | File / Blob | ✅ | ❌ natively | | URL fetch | ✅ | ✅ (node-fetch / global fetch) |

Security Notes

• Unsafe mode: parsing itself does not execute scripts.
• Risk arises only when the parsed SVG is attached to the DOM.
• Always sanitize untrusted SVGs before mounting in unsafe mode.

Installation

pnpm add @svg-fns/io

or

npm install @svg-fns/io

Configuration (IOConfig)

| Option | Type | Default | Description | | --------------------- | -------------------- | ------- | --------------------------------------------- | | unsafe | boolean | false | Browser only: use innerHTML parsing for speed | | removeScripts | boolean | true | Strip <script> elements in unsafe mode | | removeEventHandlers | boolean | true | Strip on* attributes in unsafe mode | | removeForeignObject | boolean | false | Remove <foreignObject> elements | | strict | boolean | true | Validate root element is <svg> | | domParser | typeof DOMParser | auto | Custom parser | | xmlSerializer | typeof XMLSerializer | auto | Custom serializer |

Contribution & Sponsorship

@svg-fns/io thrives with your feedback, PRs, and sponsorship:

• ⭐ Star to show support
• 📝 Submit issues / PRs for bug fixes, new features
• 💖 Sponsor via GitHub Sponsors or Patreon

We welcome OSS, corporate, and personal project use — MPL 2.0 ensures safe adoption in commercial products.

SEO & AI-Friendly Tips

• Keywords: SVG utilities, SVG parser, SVG serializer, SVG Node.js, feather-light SVG library, universal SVG library.
• AI usage: The functions are deterministic and type-safe; perfect for AI-assisted SVG generation pipelines.

Roadmap / Future Enhancements

• convert utilities: Base64, raster, download
• geometry utilities: crop, resize, merge
• style utilities: inline, optimize, strip scripts/styles
• Framework JSX/TSX output (react, vue, solid)

License

This library is licensed under the MPL-2.0 open-source license.

Please enroll in our courses or sponsor our work.