# tiny-svg

> A minimal toolbelt for builing fast SVG-based applications

Latest version **4.1.4** (published 2025-12-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install tiny-svg
pnpm add tiny-svg
yarn add tiny-svg
bun add tiny-svg
```

## Health

**Score 65/100 (B)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high maintenance score; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 4.1.4 |
| Published | 2025-12-11 |
| First published | 2014-09-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >= 20 |
| Dependencies | 0 |
| Unpacked size | 56.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 54 |
| Author | Nico Rehwaldt |
| Maintainers | bpmn-io-admin, nikku, barmac, philippfromme, maxtru, skaiir-camunda, vsgoulart, jarekdanielak, simon-steinruecken-camunda |
| Keywords | svg, library, geometry |

## Links

- npm: https://www.npmjs.com/package/tiny-svg
- Repository: https://github.com/bpmn-io/tiny-svg
- Homepage: https://github.com/bpmn-io/tiny-svg#readme
- Issues: https://github.com/bpmn-io/tiny-svg/issues
- npm.io page: https://npm.io/package/tiny-svg

## Recent versions

- 4.1.4 (latest) — 2025-12-11
- 3.1.3 (backports) — 2024-10-01
- 4.1.3 — 2024-10-01
- 3.1.2 — 2024-05-29
- 4.1.2 — 2024-05-29
- 4.1.1 — 2024-05-29
- 3.1.1 — 2024-05-29
- 3.1.0 — 2024-05-29
- 4.1.0 — 2024-05-29
- 4.0.0 — 2024-03-11
- 3.0.1 — 2023-04-04
- 3.0.0 — 2022-09-15
- 2.2.4 — 2022-08-17
- 2.2.3 — 2022-03-09
- 2.2.2 — 2019-09-09
- … 15 more at https://npm.io/package/tiny-svg/versions

## README

# tiny-svg

[![CI](https://github.com/bpmn-io/tiny-svg/actions/workflows/CI.yml/badge.svg)](https://github.com/bpmn-io/tiny-svg/actions/workflows/CI.yml)

__tiny-svg__ is a minimal toolbelt for creating clean SVG applications.


## Features

* no wrapping magic, using native DOM elements instead
* modular, just use what you need
* `2kB` minified + gzipped
* `innerSVG` support
* simplified attribute handling
* geometry helpers

Checkout [provided utilities](./lib).


## Usage

```javascript
import {
  appendTo,
  classes,
  create,
  innerSVG
} from 'tiny-svg';

var container = document.createElement('div');
var element = appendTo(create('svg'), container);

var g = appendTo(create('g'), element);

// add classes, SVG style!
classes(g).add('foo');

var text = `
  <g class="foo bar">
    <rect x="0" y="0" width="0" height="0" rx="50" ry="50"/>
  </g>
`;

// set innerSVG
innerSVG(g, text);
```

Your favourite module bundler should apply tree-shaking to only include the components your application requires. If you're using CommonJS modules give [common-shake](https://github.com/indutny/common-shake) a try.


## Related

* [min-dom](https://github.com/bpmn-io/min-dom) - minimal DOM utility toolbelt
* [min-dash](https://github.com/bpmn-io/min-dash) - minimal lodash inspired utility toolbelt


## License

MIT

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