colinmeinke/svg-points

A specification for storing SVG shape data in Javascript, and some handy conversion functions

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.

svg-points's Issues

point index off in toPoints.js?

hi @colinmeinke,
thank you for creating this library.

i noticed that some of the code in this repo is also used in the wilderness repo (please correct me if i'm wrong).

when trying to display and animate some imported svg paths with wilderness, i'm getting an error in the toPoints (line 161) function: Cannot read property 'xAxisRotation' of undefined.

i'm not 100% certain, but i think the code in this line is referring to the wrong point index. i guess it should refer to the recently added point. instead of points[ i ][ 'curve' ][ k ] i think it should be points[ points.length - 1 ][ 'curve' ][ k ] (or something like this)

again i'm not 100% sure it's just observation, so i'm filing this as an issue, not a pull request.

ES6 import not works for other module made by me

Hi @colinmeinke.
I have issue with imports for my modules. I am using for svg-points imports and works best, but for my modules not. There some configs?

Require (nodejs require) works for both module.

I am too configured like your, but not works.

Handle path description seperation on - and .

M1,2L3-4 or M1,2L3.5 both seem to be valid.

Should there be a function to create a shape object from a dom node?

Putting this here for future consideration because of a discussion over at colinmeinke/points#15

Circle should be drawn clockwise

This will be a breaking change

Multi moveto bug: Complex shapes

I dont know about this bug more, but enough for show to you what i mean.

SVG Points and Points (wrongly typed Wilderness): http://codepen.io/dalisoft/pen/egdPZX

Multiple coords incorrect for moveTo command

Hi @colinmeinke
Thanks for this library, amazing, unreplaceable stuff in points of SVG Data

There i'm explain as i can.
Note: This case very rare, but can be.

import { toPoints } from 'svg-points'

let d = 'M10 10 30 10 L40 10'
let points = toPoints({type:"path", d})

console.log(points)

[
{x: 10, y: 10, moveTo: true},
{x: 40, y: 10}
]
// but should be really these points (see below)
[
{x: 10, y: 10, moveTo: true},
{x: 30, y: 10},
{x: 40, y: 10}
]

If any questions, ask.
Thanks again for project

Handle command after z

e.g. M0,0,h10v10zm20,20;

Handle multiple command shorthand

This is valid SVG path description:

M100,100L200,200,300,300C300,350,350,400,400,400,400,450,450,500,500,500

Which is equivalent to:

M100,100L200,200L300,300C300,350,350,400,400,400C400,450,450,500,500,500

Currently SVG shapes won't handle this.

`m` as initial path command throws `toPoints` error

prevPoint doesn't exist if initial command

switch (command) {
  case 'm':
    relative = true;

  case 'M':
    var x = (relative ? prevPoint.x : 0) + commandParams.shift();

Handle multiple z commands