It appears that mobile Safari and mobile Google chrome (on iPhone for clarity sake) rasterizes svg graphics used as css background images when svg graphic needs to repeat. This causes the graphic to appear blurry which is no different than serving a raster-based format (such as a png) to the browser. This occurs whether the page is served at 100% or zoomed in on page load, or zooming in after page load.
If the svg graphic does not repeat or is cut off (if the html element is not wide or tall enough to show the whole svg graphic) it is treated as vector data. This allows the image to scale without any blurring during or after page load, zoomed at 100% or more.
Here is a side by side comparison of a test page served to iOS Mobile Safari, 100% on the left, and zoomed in on the right. Note that the results are the exact same on iOS Google Chrome and if images are served as data URIs. Also not pictured, iOS Mobile Opera serves the svg graphic (in this test anyway) as a rasterized image regardless.
Does anyone know if this is a bug or a feature?
Here is the test case: https://dl.dropbox.com/u/138203/svg/index.html
I'm getting the same on chrome for android but using no-repeat doesn't change anything. conceivably the behavior is to cut down on processor usage with complex background images but it's certainly not optimal