SVG Fns

Lightweight, tree-shakable utilities for working with SVGs. Inspired by date-fns — small, focused, modular functions.

✨ Why svg-fns?

• Works in browser & Node.js
• Zero dependencies · Fully tree-shakable
• Modular design — import only what you need
• Consistent API across packages
• Perfect for design tools, rendering engines, and build pipelines

📦 Packages

| Package | Description | Badges | | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | @svg-fns/io | Simple and fast utilities to parse, serialize, and load SVG strings and elements. Optimized for both browser and Node.js environments. | | | @svg-fns/info | Lightweight, tree-shakeable utilities to extract structured information (dimensions, aspect ratio, bounding boxes, colors) from SVG elements. Works in both browser and Node.js. | | | @svg-fns/svg2img | Utility functions to convert SVGs into different formats (Base64, Blob, Data URI, raster images). Works in client and server with optimal performance. | | | @svg-fns/convert | Utility functions to convert SVGs into different formats (Base64, Blob, Data URI, raster images). Works in client and server with optimal performance. (Alias / older naming) | | | @svg-fns/layout | Lightweight SVG layout utilities — viewBox parsing, scaling, cropping, and trimming for precise content-aware rendering. | | | @svg-fns/math | Core SVG math utilities: 2D affine transforms, geometry helpers, and path helpers for high-quality SVG manipulation. | | | @svg-fns/types | Shared TypeScript type definitions for SVG-FNS — Rect, Point, Matrix, Padding, and other geometry/layout primitives. | | | @svg-fns/utils | Shared low-level utility helpers for DOM, string parsing, numeric validation, and safe SVG runtime checks used internally across svg-fns packages. | |

🚀 Quick Start

Install the umbrella package:

npm install svg-fns

Or install only what you need:

npm install @svg-fns/io
npm install @svg-fns/info
npm install @svg-fns/svg2img

🛠️ Usage

import { parseSvg, getSvgDimensions, svgToPng } from "svg-fns";

const svgEl = parseSvg("<svg width='100' height='50'/>");

console.log(getSvgDimensions(svgEl));
// → { width: 100, height: 50 }

const pngBlob = await svgToPng(svgEl, { scale: 2 });

📚 Roadmap

• @svg-fns/geometry → vector math, transforms, bounding boxes
• @svg-fns/path → path manipulation (split, join, simplify)
• @svg-fns/text → text measurement & layout
• More coming…

🛠️ Contributing

Contributions welcome 🎉

• Open an issue for bugs/ideas
• PRs should include tests + docs
• Follow our contributing guide

License

MPL-2.0 © Mayank Kumar Chaudhari

Please enroll in our courses or sponsor our work.