SVG points

A specification for storing SVG shape data in Javascript. Includes functions for converting to and from a point object shape array.

2kb gzipped. No dependencies.

Example shape

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

Specification

A SVG shape is an object that includes a shape 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

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

ellipse

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

line

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

path

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

polygon

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

polyline

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

rect

{
  shape: '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

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

Installation

npm install svg-points

Usage

toPoints

import { toPoints } from 'svg-points';
const points = toPoints( shape );

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

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

toPath

import { toPath } from 'svg-points';
const pathFromShape = toPath( shape );
const pathFromPoints = toPath( points );

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

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

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://npmcdn.com/svg-points@1.0.2/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.