SVG sizes could be significantly smaller by reducing redundancies

[Validark]

The SVG's created by billboard.js can be massive for decently large datasets, and just cutting down some of the unnecessary size would probably make everything smoother. I was using the areaRangeChart, although I'm sure this is applicable to many different kinds of charts.

I looked at my generated circle elements and they all have two major sources of bloat:

• class="bb-shape bb-shape-16 bb-circle bb-circle-16"
  • with 10000 circles, this adds an additional ~557788 bytes / ~558 kilobytes, assuming utf8-encoding
  • bb-shape and bb-circle should be removed in favor of a CSS rule with a selector like div.bb circle
  • bb-shape-16 and bb-circle-16 are redundant, and should be removed. Keep in mind that a class is a template for an instance. If you need to give an element an id, it should go in the id property. However, I think circle elements should not have an id, especially if the id is just e.g. 16. Perhaps the library should maintain an array of circles and identify them with circles[16]?
• style="fill: rgb(31, 119, 180); stroke: rgb(31, 119, 180);"
  • with 10000 circles, this adds an additional 600000 bytes / 600 kilobytes, assuming utf8-encoding
  • these could be removed by just wrapping the circles in a <g> element (for each of the different colors) and placing the fill/stroke in the <g> element.
  • a bit of a micro-optimization but rgb(31, 119, 180) could be converted to the hex #1f77b4, since hex colors are shorter than their rgb counterparts

In such cases, over a MB of unnecessary data could easily be removed.

P.S. https://vecta.io/nano is a good tool for compressing SVG's. Perhaps some tricks could be borrowed from it?