Search code examples
svgpngtransparencyadobe-illustrator

svg from illustrator transparency issues

issue i've seen all over the web.. have a cool piece in Adobe Illustrator CS5 that i'd like to make into an svg and ultimately implement with raphael.js (dope!)

some of the layers are transparent images, which are losing their transparency when exported. The file is exported from Illustrator using save for web, svg.

Below is a simple proof of concept that svg transparency DOES work... http://cl.ly/1R172R2L3d3L0W1k3P28

Screenshot of the file in Illustrator http://cl.ly/2c3k0I421Y2V0p080G2l

screenshot of the SVG in the browser http://cl.ly/0M3x1C1v0f1W1y0t2E1g

Help!

Solution

  • I guess the parts that should be transparent have layer effects on them like screen or multiply, and there are no such things in svg. Try to avoid the effects and instead apply transparency to the objects.