SVG-Editor icon indicating copy to clipboard operation
SVG-Editor copied to clipboard

Published 20 hours ago • verified publisher icon petercollingridge

ViewBox Cropping

Open villanus opened this issue 11 years ago • 3 comments

What is the best way to trim whitespace outside of an svg? My goal is to remove all surrounding whitespace, leaving only the necessary paths. I have tried manually deleting the viewbox element without any success. Does changing the viewbox mean that all the paths have to be recalculated?

villanus avatar Jun 04 '14 08:06 villanus

Changing the viewbox changes how the paths are drawn. If you want to remove all the surrounding whitespace, then changing the viewbox is the easiest way. To find out what to change it to, you can use the getBBox function - you have to do it on every element and find the minimum and maximum extents. I'll see if I can put something online that will crop SVGs in that way.

petercollingridge avatar Jun 07 '14 19:06 petercollingridge

thanks for that. a code sample would be great.

villanus avatar Jun 12 '14 12:06 villanus

Hello Peter. I am still having a really rough time trying to calculate the sizes for every element to properly crop the actual image. The best I have come up with is outputting the html created in the edit page by choosing the main SVG node. It looks like your code does this, but I am not clear using what methods. Again, a working example would be greatly appreciated!

I also noticed that the svg code you have on your site https://petercollingridge.appspot.com/svg-editor is different than the code on this repo. Can you let me know which is the better (most updated) version.

Thanks

villanus avatar Jun 30 '14 22:06 villanus