# @placeos/svg-viewer

> This library is a Typescript for interacting with SVG files

Latest version **1.0.5** (published 2025-07-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install @placeos/svg-viewer
pnpm add @placeos/svg-viewer
yarn add @placeos/svg-viewer
bun add @placeos/svg-viewer
```

## Health

**Score 40/100 (D)** — status: maintenance-mode.

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

Warnings: low downloads.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2025-07-22 |
| First published | 2021-03-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=20 |
| Dependencies | 0 |
| Unpacked size | 939.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Alex Sorafumo |
| Maintainers | yuion, stakach, kimburgess, jeremyw24 |
| Keywords | placeos, browser, api |

## Links

- npm: https://www.npmjs.com/package/@placeos/svg-viewer
- Repository: https://github.com/PlaceOS/svg-viewer
- Homepage: https://github.com/PlaceOS/svg-viewer#readme
- Issues: https://github.com/PlaceOS/svg-viewer/issues
- npm.io page: https://npm.io/package/@placeos/svg-viewer

## Alternatives

- [@opentelemetry/exporter-zipkin](https://npm.io/package/@opentelemetry/exporter-zipkin.md) — 14.8M weekly downloads
- [pusher-js](https://npm.io/package/pusher-js.md) — 2.0M weekly downloads
- [browserify](https://npm.io/package/browserify.md) — 1.7M weekly downloads
- [sqs-consumer](https://npm.io/package/sqs-consumer.md) — 1.7M weekly downloads
- [@sanity/eventsource](https://npm.io/package/@sanity/eventsource.md) — 930.8K weekly downloads

## Recent versions

- 1.0.5 (latest) — 2025-07-22
- 1.0.4 — 2025-07-22
- 1.0.3 — 2025-07-16
- 1.0.2 — 2025-07-09
- 1.0.1 — 2025-07-02
- 1.0.0 — 2025-03-05
- 0.5.4-dev — 2023-09-24
- 0.5.3-dev — 2023-09-07
- 0.5.2-dev — 2023-09-06
- 0.5.1-dev — 2023-09-06
- 0.5.0-dev — 2023-08-30
- 0.4.4-dev — 2023-08-16
- 0.4.3-dev — 2023-06-15
- 0.4.2-dev — 2023-02-04
- 0.4.1-dev — 2022-09-20
- … 51 more at https://npm.io/package/@placeos/svg-viewer/versions

## README

# TypeScript SVG Viewer

This library is a Typescript for interacting with SVG files

## Compilation

You can build the library from source after installing the dependencies with the command

`npm run build`

## Usage

API docs can be found [here](https://placeos.github.io/svg-viewer)

You can install the library with the npm command

`npm install --save-dev @placeos/svg-viewer`

Before using the SVG you'll need to add the global styles it will need to be initialised.

```Typescript
import { applyGlobalStyles } from '@placeos/svg-viewer';

applyGlobalStyles();
```

To create a new viewer use the create method. A DOM element and URL are required to create. 
Available options are the fields defined in the [Viewer](./src/viewer.class.ts) class.

```Typescript
import { createViewer } from '@placeos/svg-viewer';

const element = document.querySelector('#my-svg-container');
const url = `https://my.domain/path/to/file.svg`;

const view_id = createViewer({
    element,
    url
});
```

To update the state of the viewer you can use the update method. Available options are the fields defined in the [Viewer](./src/viewer.class.ts) class.

```Typescript
import { updateViewer } from '@placeos/svg-viewer';

const view_id = 'id-of-my-viewer';
const zoom = 2; // 200% zoom
const center = { x: .75, y: .25 }; // 200% zoom

updateViewer(view_id, {
    zoom,
    center
});
```

When you are finished with the viewer you can cleanup using the remove method.


```Typescript
import { removeViewer } from '@placeos/svg-viewer';

const view_id = 'id-of-my-viewer';

removeViewer(view_id);
```

You can change the styles of the SVG by passing them to the update method.

```Typescript
import { updateViewer } from '@placeos/svg-viewer';

const view_id = 'id-of-my-viewer';
const style = {
    'my-css-seletor': {
        'background-color': 'white'
    }
};

updateViewer(view_id, { styles });
```

You can also listen to user events on the SVG by passing them to the update method.

```Typescript
import { updateViewer } from '@placeos/svg-viewer';

const view_id = 'id-of-my-viewer';
const actions = [
    { id: 'my-element-id', action: 'click', callback: (e) => doSomething() }
];

updateViewer(view_id, { actions });
```

You can also focus on points and elements in the SVG by passing them to the update method.

```Typescript
import { updateViewer } from '@placeos/svg-viewer';

const view_id = 'id-of-my-viewer';
let focus = { 
    location: { x: .6, y: .2 } 
};

updateViewer(view_id, { focus });

focus = { 
    location: 'my-element-id',
    zoom_level: 1.5
};

updateViewer(view_id, { focus });
```

Finally, you can also render HTML element over the SVG by passing them to the update method.


```Typescript
import { updateViewer } from '@placeos/svg-viewer';

const view_id = 'id-of-my-viewer';
const element = document.querySelector('#my-element-id');
const features = [
    { location: 'svg-element-id', content: element }
];

updateViewer(view_id, { features });
```

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