Exported SVG does not render properly in finder or browsers

I’m a longtime Visio user new to Omnigraffle and really liking it so far. However, I have encountered a big issue that has me puzzled. SVG files created by export are missing most of the objects when I view them in a browser or with the finder preview.

Here’s an example. This is the PNG export of the image that works fine:

The same image exported as SVG, with all other settings the same, is missing everything except the vertical line on the left. I’ve looked at the XML of the SVG and it does appear that all the shapes are represented, but they just don’t appear when I open with chrome, safari, or in the finder preview.

I’ve tried the export with several images and get similar results. One image did work, but most do not. The general pattern is that text and lines appear fine, but sold shapes like the colored horizontal bars usually do not work.

Thanks for any suggestions,

Dave

Dave: I don’t have any solutions at all. This is weird behavior. I export to SVG all the time with no problems at all. Are you sure you don’t have some like “export selected objects” only as your choice? (Instead of whole canvas, or all objects in diagram.) That would certainly solve the issue, but I’m guessing your problem is more complicated. At least it’s worth checking the details of how you choose to export (canvas, document, selected objects, etc.)

Thanks, I was using “export selected objects” but I verified the selection several times. The example PNG I posted was done using the same selection as the SVG. To confirm the behavior I did two exports and only changed the export file type. Got correct results with PNG and not SVG. I played around with exporting everything, just the canvas, and some other buttons, but no change.

I think there is something about the size of the objects or the stroke of the outline that is causing them to generate some invalid SVG. In the image that did work, the shapes were almost identical except that they were a little bigger. The vertical line that does show up in the bad images has a thicker stroke than the shapes that don’t appear.

Is there a way to post the .graffle file here? I could provide the original if it is interesting to anyone.

Thanks,

  • Dave

@monz: Probably the only way I can help out is if you post a download link to the Graffle document. That way I can test if I also have problems exporting to SVG. If I don’t have any problems then something is “off” but not likely OG overall. But if I have the same issue then you’ve likely identified some weird bug/problem that OG doesn’t handle properly at this point in time. Using unique fonts at all?

Try this:

http://monztech.com/user/svg_problem.graffle

Thanks so much!

Dave

Dave: this is truly bizarre. I’d contact OmniGraffle support directly. So here’s what is bizarre:

  • if I try to create an SVG out of the portion of the diagram you show in this thread (as a PNG) I only see 1 vertical black line
  • if I try to create an SVG out of all the objects on the canvas then everything turns out fine!
  • if I try to create an SVG out of your top drawing and the problem one then all turns out fine!

So, in short, this is completely bizarre behavior to me. If you want an SVG of all things in one go then you’re fine. Some selected objects work fine, but others don’t. I’m not seeing any coherent pattern here in the behavior. I’m attaching my various SVGS as a download (since I don’t know if you have the same experience).

What’s especially odd is if I take the key diagram you shared, then copy/paste on a new Graffle document I get the same bad result if trying to export those objects. But if I export the whole canvas as an SVG it all works. I am very very confused. But it’s certainly not you: something bizarre is going on.

You can download my SVGs here: https://infinit.io/_/G6tYFfn

@mitchellm: Yes, I tried a few things like you did and the outcome is very inconsistent for me also.

I know Omnigraffle is a solid and mature product, but it looks like I encountered a bug after using it for just a few days … I guess I’m just lucky!

I contacted support yesterday when I first saw the problem but have not heard back yet.

I’m on a trail version of PRO and was planning on purchasing, but the SVG export was a feature I wanted that only comes with PRO. If this feature doesn’t work, I’m not sure I want to spend the extra for PRO…

Otherwise Omnigraffle is really nice. I was able to produce drawing with exactly what I wanted without reading any documentation - the usability is way better than some of the alternatives I’ve tried (e.g. LucidChart)

Thanks again for your help,

Dave

All I can tell you is SVG support rocks and has been rock solid for me. But whenever you find out what the issue was I’d like to know. I’ve never seen this before, but there must be some rational explanation.

… I think I may have narrowed down the problem: if I remove shadows from objects then I have no problems with exporting any combination of things to SVG. Since I never use shadows (I like that flat look for web graphics) I’ve never thought about this before. Now some of the objects using shadows seem to export fine, others not. Again there must be a pattern. But if I de-shadow all exports fine. Maybe SVGs don’t handle shadows well, or consistently. And I don’t recall seeing SVGs with many shadow effects: but that’s not saying too much.

Yes, it’s the shadows!

Some of the shapes with shadows do work, but all of the ones with problems have shadows. When I removed the shadows on all shapes, everything worked as expected. It may actually be a combination of size and shadows that exposes the problem, but shadows are definitely a culprit.

Thanks for figuring this one out. I’m going to pass this on to support.