Cropping SVG files


How do I crop SVG files I created used MarvinSketch? Now I realise there are a few answers to this question like this one Getting rid of Whitespace in Inkscape but I've done that and it didn't work as there was still some space left in the image. Plus, for some reason there's a white background behind every letter in the image, even though MarvinSketch doesn't create SVGs with this white background. This too I would like to be able to fix, if possible.

SVG prior to cropping
SVG after cropping

By the way I'd be more than happy to use another software than Inkscape, provided it's free and available on Ubuntu. I would like this method to be more than just adjusting the page width and height as this is subject to a lot of user error.

4/13/2017 12:46:00 PM

Accepted Answer

I just saw your question on AskUbuntu and I think you should give Inkscape another try. Converting to PNG and back to SVG really isn't the right way to go about this.

I took a closer look at the SVG files you posted and I think I might have found what's causing the extra whitespace around the image. It looks like MarvinSketch is adding some extra spaces to the functional groups:

enter image description here

Removing these is quite easy:

  1. Ungroup the diagram by clicking on it and pressing CTRL + SHIFT + G. You might have to do this multiple times depending on how the elements were grouped when the SVG file was created. I had to ungroup your sample file twice.
  2. Select one of the functional groups with the selection tool (standard mouse pointer, can be activated with F1)
  3. Press F8 to enter the text editing mode
  4. Delete the extra spaces
  5. Repeat the last three steps for each functional group
  6. Follow the instructions provided in the Q&A you linked to resize the canvas to the image

The image should now be cropped properly:

enter image description here

Of course it would be preferable to instruct MarvinSketch not to add these spaces in the first place. I am not familiar with the application but you might want to look around in the settings and see if there's any way to change this.


I guess you already found your answer but just for posterity's sake here's what's actually going on behind the scenes.

If you open your SVG file in a text editor you will find the following passage:

  <text xml:space="preserve" x="605" y="327" clip-path="url(#clipPath1)" stroke="none">N
  <text xml:space="preserve" x="117" y="608" clip-path="url(#clipPath1)" stroke="none">OH

The issue lies with the newline after the text value, i.e. N and OH, respectively. If you remove the newline like so...:

  <text xml:space="preserve" x="605" y="327" clip-path="url(#clipPath1)" stroke="none">N</text>
  <text xml:space="preserve" x="117" y="608" clip-path="url(#clipPath1)" stroke="none">OH</text>

...the extra whitespace disappears.

7/3/2014 5:51:00 AM