display an SVG image with PNG fallback

[Jonathan Hawkes]

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!

[Derek Williams]

In the past I've used an Ajax call to get the html fragment to insert, which is a bit different than your approach.

--
You received this message because you are subscribed to the Google Groups "iPhoneWebDev" group.
To post to this group, send email to iphone...@googlegroups.com.
To unsubscribe from this group, send email to iphonewebdev...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/iphonewebdev?hl=en.

--
Derek Williams
Cell: 970.214.8928
Home Office: 970.416.8996

[Peter Spicer-Wensley]

Dear group,
Just use PNG they are fast and efficient and small.
Tip for making smaller PNG: use Photoshop if going from a bitmap graphic and Illustrator if using SVG or EPS.

Go file export for Web and Devices and select PNG8 also select transparency (if desired) and AVOID TRANSPARENCY DITHER (looks dreadful).

For the same size graphic PNG file size is much smaller than SVG (often one half or less) depending upon the graphic.

Smaller is faster.
Also PNG CAN DO ANIMATIONS!
Useful to remember.
Fireworks is a useful PNG creation tool but makes large intermediate file sizes. I usually open Fireworks files in Photoshop once finished and then export from there. (Depending on what I'm doing.)

My 25c worth.

PeterSW
Sent from my iPad

[Remi Grumeau]

I don't really see the point of using SVG to render an image.
The fact that the Android team choose not to support images in SVG is on purpose: it's heavier than plain image, where weight is the big point for mobile.

Instead of SVG, i would use a JS to detect screen resolution and switch to SD / HD images.

R.

[Remi Grumeau ]

Le 9 juil. 2010 à 10:55, Peter Spicer-Wensley a écrit :

> Dear group,
> Just use PNG they are fast and efficient and small.
> Tip for making smaller PNG: use Photoshop if going from a bitmap graphic and Illustrator if using SVG or EPS.
>
> Go file export for Web and Devices and select PNG8 also select transparency (if desired) and AVOID TRANSPARENCY DITHER (looks dreadful).
>
> For the same size graphic PNG file size is much smaller than SVG (often one half or less) depending upon the graphic.
> Smaller is faster.

+1 !

R.

[Derek Williams]

If there is no compelling reason to use SVG I would agree, but there can be some reasons to prefer it over other image formats.

SVG can be useful if the image needs to be updated with dynamic data from the server or manipulated.  For instance a thematic map with simple transforms.

I've used this approach to render a fairly large (in pixels anyway) state map with many counties, the color of the county depended on various data.  The svg, relatively small, is loaded to the browser once, the data values are read from the server as needed and the SVG updated accordingly.  This is done at relatively high speed with very low network usage.  The user could also zoom without losing detail.  IIRC the SVG was on the order of 20KB (compressed).  The ajax updates were very small, 100 bytes or so.

[Jonathan Hawkes]

I didn't intend to start a raster vs vector image discussion. I assume that we are all professionals and know the advantages/disadvantages of each. I was surprised to get a "just use PNGs, SVG sucks" answer. The truth is that in my case, SVG is a far better choice because the image I am working with lends itself well to the format. My non-scalable PNG is 16KB. I'm sure that it could be optimized, perhaps even to 50% of that size. But my SVG image is only 5K non-gzipped.

-Jonathan

[Peter Spicer-Wensley]

Absolutely. I was only considering my own situation with static images. SVG can be created on the fly and created from equations and interfaces. They are definitely more scalable and being vector-based are relatively device independent. SVG is a good format however my needs are best met by png.

PeterSW 

Sent from my iPad

[Remi Grumeau ]

Remembrr that html5 comes with canvas, which can be generated from server side datables and can deal with vectors & bitmaps, and have all css3 transformations classes too.

Can t tell if it s the best solution or not but what i can tell you for sure is do not use SVG for mobile webapp ! :)

Envoyé de mon iPhone

[Jonathan Hawkes]

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 <jha...@techhead.biz> wrote:

[Sean Gilligan]

On 7/14/10 9:26 AM, Jonathan Hawkes wrote:
> 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...

Thanks for this. Never say "never" :)

-- Sean

[Remi Grumeau ]

Good stuff ! I'll add this detection to the iUI system info!

Thx !

(even if i stay on my position about svg ; ) )

[Derek Williams]

Thanks for the follow up.

--
You received this message because you are subscribed to the Google Groups "iPhoneWebDev" group.
To post to this group, send email to iphone...@googlegroups.com.
To unsubscribe from this group, send email to iphonewebdev...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/iphonewebdev?hl=en.