Problem with Transparency in svg file (Ai CS4)

[hoang21anh]

Dear guys,
I have some problems with the Transparency in the svg file.
I've just finished 1 of my artworks and I saved it in svg format so that I can serve it for web design. In this artwork, I did some Gradient and set the Screen mode in Transparency tab. Everything in Ai was fine, but when I opened the file with firefox (or even IE), the part that's supposed to be clear, was rendered in back.

I have 2 pics here. Just have a look and it'll be more obvious.

In Illustrator: http://ca4.upanh.com/12.330.16561152...llustrator.jpg
In firefox: http://ca7.upanh.com/12.330.16561151...einfirefox.jpg

Could anyone please explain why this happened? How can I solve this?
Thanks in advance!

[Albacore]

Firefox has only partial support for svg and that is why the XML script is rendering it black as it can't figure out the gradient & transparency as it reaches the number zero. If possible I would "Save for the Web" and use png. although this is not the solution for icons. Why not use this to validate for file: http://validator.w3.org/

[steve.ledger]

"All major modern web browsers except Microsoft Internet Explorer (IE), support and render SVG markup directly. The next major version of IE, Internet Explorer 9, will do so."
Source: Wiki

SVG, even with transparency seems perfectly fine in FF 3.6.6 (FF has had native SVG support since version 1.5 according to Mozilla.org)

Here's some test files
► http://en.wikipedia.org/wiki/File:Bitmap_VS_SVG.svg

Also, I created a quick (similar to the OP's) sample in Inkscape, it too shows no problems.

► http://talkgraphics.magix.net/public/members/is-svg.svg

I don't have Illy CS4, so I can't check that - but Peter is one of TG's experts with Adobe Illustrator, so I'd be inclined to take his advice.

[hoang21anh]

Thank you Albacore (Peter) and Sledger,
I think I've got some conception about this

Peter, the link you gave me: http://validator.w3.org/, would you mind telling me how it works?

[Albacore]

I have only used this once and it was not for svg. and I used the middle tab and uploaded a website. As far as I know you can upload any web format and have it checked to see if it meets the criteria.

[hoang21anh]

Oh, ok! Thanks a lot for the instruction!

[Albacore]

Thought I better try! Now I don't have CS4 only 3 so I don't have the fancy control of gradients and transparencies that you have and this was really quick. Just realized that I can't up load a svg. file need to look how Steve did it, he hosted it on free space on Magix site and I can't view it in Chrome

[steve.ledger]

Why can't you view the MAGIX hosted .svg in Chrome Peter??? Chrome is perfectly capable.

[Albacore]

Steve I tried it yesterday morning and it stated "No Plugins Available" this morning no problems. I use CS3 and I have no problems viewing my version of the glass type ball with radial fill and linear transparency. It must be the fancy new complex fills that are available in CS4 and the way it handles transparency. If I can make a suggestion don't take your transparent white value down to zero and see what happens then? also if you can make your transparency simple linear with screen as blending mode. You will notice on the export looked through Chrome you loose some of the transparent effect.