A few months ago I designed and helped build a mobile website. A goal of mine was to create a fast loading, resolution independent interface. SVG has been around for over 10 years, but using it is still quirky. For example, Google decided to save 1MB by excluding SVG support from Gingerbread, and that has proven to be a painful decision for mobile developers.

While there are more complicated workarounds, I tried to make things as simple as possible. Here’s a couple tips I learned that I didn’t find elsewhere.

Scale down background images. Although you can set a SVG image multiple ways, if you set it as a background image, the default android browser will not properly upscale the images. So make them large in your SVG file, and shrink them down in the UI. Fortunately, increasing the size of the image(s) does not increase the file size.

Some have suggested changing the SVG files internal dimensions from px to a realtive value such as ems. However, in my tests this doesn’t help with the default browser in Android, even in Jelly Bean. Continue reading →