# @sonnetjs/svg

> sonnetjs/svg is a library for creating SVG elements using a simple and declarative API.

Latest version **0.0.13** (published 2024-12-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install @sonnetjs/svg
pnpm add @sonnetjs/svg
yarn add @sonnetjs/svg
bun add @sonnetjs/svg
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.13 |
| Published | 2024-12-08 |
| First published | 2024-04-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 83.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | htmujahid |
| Maintainers | htmujahid |
| Keywords | sonnetjs, sonnet, web-components, components, web, sonnet-svg, svg, frontend |

## Links

- npm: https://www.npmjs.com/package/@sonnetjs/svg
- Repository: https://github.com/sonnetjs/sonnet-dom
- Homepage: https://github.com/sonnetjs/sonnet-dom/tree/main/packages/sonnet-svg#readme
- Issues: https://github.com/sonnetjs/sonnet-dom/issues
- npm.io page: https://npm.io/package/@sonnetjs/svg

## Dependencies (2)

- [@sonnetjs/dom](https://npm.io/package/@sonnetjs/dom.md) *
- [@sonnetjs/shared](https://npm.io/package/@sonnetjs/shared.md) 0.0.4

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

- 0.0.13 (latest) — 2024-12-08
- 0.0.12 — 2024-10-15
- 0.0.11 — 2024-05-16
- 0.0.10 — 2024-04-28
- 0.0.9 — 2024-04-20
- 0.0.8 — 2024-04-14
- 0.0.7 — 2024-04-14
- 0.0.6 — 2024-04-14
- 0.0.5 — 2024-04-07
- 0.0.4 — 2024-04-07
- 0.0.3 — 2024-04-05
- 0.0.2 — 2024-04-03
- 0.0.1 — 2024-04-03

## README

# sonnetjs/svg

sonnetjs/svg is a library for creating SVG elements using a simple and declarative API.

## Features

- Create SVG elements using a simple and declarative API.
- Set attributes and properties of SVG elements using chainable methods.
- Add children to SVG elements using children method.

## Usage

1. Run the following command to create a new SonnetJS project.

```bash
npx create-sonnet-app@latest
```

2. Change directory to the newly created project.

```bash
cd [my-sonnet-app]
```

3. Install the dependencies

```bash
npm i
```

4. Install sonnetjs/svg

```bash
npm i @sonnetjs/svg
```

5. Start the development server

```bash
npm run dev
```

## Documentation

This is a simple example of how to use sonnetjs/svg to create an SVG element.

```typescript
import { svg, rect } from '@sonnetjs/svg';

const element = svg()
  .width(100)
  .height(100)
  .children(rect().x(10).y(10).width(80).height(80).fill('red'));
```

## License

sonnetjs/svg is licensed under the MIT license.

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