I’m working on the UI for an Android and iOS app. It will likely be built with PhoneGap (or the like) meaning the UI will be an HTML5 implementation.
For most of the images, we’ve decided to go with SVG files as they scale well across the various Android screens and are great for Retina on iOS.
So far, using .svg files is working fine for us and thanks to Safari and Chrome support, easy to test locally in a standard browser.
The catch is that these .svg files are going to get rather large as we turn them into sprites. As such, I’m looking into using GZIPped svg files (.svgz).
A quick test shows that a 50k SVG we are using compresses down to 8k via Gzip.
The catch, however, is that it appears that there needs to be a client/server relationship going on to decompress the SVGZ file. I can’t get Safari to render the linked .svgz file when run locally (as I assume it will be when via a webview in a PhoneGap compiled app). Chrome appears to be able to render the svgz, though.
So, my questions:
- Is there any way to use .svgz files locally on iOS via a PhoneGap app (I haven’t gotten to the point where we’re compiling via PhoneGap yet so can’t test that part at this time)?
- Any known issues with .svgz on Android (given it seems OK on desktop Chrome)?
- Should I even be bothering with .svgz in this situation where there aren’t actual download speed concerns (outside the initial app download)?
I don’t know much about issues with svgz on either iOS or Android, but you definetely shoudln’t worry about the size of the .svg files compared to .svgz, not even for the initial download. All the files in an Android and iOS packages are compressed anyway, so zipping those files yourself won’t bring you any gain. It might actually be better for your app performance-wise to keep them un-compressed.