Question

I get an XML or JSON with paths only, and I need to recreate the SVG image.

I create an empty

<svg xmlns='http://www.w3.org/2000/svg' version='1.1'></svg>,

I add a <g transform="scale(1 -1)" fill='#aaa' stroke='black' stroke-width='5' ></g> in it, and then in this element I add all of the paths in it (e.g. <path d= … />).

In the end I get a SVG image, but because I haven’t set the viewBox attribute in the SVG element the image isn’t properly displayed – when I open it in browser, a part of it is displayed full size.

Can the viewBox be calculated from the values from the paths?

Thank you!

Answer 1

OK so I solved it the following way:

1. removed all letters from the paths string and made an array out of it with

   var values = pathValue.split('L').join(' ').split('M').join(' ').split('z').join('').split(' ');

2. found max and min from those values:

   var max = Math.max.apply( Math, values );

   var min = Math.min.apply( Math, values );

3. set the viewBox:

   viewBox = max min max max

This worked in my case excellent. Hope that it will be helpful to someone else too.