Exporting a 3d extruded shape to SVG from Illustrator produces horrible plane joins

Question

Here is a simple cylinder, created from an oval using the 3d extrude tool in Illustrator, and exported as a PNG:

Now here is the same cylinder "saved as" SVG in Illustrator (I have displayed it in the Chrome browser and screen captured it as this site will not allow SVG uploads - it's the same in FireFox and Safari, and indeed, in Illustrator if I open the SVG file - ie, it looks rubbish).

Is this a problem with the SVG standard that it doesn't blend the component planes well? How do I get it to look as good as in Illustrator itself, or as the PNG, or is this impossible?

Oh by the way this is CS6 16.10, and I've tried various toggles on the SVG output with no luck.

Answer 1

You need to simplify the object.

Create the 3D and set the lighting to "No Shading"

Expand the 3D object and apply standard gradient fills to the various shapes of the object. In your sample you really only need 3 shapes and 2 or 3 gradients.

The SVG export....