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!

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.

Something to try:

Menu / Object / Flatten Transparency

  • Do this independently on the transparent image elements.
  • Do this independently on other transparent elements if needed.
  • Choose your settings.
  • Check _Preserve Alpha Transparency.

    • Something to consider: When you say some of the layers are transparent images you mean tif, jpg, ie not vector? If so, those images specific settings could be causing issues on export. Also depending on your plans for said SVG, those same settings could affect how they scale later. I bring this up because the proof of concept you posted was vector based and it sounds like your design is mixed. I may just be confused, I often am. Also, nice logotype!

    You have to follow these steps:

  • 1st- Edit image and take off it's background with an editor like PAINT.NET or any other that can get the work done.
  • 2nd- Save it in .png extension.
  • 3rd- Go to where the saved png file (with no background) is and open it with inkscape!

    • Now you should have a no transparency image on inkscape... just save it (or further edit it and save it) to svg and it works!

    链接地址: http://www.djcxy.com/p/95832.html

    上一篇: 为svg自动化“简化路径”

    下一篇: 从illustrator透明度问题的svg