@svg-fns/io

@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

Parsing

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

Serialization

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

Loading SVGs

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

---

with by Mayank Kumar Chaudhari