danmarshall / svg-path-outline

Create an outline surrounding an SVG path

svg-path-outline

Create an outline surrounding an SVG path

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

<script src="https://pomax.github.io/bezierjs/bezier.js" type="text/javascript"></script>
<script src="https://microsoft.github.io/maker.js/target/js/browser.maker.js" type="text/javascript"></script>
<script src="https://danmarshall.github.io/svg-path-outline/browser/index.js" type="text/javascript"></script>

Usage

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:

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:

<svg id="star" fill="none" stroke="black">
 <path d="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" />
</svg>

<script type="text/javascript">
 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);
</script>

License

Apache 2.0