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: enter image description here

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

enter image description here

2 Answers 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: See the difference

Cannot saying anything about Illusrator. Sorry.


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


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.