Basically, its for performance improvement. In SVG, the more the number of elements, the less performance efficient it gets, or in simpler words, fps drops. I am trying to improve some performance issues in my SVG illustration library (ChelseaJS) when it comes to a large number of elements. Is there a way, I could merge shapes, for example, instead of two rectangle elements, it can be just one element.
ps: don't suggest the <g></g> tag, coz, it's just like a box for keeping elements together.
I would start by reducing precision, 70.00000000000001 is maybe not required.
Unless you have a new fancy 256PP^2* screen of course.
<polygon points="160,150
105,158.6602540378444
70.00000000000001,201.96152422706632
90,150
69.99999999999997,98.0384757729337
105,141.3397459621556"
stroke="#44d" stroke-width="2" fill="#695fe6" fill-opacity="0.3"></polygon>
source your star: https://beetrandahiya.github.io/ChelseaJS-docs/shapes/star.html
(*) PP = Petabyte Pixels Horizontally and Vertically;
available from Metazonappoogle in 2032.00000001
From https://codepen.io/tigt/post/improving-svg-rendering-performance:
One of the truisms of computer performance is that integers are faster than fractional numbers — “floating-point numbers”, officially. The <canvas> folks have known this trick for years.
This is usually fixed by taking all the numbers in the SVG — viewBox coordinates, data, height and width attributes — and rounding/multiplying them until they stop having decimals.