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.