How do I make SVG files more transferable from Inkscape to Illustrator and viewable in Chrome?

Question

I've created a SVG file in Inkscape [1] and I've noticed that viewing it in Chrome or Illustrator causes a number of parts of the diagram to be invisible or otherwise poorly rendered (e.g., in Chrome some of the arrows are oriented the wrong way, whereas in Illustrator CS6 the line segments in arrows are invisible, but the arrow heads are still visible). Is there any way of making the file more compatible with these pieces of software whilst not loosing any of the existing parts of the file (e.g., I want to keep all the arrows, all the shapes, all the gradient colourings, etc.)

If you want to see what I see in Inkscape of this diagram this is it:

In illustrator I get (I don't understand the greenish background, this wasn't how it looked originally)

Answer 1

I'm not very familiar with inkscape but when possible expand your art when you output it to svg (Illustrator has an expand function that makes all selected objects into solid shapes). The best way to create an svg is to place the separate parts of the image in separate layers. For further reading check out this article. http://www.adobe.com/inspire/2013/09/exporting-svg-illustrator.html

Answer 2

Cannot saying anything about Illusrator, but speaking about Chrome (and some other browsers as well) there are issues rendering arrows when the relative point has no handles that describe the direction of the curve. The browser so try to guess (but fails) the direction itself.

This behavior can be prevented if you manually set the handle, telling to the browser which is the correct direction.

Now, when rendered in Chrome, this is the result:

Cannot saying anything about Illusrator. Sorry.