All examples By author By category About

tomgp

path data polyfill example

A quick example of using this path data polyfill https://github.com/jarek-foksa/path-data-polyfill.js/ to reduce the precision of a path in an SVG document.

If you look at the source html file you'll see the path SVG path instructions defining are like:

M384.6230117358495,287.6713744571799L397.08777969854003,288.53704901891433L399.016198139235,288.65687471889737L405.0775753249624,289.04830888751303L413.0760961999088,289.504479388146L415.02192531223386,289.60024485251165L421.0827733171602,289.9084797753558L429.13443404004863,290.2648097494001L428.83556361439037,298.6295362012246L428.69664162606546,301.9280612693191L428.48932991288234,306.85041295093174L428.33332690011395,310.5545051145947L428.14336832261506,315.0648287669893L428.023390513073,317.91354852087034L427.7976117184192,323.2743774507584L427.69412354673955,326.7725476944737L428.8374432923897,326.556035920319L430.00513510391124,327.89322762504503L432.1727589548982,330.38775811815697L433.9605749955244,329.7296809910117L435.54682365172744,330.18421351335894L436.7127371625205,330.5916451128692L437.08575535040404,329.0589050181393L439.54527993900876,331.43782001784666L439.81345430247575,333.7613704720907L443.4242592788312,333.9053676145802L446.2469024670128,335.42239578633473L448.6405465392132,335.10075973961045L450.49240351789365,336.92407073999505L451.4660574384825,336.57308134920584L452.40958733769946,335.1983999150019L455.38455602850274,336.07626092313376L455.87580805799564,335.5423989169211L456.66529546295556,338.21190858184866L458.7612752077533,338.4908689702986L458.2258241881882,340.3600246858591L459.87838566958897,341.15964728460165L462.7256430612595,338.6171967100563L464.6401250141841,340.28944173696914L465.8318410975988,340.0164309403742L466.1468165975049,341.4373047021678L467.5171254768992,341.84987012724275L468.51344333692316,340.56119870901784L470.40521924762396,340.3444852630158L470.1051931172094,342.2295751168L471.5860077811759,343.75325483342965L471.7844786270004,342.3822771249942L474.13587435323024,339.4918473802152L474.28585107593375,339.39428050804133L475.2841273238143,341.2724555697505L476.76173479010464,341.6773208478088L478.58487417392166,340.19330076962615L479.6041182917555,340.55368968476523L478.99036078636186,341.49870565049923L482.12355750615563,342.79233112655356L482.8111190099523,343.753134 ...

a far greater degree of precision than required. The rendered verion (right-click > inspect element) is much simpler

M385 288 L 397 289 L 399 289 L 405 289 L 413 290 L 415 290 L 421 290 L 429 290 L 429 299 L 429 302 L 428 307 L 428 311 L 428 315 L 428 318 L 428 323 L 428 327 L 429 327 L 430 328 L 432 330 L 434 330 L 436 330 L 437 331 L 437 329 L 440 331 L 440 334 L 443 334 L 446 335 L 449 335 L 450 337 L 451 337 L 452 335 L 455 336 L 456 336 L 457 338 L 459 338 L 458 340 L 460 341 L 463 339 L 465 340 L 466 340 L 466 341 L 468 342 L 469 341 L 470 340 L 470 342 L 472 344 L 472 342 L 474 339 L 474 339 L 475 341 L 477 342 L 479 340 L 480 341 L 479 341 L 482 343 L 483 344 L 486 343 L 487 341 L 490 341 L 491 342 L 492 341 L 495 340 L 496 341 L 499 341 L 501 339 L 502 340 L 505 341 L 506 343 L 508 343 L 508 344 L 512 345 L 514 347 L 517 346 L 519 347 L 519 352 L 519 357 L 519 359 L 519 363 L 519 369 L 519 372 L 520 376 L 522 379 L 524 381 L 523 384 L 525 385 L 525 389 L 527 391 L 528 391 L 528 394 L 528 397 L 527 400 L 525 403 L 526 405 L 525 406 L 525 407 L 526 409 L 525 412 L 523 416 L 522 417 L 524 419 L 521 419 L 515 422 L 515 422 L 509 425 L 512 422 L 514 422 L 512 421 L 509 422 L 510 418 L 508 417 L 507 420 L 506 420 L 505 419 L 504 417 L 503 418 L 505 420 L 505 422 L 506 423 L 506 424 L 507 425 L 507 427 L 506 426 L 504 429 L 503 429 L 501 432 L 498 435 L 497 436 L 494 437 L 492 437 L 490 438 L 489 439 L 494 438 L 483 443 L 488 440 L 489 439 L 486 440 ...

etc.