# svg-highlight

> A tiny js tool to highlight an SVG element.

Latest version **1.0.2** (published 2021-07-12) · ISC license · 0 weekly downloads

## Install

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

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2021-07-12 |
| First published | 2021-07-09 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 5.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Robin Simonklein |
| Maintainers | rsimonklein |
| Keywords | svg, hightlight, svg-hightlight, dom |

## Links

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

## Alternatives

- [babylon](https://npm.io/package/babylon.md) — 5.1M weekly downloads
- [csscolorparser](https://npm.io/package/csscolorparser.md) — 3.7M weekly downloads
- [expr-eval-fork](https://npm.io/package/expr-eval-fork.md) — 1.5M weekly downloads
- [@leeoniya/ufuzzy](https://npm.io/package/@leeoniya/ufuzzy.md) — 247.7K weekly downloads
- [xml-parser](https://npm.io/package/xml-parser.md) — 78.4K weekly downloads

## Recent versions

- 1.0.2 (latest) — 2021-07-12
- 1.0.1 — 2021-07-09
- 1.0.0 — 2021-07-09

## README

# svg-highlight
![Build](https://img.shields.io/github/workflow/status/robinsimonklein/svg-highlight/Quality)
[![Version](https://img.shields.io/npm/v/svg-highlight)](https://www.npmjs.com/package/svg-highlight)
[![Size](https://img.shields.io/bundlephobia/min/svg-highlight)](https://bundlephobia.com/package/svg-highlight)
[![Issues](https://img.shields.io/github/issues/robinsimonklein/svg-highlight)](https://github.com/robinsimonklein/svg-highlight/issues)
[![Licence](https://img.shields.io/github/license/robinsimonklein/svg-highlight)](https://github.com/robinsimonklein/svg-highlight/blob/main/LICENSE)

A tiny js tool to highlight an SVG element, that acts like a `z-index: +1`.

**Why ?**<br>
Since SVG uses the order of DOM elements during the drawing stage, those at the same level overlap. 
It can be used i.e. to show complete stroke of an highlighted element.

## ⚙️ Installation
Using npm :
```shell
npm install svg-highlight
```
Using yarn :
```shell
yarn add svg-highlight
```

## ✨ Usage

```javascript
import svgHighlight from "svg-highlight";

const yourSvgElement = document.querySelector('.your-svg-element');
svgHighlight(yourSvgElement);
```

### Options
You can pass some options for advanced usage :
```javascript
svgHighlight(yourSvgElement, {
    // The class you want to use one the highlighted element.
    // (default: 'svg-highlight')
    customClass: 'my-highlighted-class'
})
```

## 👨‍💻 Credits

© [Robin Simonklein](https://robinsimonklein.com)

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