https://github.com/danmarshall/svg-path-outline

Create an outline surrounding an SVG path
https://github.com/danmarshall/svg-path-outline

drawing maker outline svg svg-path

Last synced: about 2 months ago
JSON representation

Create an outline surrounding an SVG path

• Host: GitHub
• URL: https://github.com/danmarshall/svg-path-outline
• Owner: danmarshall
• License: apache-2.0
• Created: 2017-01-15T19:05:52.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2024-02-20T21:24:13.000Z (10 months ago)
• Last Synced: 2024-09-03T14:48:07.330Z (4 months ago)
• Topics: drawing, maker, outline, svg, svg-path
• Language: HTML
• Homepage: https://danmarshall.github.io/svg-path-outline/browser
• Size: 104 KB
• Stars: 65
• Watchers: 5
• Forks: 8
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# svg-path-outline

Create an outline surrounding an SVG path

![Image of example outlines](example.png)

A stroke is typically used to outline an SVG element. Use this package if you need an actual SVG path instead. When corners are outlined, you have the option of specifying the style of joint: round, square, or beveled. 

Live demo: https://danmarshall.github.io/svg-path-outline/browser

## Installation

### Node

```

npm install svg-path-outline --save

```

### Browser

```html

```

## Usage

```js

var spo = require('svg-path-outline');

var outline = spo(svgData, distance, options);

```

## Parameters

### svgData

Input is a string of either SVG `path` data, or point coordinates from SVG `polyline` or `polygon`.

### distance

Numeric distance to offset the outline.

### options

Object with these optional properties:

| option | type | default | description |

|---|---|---|---|

| joints | number | 0 | 0 - round joints
1 - miter
2 - bevel |

| bezierAccuracy | number | 0.5 | Distance of accuracy for Bezier curves. A lower number is more accurate but requires more computation. Using zero is not recommended as it may never finish computing. This number is relative to the unit system of your SVG; so if you are rendering pixels, then 0.5 is accurate to half a pixel. |

| inside | boolean | false | Add offset lines on the inside of the shape |

| outside | boolean | true | Add offset lines on the outside of the shape |

| tagName | string | 'path' | SVG tag name of the type of data:
'path' - SVG path language
'polygon' - point coordinates, closed shape
'polyline' - point coordinates, open shape |

### return value

Output is a string of SVG `path` data.

## Examples

Simple example in JavaScript:

```js

var spo = require('svg-path-outline');

var svgData = "M 95 35 L 59 35 L 48 0 L 36 35 L 0 35 L 29 56 L 18 90 L 48 69 L 77 90 L 66 56 Z";

var outline = spo(svgData, 10);

```

Example in HTML:

```html

 

 var spo = require('svg-path-outline');

 var starPath = document.querySelector('#star path');

 var d = starPath.getAttribute('d');

 var outline = spo(d, 10);

 starPath.setAttribute('d', d + outline);

```

## License

Apache 2.0