getpathdatatwo

v0.9.8

Published

10 months ago

A collection of javaScript helpers for parsing and converting SVG path data from `SVGGeometryElement`s or `d` strings.

Downloads

0High
0Medium
0Low

herrstrietzel

svg pathData toRelative normalization

getPathData2

A collection of javaScript helpers for parsing and converting SVG path data from SVGGeometryElements or d strings.

Based on the W3C SVG working group's SVGPathData interface` draft

Currently getPathData() and setPathData() are not natively supported by any major browser, thus you need a polyfill like Jarek Foksa's path-data-polyfill.

This repository includes alternative standalone methods of the getPathData() and setPathData() but can also be used alongside the above polyfill.

This repository aims at providing helpers to:

parse pathData from d attribute strings to a SVGPathData compliant array of command objects
normalizing shorthand commands like h, v, s, t to longhanghand equivalents l, c, q
convert quadratic to cubic commands
convert a (arcto) commands to cubic Béziers
convert commands to all absolute or relative commands
round path data coordinates
convert commands to shorthands if applicable
convert primitives like <circle>, <rect>, <polyline> to <path> elements

See Demo "Minify pathdata"

Usage

Load getPathData2 locally or via cdn

<script src="getPathData2.js"></script>

<script src="https://unpkg.com/getpathdatatwo@latest/getPathData2.js"></script>

Parse

You can retrieve pathData from a <path> as well as other SVGGeometryElements such as <rect>, <circle>, <ellipse>, <line>, <polyline>, <polygon>. See also section "Get path data from shapes/primitives"

let pathData = path.getPathData2();

parseDtoPathData() allows you to parse from any valid stringified pathdata

let d = ` m 50 0 .00001.0001.001 10e-10 Q 36.4 0 24.8 6.8 t -18 18 t -6.8 25.2 C 0 63.8 5.6 76.3 14.65 85.35 s 21.55 14.65 35.35 14.65 A 50 25 -45 0 1 100 40 h -20-.5 v -12.5-12.5 H 75 50V 0z`;

let pathDataD = parseDtoPathData(d);

Normalize and convert

Similar to the official getPathData() method we can add a normalize parameter like so:

let options = {normalize:true}
let pathDataNormalized = path.getPathData2(options)

This will apply the following conversions

relative to absolute
shorthand to longhand/unshortened commands like h, v, t, s
quadratic to cubic bézier
A arctos to cubic bézier approximations

You can define more finegrained conversions by these parameters

Example1: simple conversion

Quite often you only need to convert commands to all absolute values as well as shorthands to longhand commands to get calculatable values. By specifying only required conversions you retain more of the original path information than using the "brute-force" normalize option.
See examples convert.html

For instance the suggested normalize:true option is quite "aggressive" as it also converts quadratics to cubics. Quadratic béziers usually often more efficient/faster calculations (e.g. calculating points at t).

Besides, skipping the rather complex arctocubic conversion can also improve performance. (See examples/convert.html)

let options = {
    toAbsolute: true,
    toLonghands: true
}
let pathData = path.getPathData2(options);

Example2: individual conversion helpers

When parsing from strings you can combine all conversion helpers individually.
See examples convert.html

let d = ` m 50 0 .00001.0001.001 10e-10 Q 36.4 0 24.8 6.8 t -18 18         
t -6.8 25.2 C 0 63.8 5.6 76.3 14.65 85.35 s 21.55 14.65 35.35 14.65 A 50 25 -45 0 1 100 40 h -20-.5 v -12.5-12.5 H 75 50V 0z`;

let pathDataD = parseDtoPathData(d)

// to absolute
pathDataD = pathDataToAbsolute(pathDataD)

// to relative
pathDataD = pathDataToRelative(pathDataD)

// to longhands
pathDataD = pathDataToLonghands(pathDataD)

// to shorthands
pathDataD = pathDataToShorthands(pathDataD)

Example 3: parse to optimized pathdata

parseDtoPathDataOpt(d, options) retrieves path data from a d string with optional conversersions applied using the same parameters as getPathData2(). A wrapper combining parseDToPathData() and the convertPathData(pathData, options) helper.

let options = {
    toRelative: true,
    toShorthands: true,
    decimals: 1
}

// get optimized d
let pathDataOpt = parseDtoPathDataOpt(d, options);

Example 4: minify pathdata

Minify pathdata

Set/apply pathData

setPathData2(options) applies the stringified pathdata to a <path> element. Like the getPathData2() method you can specify options to get an optimized d attribute value.
This is handy if you intend to minify the final pathdata output after previous manipulations (e.g. scaling, shifting).

Get path data from shapes/primitives

You can retrieve pathData from any SVGGeometryElement. If you need to replace a shape with a <path> element you can use the convertShapeToPath() method. (See examples/shapes.html). All attributes except those specific to shapes (e.g. x, cx, width etc.) are copied to the new <path> element.

// parse pathData
let options = {
    toRelative: true,
    toShorthands: true,
    arcToCubic: true,
    decimals: 1,
    minify: true
}

shape.convertShapeToPath(options)

Credits

Jarek Foksa for his great polyfill heavily inspring to adopt the new pathData interface methodology and for contributing to the specification
Dmitry Baranovskiy for (raphael.j/snap.svg) pathToAbsolute/Relative functions
Puzrin (fontello) for the arc to cubic conversion method a2c.js
Mike "POMAX" Kammermans for his great A Primer on Bézier Curves