Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@svg-fns/io

svg-fns0MPL-2.01.0.1TypeScript support: included

Simple and fast utilities to parse, serialize, and load SVG strings and elements. Optimized for both browser and Node.js environments.

svg, svg parser, svg io, svg string, svg dom, svg serialization, svg parse, svg load, svg utils, browser, nodejs, utilities, svg-fns, svg-fns-io, Customizable, Cutting-edge, Compatibility, Frontend development, UI components, Progressive, Web development, Modern, Seamless integration, mayank1513

readme

@svg-fns/io

test codecov Version Downloads npm bundle size NPM License

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

<summary>Parsing</summary>
  • 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.
<summary>Serialization</summary>
  • serializeSvgBrowser(svgElement, config?) – sync, standards-compliant.
  • serializeSvgNode(svgElement, config?) – async Node.js serializer.
  • serializeSvg(svgElement, config?) – universal wrapper.
<summary>Loading SVGs</summary>

  • 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