For any one else that doesn't agree with "never use SVG in a mobile web
app", here's the solution I ended up going with...
<script type="text/javascript">
if (document.implementation.hasFeature("
http://www.w3.org/TR/SVG11/feature#Shape";, "1.1")) {
// SVG feature detection
document.body.className = 'svg';
}
</script>
<style type="text/css">
#logo {
background:url(/images/logo.png) no-repeat scroll center center;
height:115px;
overflow:hidden;
text-indent:-9999em;
}
body.svg #logo {
background-image:url(/images/logo.svg);
}
</style>
<div id="logo">Company Name</div>
On Thu, Jul 8, 2010 at 12:04 PM, Jonathan Hawkes <[email protected]>wrote:
> I'm trying to write a web app that works in both Android and iPhone. I
> wanted to use SVG images so that they would scale well. I have just found
> that Android WebKit does not support SVG, so I wanted to have a fallback PNG
> for Android. I first tried using the <OBJECT> tag, but that makes the image
> lose transparency for some reason. I also tried multiple CSS rules:
>
> div.logo {
> background:url(/images/logo.png) no-repeat scroll center center;
> background-image:url(/images/logo.svg);
> height:115px;
> }
>
> But Android WebKit still picks up on the second rule even though it can't
> support it. Any ideas?
>
> Thanks!
>
>
--
You received this message because you are subscribed to the Google Groups
"iPhoneWebDev" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/iphonewebdev?hl=en.
