@svg-fns/io
v1.0.1TypeScript
Simple and fast utilities to parse, serialize, and load SVG strings and elements. Optimized for both browser and Node.js environments.
0/weekUpdated 4 months agoMPL-2.0Unpacked: 966.9 KB
Published by Mayank Kumar Chaudhari
npm install @svg-fns/io@svg-fns/io 
!npm bundle size
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
``ts
import { parseSvg, serializeSvg, loadSvg } from "@svg-fns/io";
// parse SVG safely
const svgEl = parseSvg();
// 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
`bash`
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