svg-segmentize

0.1.6 • Public • Published

SVG segmentize

Build Status

This converts an SVG image into a copy containing only (straight) line segments. This works with every shape in the SVG 1.1 specification: line, rect, circle, ellipse, polygon, polyline, path. All attributes from the original geometry are carried over and applied to the corresponding line(s). you'll notice that:

  • fills disappear (there are no closed shapes anymore)
  • dashed lines are no longer visible on curves (curves are now collections of very short lines)

see an example here segmented image is on the right

usage

const segments = Segmentize(input, options);
  • input is an SVG, either a string or an SVGElement.

  • options is a Javascript object, and is optional.

    • options.input: "string" / "svg"
    • options.output: "string" / "svg" / "data"
    • options.resolution: how many line segments do curve-types become?

options

DEFAULTS = {
  input: "string",
  output: "string",
  resolution: {
    circle: 64,
    ellipse: 64,
    path: 128
  }
};

output: "data": this exports an array of line segments. endpoints are in this order: [x1, y1, x2, y2]

[
  [0, 0, 10, 10, {}],
  [50, 40, 100, 150, {}],
  ...
]

the fifth entry for every line segment is a Javascript object that contains all the attributes from the original element, except for transforms, those are applied to the geometry.

an example output for "data" option:

[
  [197.5, 185, 160, 250, {
    "class": "marker top",
    "stroke-dashArray": "7 2"
  }],
  [187.5, 92.5, 262.5, 92.5, {
    "class": "pen",
    "fill": "url(#gradient)"
  }],
  ...
]

notes

transforms

special attention is given to the transform attribute. consider the example:

<g transform="translate(50 30)">
  <line x1="0" y1="0" x2="10" y2="10"/>
</g>

SVG transforms are applied in a nested manner. this library recurses through the tree and builds a matrix stack, making sure the example above outputs one line as:

<line x1="50" y1="30" x2="60" y2="40"/>

to do

  • transforms inside a <style> aren't parsed.

credit

license

MIT

Package Sidebar

Install

npm i svg-segmentize

Weekly Downloads

2

Version

0.1.6

License

MIT

Unpacked Size

90.9 kB

Total Files

4

Last publish

Collaborators

  • robbykraft