Transparent SVG in iOS WebKit

WebKit had a bug that caused embedded SVG (by <embed> or <image>) to have white background instead of transparent.

It was corrected, but not on iOS, where there is much older build of WebKit

Is there some good workaround for this? I desperately need the transparent background.

I know two sub-optimal workarounds:

• Use <img> tag. - I can not do that, because the DOM/XML tree of SVGs inserted as imgs can't be traversed/manipulated.

• Mask the <object> or <embed> element with itself. Surprisingly, event the old WebKit can detect the transparency if the SVG is used as mask However I consider it an ugly solution:

  <object style="-webkit-mask-image:url(image.svg);" data="image.svg" type="image/svg+xml" />

Is there some goo开发者_StackOverflowd solution to this?

I found a solution.

I can use inline SVG/XML. In that case I get both transparency and the ability to traverse SVG DOM nodes.

The only disadvantage is that I have to use valid XML markup with correct Content-type headers (text/xml somehow works best, I don't know why)

The bug you are talking about is well known. If it is on iOS, do you really need to be using vector graphics? Why not use a PNG with inherit transparency?