@svg-fns/convert

Convert SVG to PNG, JPEG, WebP, AVIF, Data URL, Blob, or Buffer — isomorphic, tree-shakeable, and typed.

✨ Overview

@svg-fns/convert makes it effortless to transform raw SVG strings into modern image formats.

• Isomorphic → works in Browser (Canvas API) & Node.js (Sharp).
• Tree-shakeable → zero-bloat, minimal runtime.
• Typed → written in TypeScript for DX.
• Modern formats → PNG, JPEG, WebP, AVIF.
• Resizing & fitting → scale, width/height, cover/contain/fill.

🚀 Quick Start

import { svgToDataUrl } from "@svg-fns/convert";

const mySvg = `<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" fill="royalblue" />
</svg>`;

// Convert to PNG Data URL at 200px wide
const pngDataUrl = await svgToDataUrl(mySvg, { format: "png", width: 200 });

const img = document.createElement("img");
img.src = pngDataUrl;
document.body.appendChild(img);

📦 Installation

# Browser or universal usage
pnpm add @svg-fns/convert
npm install @svg-fns/convert
yarn add @svg-fns/convert

👉 For Node.js (Buffer conversion), install sharp:

pnpm add sharp

🔑 Core API

Browser

• svgToBlob(svg, options) → Blob
• svgToDataUrlBrowser(svg, options) → string (data URL)

Node.js

• svgToBuffer(svg, options) → Buffer
• svgToDataUrlNode(svg, options) → string (data URL)

Universal

• svgToDataUrl(svg, options) → auto-detects env → returns Data URL

🎨 Examples

1. Browser → JPEG Blob

import { svgToBlob } from "@svg-fns/convert";

const blob = await svgToBlob(mySvg, {
  format: "jpeg",
  quality: 0.8,
  background: "#fff",
});

const url = URL.createObjectURL(blob);
document.querySelector("img")!.src = url;

2. Node.js → WebP file

import { svgToBuffer } from "@svg-fns/convert";
import { writeFile } from "fs/promises";

const buffer = await svgToBuffer(mySvg, {
  format: "webp",
  width: 500,
  height: 500,
  fit: "contain",
});

await writeFile("output.webp", buffer);

⚙️ Options

interface SvgConversionOptions {
  format?: "png" | "jpeg" | "webp" | "avif" | "svg";
  quality?: number; // 0–1, default: 0.92
  width?: number; // px
  height?: number; // px
  scale?: number; // multiplier, default: 1
  background?: string; // e.g. "#fff"
  fit?: "cover" | "contain" | "fill" | "inside" | "outside";
}

• format → output type (default: "svg").
• fit → how to resize (cover/crop vs contain/letterbox).
• scale → for high-DPI rendering.
• background → useful for JPEG (no alpha).

🤝 Contributing

We welcome issues & PRs!

• Open an Issue
• Submit a PR

❤️ Sponsor

If @svg-fns/convert saves you time, consider sponsoring. Your support fuels maintenance, features & community growth.

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