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

enter image description here

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).

enter image description here

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.

1 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....


  • Another advantage of this technique: Smaller, faster SVG files. Nov 24, 2012 at 10:02
  • Brilliant thank you. However the shape I really want to extrude contains some text which is going to be a bit difficult to put gradient fills onto. Still, this is useful and since it is a logo I will invest the time to do it. Appreciated. Nov 24, 2012 at 10:12
  • nice and clean solution +1 Nov 24, 2012 at 13:45

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.