1

I'm trying to make a page that allows users to upload their own SVG files and the page will calculate the area circumference of the shape or shapes contained therein.

I've tried a number of different methods. I cannot seem to find a library that handles this. I'd prefer to use Javascript but I'm not overly fussy at this stage.

I'm wondering if anyone has any ideas or a solution to this?

Charles
  • 47
  • 2
  • 7
  • You should subset each line in a serie of trapezes, then use the classical formula to calculate the area of each trapeze and sum them – Christian Vincenzo Traina Nov 26 '17 at 11:45
  • It could not work for some images (for example if you have two concentric circles). In this case you probably need an AI algorithm – Christian Vincenzo Traina Nov 26 '17 at 11:46
  • For area, one relatively simple solution is to draw the shape (I.e. convert it to a bitmap) using a single colour, then counting the pixels of said colour. The size of your bitmap will have an impact on the precision of the computation. Note that handling of “holes” depends on how you want to count them and how they are represented in the SVG. – jcaron Nov 26 '17 at 13:06
  • For the “circumference”, it depends a lot on the complexity of the SVG. If it’s a single path, you can use https://developer.mozilla.org/en-US/docs/Web/API/SVGGeometryElement/getTotalLength to get its length. If it’s a combination of path, you’ll need to build the union of them, handling intersections and containment. Not easy out of the box, though there may be some libraries which could help you (d3.js maybe?) – jcaron Nov 26 '17 at 13:09
  • Thanks for all your suggestions. It is indeed supposed to be a combination of the path(s) minus the overlap. (although an approximation is better than nothing at this stage) I'm a little surprised there isn't an existing library for going this in SVGs. I have tried @jcaron 's idea in the past although it that the "hole" issue. – Charles Nov 27 '17 at 05:51
  • [2021] This SO answer calculates the area of **one** ````: https://stackoverflow.com/questions/67873157/scaling-the-filling-portion-of-an-svg-path/68082501#68082501 – Danny '365CSI' Engelman Jun 27 '21 at 09:22

0 Answers0