While this library reduces SVG markup sizes significantly by removing commands it prioritizes visual quality over numeric compression gains.
Unlike most existing approaches (e.g in graphic applications), it checks where simplifications are suitable and stops simplification at the right »point« (literally).
!simplification Fira Sans (based on truetype/glyph quadratic commands) converted to cubic Bèziers. Right:Original; Left:optimized
Features – what it does
* reduces the number of SVG commands (both Bèziers and lines) by converting/combining adjacent:
* Béziers (C, Q)
* flat Béziers to Linetos
* colinear lines (L)
* reorders path starting points to replace unnecessary closing linetos by Z commands
* optimizes SVG file size by contextually converting to:
* shorthand commands (C => S, Q => T, L=>H or V)
* cubics to quadratic Béziers (only 1 control point)
* cubic arc-like segments to A (elliptic arc)
* adaptive coordinate rounding: small or large details can be auto-detected to find a suitable floating point accuracy without guessing the decimal value (3 decimals may not be the silver bullet=)
* split segments at extremes – only useful for manual editing
* optimize either path data strings or SVG markup code
Install module via npm:
` npm install svg-path-simplify
`
To simplify entire SVG documents in node.js we need to emulate the browsers DOM methods DOMParser and XMLSerializer. I opted for linkedom. Just make sure to import the svg-path-simplify/node module. It will load linkedom's methods DOMParser and add a polyfill for XMLSerializer
` /**
* load node polyfills for DOM parsing
* loads linkedom npm module for DOM parsing and emulation
*/
import 'svg-path-simplify/node';
// use it as in the above examples
import { svgPathSimplify } from 'svg-path-simplify';
let pathDataString = M 57.13 15.5c 13.28 0 24.53 8.67 28.42 20.65c 0.94 2.91 1.45 6.01 1.45 9.23;
let pathDataOpt = svgPathSimplify(pathDataString);
`
#### Example 2: Apply options
The following example would return a detailed object containing the stringified "normalized" pathdata (all absolute and "longhand" command notation).
let simplified = svgPathSimplify(input, options);
let {svg, d, report} = simplified;
console.log(simplified)
/*
// returns
{
"svg": "",
"d": "M 717 208
C 682 220 643 222 582 222
C 636 247 664 286 664 339
C 664 432 596 496 487 496
C 466 496 447 493 428 487
C 414 497 406 514 406 530
C 406 556 426 568 466 568
L 540 568
C 633 568 698 623 698 696
C 698 786 623 837 481 837
C 332 837 283 793 283 696
L 356 696
C 356 752 381 773 481 773
C 578 773 616 750 616 702
C 616 658 582 636 523 636
L 450 636
C 372 636 331 598 331 548
C 331 518 349 489 382 466
C 328 438 304 398 304 338
C 304 245 382 177 482 177
C 555 178 602 171 634 160
C 650 154 670 146 694 136
Z
M 482 235
C 421 235 386 276 386 338
C 386 400 422 443 484 443
C 546 443 581 404 581 337
C 581 270 548 235 482 235
Z
",
"report": {
"original": 29,
"new": 29,
"saved": 0,
"compression": 148.46,
"decimals": 0
},
"inputType": "pathDataString",
"mode": 0
}
*/
`
$3
` let options = {}
let output = svgPathSimplify(input, options);
`
The first parameter is the SVG input:
* a path data string – as used in SVG element's d attribute
* a polygon string – as used in SVG element's points attribute
* an entire