CODEWITHSUNDEEP
javascriptperformancesvgoptimizationfrontend
Beetran Dahiya
Beetran Dahiya

Reputation: 41

Merging number of shapes to make a single svg element

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.

Upvotes: 0

Views: 297

Answers (1)

Danny &#39;365CSI&#39; Engelman
Danny &#39;365CSI&#39; Engelman

Reputation: 21173

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:

3. Round to whole numbers

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.

Upvotes: 2

Related Questions