npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

getpathdatatwo

v0.9.8

Published

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

Downloads

16

Readme

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

| Parameter | Values/defaults | Effect | | :--- | :--- | :--- | | toAbsolute | Boolean; false | all commands to absolute | | toRelative | Boolean; false | all commands to relative | | arcToCubic | Boolean; false | all arcs to cubic | | arcAccuracy | Number; 1 | add segments for better cubic approximation | | quadraticToCubic | Boolean; false | quadratic commands to cubic | | toLonghands | Boolean; false | shorthands to longhands | | toShorthands | Boolean; false | apply shorthands if applicable | | normalize | Boolean; false | shorthand for: toAbsolute, arcToCubic, quadraticToCubic, toLonghands |

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).

| Parameter | Values/defaults | Effect | | :--- | :--- | :--- | | toAbsolute | Boolean; false | all commands to absolute | | toRelative | Boolean; false | all commands to relative | | arcToCubic | Boolean; false | all arcs to cubic | | arcAccuracy | Number; 1 | add segments for better cubic approximation | | quadraticToCubic | Boolean; false | quadratic commands to cubic | | toLonghands | Boolean; false | shorthands to longhands | | minify | Boolean; false | minify d string by removing whitespace omitting command tokens for repeated commands etc. | | decimals | number; -1 | round to decimals. -1 == no rounding | | optimize | Boolean; false | shorthand for: toRelative, toShorthandshands, decimals=3 |

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