# @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.

Latest version **0.2.0** (published 2025-11-02) · MPL-2.0 license · 0 weekly downloads

## Install

```sh
npm install @svg-fns/svg2img
pnpm add @svg-fns/svg2img
yarn add @svg-fns/svg2img
bun add @svg-fns/svg2img
```

## Health

**Score 55/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2025-11-02 |
| First published | 2025-09-25 |
| Weekly downloads | 0 |
| License | MPL-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 53.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Mayank Kumar Chaudhari |
| Maintainers | mayank1513 |
| Keywords | svg, svg convert, svg base64, svg blob, svg datauri, svg rasterize, svg to image, svg export, svg utils, browser, nodejs, utilities, svg-fns, Customizable, Cutting-edge, Compatibility, Frontend development, UI components, Progressive, Web development, Modern, Seamless integration, mayank1513 |

## Links

- npm: https://www.npmjs.com/package/@svg-fns/svg2img
- Repository: https://github.com/svg-fns/svg-fns
- Homepage: https://github.com/svg-fns/svg-fns/tree/main/packages/convert/#readme
- Issues: https://github.com/svg-fns/svg-fns/issues
- Funding: https://github.com/sponsors/svg-fns
- npm.io page: https://npm.io/package/@svg-fns/svg2img

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@progress/kendo-vue-listbox](https://npm.io/package/@progress/kendo-vue-listbox.md) — 932 weekly downloads

## Recent versions

- 0.2.0 (latest) — 2025-11-02
- 0.1.0 — 2025-09-28
- 0.0.0 — 2025-09-25

## README

# @svg-fns/svg2img <img src="https://raw.githubusercontent.com/mayank1513/mayank1513/main/popper.png" style="height: 40px"/>

[![test](https://github.com/svg-fns/svg-fns/actions/workflows/test.yml/badge.svg)](https://github.com/svg-fns/svg-fns/actions/workflows/test.yml)
[![codecov](https://codecov.io/gh/svg-fns/svg-fns/graph/badge.svg)](https://codecov.io/gh/svg-fns/svg-fns)
[![Version](https://img.shields.io/npm/v/@svg-fns/svg2img.svg?colorB=green)](https://www.npmjs.com/package/@svg-fns/svg2img)
[![Downloads](https://img.jsdelivr.com/img.shields.io/npm/d18m/@svg-fns/svg2img.svg)](https://www.npmjs.com/package/@svg-fns/svg2img)
![npm bundle size](https://img.shields.io/bundlephobia/minzip/@svg-fns/svg2img)

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

---

## ✨ Overview

`@svg-fns/svg2img` 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

```ts
import { svgToDataUrl } from "@svg-fns/svg2img";

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

```sh
# Browser or universal usage
pnpm add @svg-fns/svg2img
npm install @svg-fns/svg2img
yarn add @svg-fns/svg2img
```

👉 **For Node.js** (Buffer conversion), install [sharp](https://github.com/lovell/sharp):

```sh
pnpm add sharp
```

---

## 🔑 Core API

### Browser

- **`svgToBlob(svg, options)`** → `Blob`
- **`svgToDataUrl(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

```ts
import { svgToBlob } from "@svg-fns/svg2img";

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

```ts
import { svgToBuffer } from "@svg-fns/svg2img";
import { writeFile } from "fs/promises";

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

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

---

## ⚙️ Options

```ts
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](https://github.com/svg-fns/svg-fns/issues)
- [Submit a PR](https://github.com/svg-fns/svg-fns/pulls)

---

## ❤️ Sponsor

If `@svg-fns/svg2img` saves you time, consider [sponsoring](https://github.com/sponsors/mayank1513).
Your support fuels maintenance, features & community growth.

---

## License

This library is licensed under the MPL-2.0 open-source license.

> <img src="https://raw.githubusercontent.com/mayank1513/mayank1513/main/popper.png" style="height: 20px"/> Please enroll in [our courses](https://mayank-chaudhari.vercel.app/courses) or [sponsor](https://github.com/sponsors/mayank1513) our work.

<hr />

<p align="center">
  with 💖 by <a href="https://mayank-chaudhari.vercel.app" target="_blank">Mayank Kumar Chaudhari</a>
</p>

---
_Source: https://npm.io/package/@svg-fns/svg2img · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._