# @react-pdf/svg

> SVG parsing for react-pdf

Latest version **1.1.1** (published 2026-08-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install @react-pdf/svg
pnpm add @react-pdf/svg
yarn add @react-pdf/svg
bun add @react-pdf/svg
```

## Health

**Score 80/100 (A)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score; high quality score; popular repo.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 1.1.1 |
| Published | 2026-08-23 |
| First published | 2026-04-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 9.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 16813 |
| Author | Diego Muracciole |
| Maintainers | diegomura |

## Links

- npm: https://www.npmjs.com/package/@react-pdf/svg
- Repository: https://github.com/diegomura/react-pdf
- Homepage: https://github.com/diegomura/react-pdf#readme
- Issues: https://github.com/diegomura/react-pdf/issues
- npm.io page: https://npm.io/package/@react-pdf/svg

## Dependencies (1)

- [@react-pdf/primitives](https://npm.io/package/@react-pdf/primitives.md) ^4.4.0

## Recent versions

- 1.1.1 (latest) — 2026-08-23
- 1.1.0 — 2026-04-15

## README

<p align="center">
  <img src="https://user-images.githubusercontent.com/5600341/27505816-c8bc37aa-587f-11e7-9a86-08a2d081a8b9.png" height="280px">
  <p align="center">React renderer for creating PDF files on the browser and server<p>
  <p align="center">
    <a href="https://www.npmjs.com/package/@react-pdf/renderer">
      <img src="https://img.shields.io/npm/v/@react-pdf/renderer?style=flat&colorA=000000&colorB=000000" />
    </a>
     <a href="https://opencollective.com/react-pdf">
      <img src="https://img.shields.io/opencollective/all/react-pdf?style=flat&colorA=000000&colorB=000000" />
    </a>
    <a href="https://github.com/diegomura/react-pdf/blob/master/LICENSE">
      <img src="https://img.shields.io/github/license/diegomura/react-pdf?style=flat&colorA=000000&colorB=000000" />
    </a>
    <a href="https://blockchain.com/btc/address/bc1qj223udztpmt5dck46dw0yap08yum63ht56h90v">
      <img src="https://img.shields.io/badge/BTC-f5f5f5?style=flat&colorA=000000&colorB=000000" />
    </a>
     <a href="https://blockchain.com/eth/address/0x4e1DB76bA0858BbCAa4DD804418D0D9EcF77B1cC">
      <img src="https://img.shields.io/badge/ETH-f5f5f5?style=flat&colorA=000000&colorB=000000" />
    </a>
  </p>
</p>

# @react-pdf/svg

SVG string parser for [react-pdf](https://github.com/diegomura/react-pdf).

Parses SVG markup into a tree of nodes compatible with react-pdf's SVG primitives.

## Installation

```bash
npm install @react-pdf/svg
# or
yarn add @react-pdf/svg
```

## Usage

```js
import { parseSvg } from '@react-pdf/svg';

const tree = parseSvg(
  '<svg viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="red" /></svg>',
);
```

Returns an `SvgNode` tree:

```js
{
  type: 'SVG',
  props: { viewBox: '0 0 100 100' },
  children: [
    {
      type: 'CIRCLE',
      props: { cx: '50', cy: '50', r: '40', fill: 'red' },
      children: []
    }
  ]
}
```

## Supported elements

`svg`, `g`, `path`, `rect`, `circle`, `ellipse`, `line`, `polyline`, `polygon`, `text`, `tspan`, `defs`, `clipPath`, `linearGradient`, `radialGradient`, `stop`, `image`

## API

### `parseSvg(svgString: string): SvgNode`

Parses an SVG string and returns the root `SvgNode`. Attributes are converted to camelCase and tag names are mapped to react-pdf primitive types. Unsupported elements are skipped with a console warning.

### `SvgNode`

```ts
interface SvgNode {
  type: string;
  props: Record<string, unknown>;
  children?: SvgNode[];
}
```

## License

MIT

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