Package Exports

svg-points

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (svg-points) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

SVG points

A specification for storing SVG shape data in Javascript.

Best paired with the classic points library for powerful shape manipulation.

If you are looking to convert a SVG DOM node directly to SVG points, then check out the plainShapeObject function of Wilderness DOM node.

2.6kb gzipped.

Example shape

{
  type: 'circle',
  cx: 50,
  cy: 50,
  r: 20
}

Functions

toPoints – converts an SVG shape object to a points array
toPath – converts an SVG shape object or a points array to an SVG path d attribute string.
valid – checks an SVG shape object is valid

Specification

A SVG shape is an object that includes a type property that can take one of the following strings.

circle
ellipse
line
path
polygon
polyline
rect
g

It also maps all the other required SVG attributes for that particular shape to object properties.

Shape types

circle

{
  type: 'circle',
  cx: 50,
  cy: 50,
  r: 20
}

ellipse

{
  type: 'ellipse',
  cx: 100,
  cy: 300,
  rx: 65,
  ry: 120
}

line

{
  type: 'line',
  x1: 10,
  x2: 50,
  y1: 70,
  y2: 200
}

path

{
  type: 'path',
  d: 'M20,20h50v20A2,2,0,0,1,80,35L90,30H50V50a5,5,45,1,0-5-10l-5-10Z'
}

polygon

{
  type: 'polygon',
  points: '20,30 50,90 20,90 50,30'
}

polyline

{
  type: 'polyline',
  points: '20,30 50,90 20,90 50,30'
}

rect

{
  type: 'rect',
  height: 20,
  width: 50,
  x: 10,
  y: 10,
  rx: 2,
  ry: 2
}

The properties rx and ry are optional and if missing are assumed to be 0.

g

{
  type: 'g',
  shapes: [
    {
      type: 'circle',
      cx: 50,
      cy: 50,
      r: 20
    },
    {
      type: 'line',
      x1: 10,
      x2: 50,
      y1: 70,
      y2: 200
    }
  ]
}

Installation

npm install svg-points

Usage

toPoints

import { toPoints } from 'svg-points'

const circle = {
  type: 'circle',
  cx: 50,
  cy: 50,
  r: 20
}

const points = toPoints(circle)

console.log(points)

// [
//   { x: 50, y: 30, moveTo: true },
//   { x: 50, y: 70, curve: { type: 'arc', rx: 20, ry: 20, sweepFlag: 1 } },
//   { x: 50, y: 30, curve: { type: 'arc', rx: 20, ry: 20, sweepFlag: 1 } }
// ]

Takes an SVG shape object as the only argument, and returns a new points array.

If passing in a group shape object then returns an array of points arrays.

toPath

import { toPath } from 'svg-points'

const circle = {
  type: 'circle',
  cx: 50,
  cy: 50,
  r: 20
}

const d = toPath(circle)

console.log(d)

// 'M50,30A20,20,0,0,1,50,70A20,20,0,0,1,50,30Z'

Takes either an SVG shape object, or a points array, and returns a SVG path d attribute string.

If passing in a group shape object, or an array of points arrays then returns an array of SVG path d attribute strings.

valid

import { valid } from 'svg-points'

const ellipse = {
  type: 'ellipse',
  cy: 50,
  rx: 5,
  ry: 10
}

const { errors } = valid(ellipse)

console.log(errors)

// [ 'cx prop is required on a ellipse' ]

CommonJS

This is how you get to the good stuff if you're using require.

const SVGPoints = require('svg-points')
const toPoints = SVGPoints.toPoints
const toPath = SVGPoints.toPath

UMD

And if you just want to smash in a Javascript file you're also covered. Drop this in place ...

https://unpkg.com/svg-points/dist/svg-points.min.js

Then access it on the SVGPoints global variable.

const toPoints = SVGPoints.toPoints
const toPath = SVGPoints.toPath

Help make this better

Issues and pull requests gratefully received!

I'm also on twitter @colinmeinke.

Thanks 🌟

License

ISC.