PhoneGap SVG's as data-uri's on iOS

Question

Seems to be an odd issue, I can see my SVG fine on Chrome on my desktop, but not when I compile it to my phone.

If I inspect the element using Safari and then choosing iPhone simulator I can see the Data-URI and then when I click on this on my computer I can see the image.

I can definitely see the div there with the correct height and width but I can't see the SVG background image.

As far as I was aware this was fully supported for iOS 3.2 and above - http://caniuse.com/svg and http://caniuse.com/datauri

The code is:

span {
        background:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjcxIiBoZWlnaHQ9IjQ4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KIDwhLS0gQ3JlYXRlZCB3aXRoIE1ldGhvZCBEcmF3IC0gaHR0cDovL2dpdGh1Yi5jb20vZHVvcGl4ZWwvTWV0aG9kLURyYXcvIC0tPgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGZpbGw9Im5vbmUiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSI1MCIgd2lkdGg9IjczIiB5PSItMSIgeD0iLTEiLz4KICA8ZyBkaXNwbGF5PSJub25lIiBvdmVyZmxvdz0idmlzaWJsZSIgeT0iMCIgeD0iMCIgaGVpZ2h0PSIxMDAlIiB3aWR0aD0iMTAwJSIgaWQ9ImNhbnZhc0dyaWQiPgogICA8cmVjdCBmaWxsPSJ1cmwoI2dyaWRwYXR0ZXJuKSIgc3Ryb2tlLXdpZHRoPSIwIiB5PSIwIiB4PSIwIiBoZWlnaHQ9IjEwMCUiIHdpZHRoPSIxMDAlIi8+CiAgPC9nPgogPC9nPgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxpbWFnZSB4bGluazpocmVmPSJkYXRhOmltYWdlL3BuZztiYXNlNjQsaVZCT1J3MEtHZ29BQUFBTlNVaEVVZ0FBQUVjQUFBQXdDQVlBQUFCRGwyZG1BQUFBR1hSRldIUlRiMlowZDJGeVpRQkJaRzlpWlNCSmJXRm5aVkpsWVdSNWNjbGxQQUFBQTdwcFZGaDBXRTFNT21OdmJTNWhaRzlpWlM1NGJYQUFBQUFBQUR3L2VIQmhZMnRsZENCaVpXZHBiajBpNzd1L0lpQnBaRDBpVnpWTk1FMXdRMlZvYVVoNmNtVlRlazVVWTNwcll6bGtJajgrSUR4NE9uaHRjRzFsZEdFZ2VHMXNibk02ZUQwaVlXUnZZbVU2Ym5NNmJXVjBZUzhpSUhnNmVHMXdkR3M5SWtGa2IySmxJRmhOVUNCRGIzSmxJRFV1TlMxak1ERTBJRGM1TGpFMU1UUTRNU3dnTWpBeE15OHdNeTh4TXkweE1qb3dPVG94TlNBZ0lDQWdJQ0FnSWo0Z1BISmtaanBTUkVZZ2VHMXNibk02Y21SbVBTSm9kSFJ3T2k4dmQzZDNMbmN6TG05eVp5OHhPVGs1THpBeUx6SXlMWEprWmkxemVXNTBZWGd0Ym5NaklqNGdQSEprWmpwRVpYTmpjbWx3ZEdsdmJpQnlaR1k2WVdKdmRYUTlJaUlnZUcxc2JuTTZlRzF3VW1sbmFIUnpQU0pvZEhSd09pOHZibk11WVdSdlltVXVZMjl0TDNoaGNDOHhMakF2Y21sbmFIUnpMeUlnZUcxc2JuTTZlRzF3VFUwOUltaDBkSEE2THk5dWN5NWhaRzlpWlM1amIyMHZlR0Z3THpFdU1DOXRiUzhpSUhodGJHNXpPbk4wVW1WbVBTSm9kSFJ3T2k4dmJuTXVZV1J2WW1VdVkyOXRMM2hoY0M4eExqQXZjMVI1Y0dVdlVtVnpiM1Z5WTJWU1pXWWpJaUI0Yld4dWN6cDRiWEE5SW1oMGRIQTZMeTl1Y3k1aFpHOWlaUzVqYjIwdmVHRndMekV1TUM4aUlIaHRjRkpwWjJoMGN6cE5ZWEpyWldROUlrWmhiSE5sSWlCNGJYQk5UVHBQY21sbmFXNWhiRVJ2WTNWdFpXNTBTVVE5SW5odGNDNWthV1E2TVVGR1JrSTNSVGt3UlVaRVJURXhNVUZCT1VVNVFUVkNRekZDTmtRM09UVWlJSGh0Y0UxTk9rUnZZM1Z0Wlc1MFNVUTlJbmh0Y0M1a2FXUTZRemc0UWpnMVFVSTNOVVkzTVRGRk0wRkNPVUpDT1VWQ1FqaEJRVVEzUlRraUlIaHRjRTFOT2tsdWMzUmhibU5sU1VROUluaHRjQzVwYVdRNlF6ZzRRamcxUVVFM05VWTNNVEZGTTBGQ09VSkNPVVZDUWpoQlFVUTNSVGtpSUhodGNEcERjbVZoZEc5eVZHOXZiRDBpUVdSdlltVWdVR2h2ZEc5emFHOXdJRU5ESUNoTllXTnBiblJ2YzJncElqNGdQSGh0Y0UxTk9rUmxjbWwyWldSR2NtOXRJSE4wVW1WbU9tbHVjM1JoYm1ObFNVUTlJbmh0Y0M1cGFXUTZPV1EzWmpOa01EWXRNemM0WlMwME16Z3lMV0l4TWprdFltSmhOamcxTURBM1ltVXlJaUJ6ZEZKbFpqcGtiMk4xYldWdWRFbEVQU0o0YlhBdVpHbGtPakZCUmtaQ04wVTVNRVZHUkVVeE1URkJRVGxGT1VFMVFrTXhRalpFTnprMUlpOCtJRHd2Y21SbU9rUmxjMk55YVhCMGFXOXVQaUE4TDNKa1pqcFNSRVkrSUR3dmVEcDRiWEJ0WlhSaFBpQThQM2h3WVdOclpYUWdaVzVrUFNKeUlqOCtVdlZzM1FBQUFjVkpSRUZVZU5yc203RkxBbEVjeCs5VXNpVUlIQnFhSEp6OFY2S2dvQkNoSktFL29DaG9hV2d3TE93UENBd05SQXdzaXY2Q3hyWUdKd2VuaGdhbkppTzd2dDk2aW5mM3FyVzQ3d2UrZHo1eDhjTzdkNy8zN3AzcmVaNXpkSHlhY2h4bkMxbEY1aEhQSkNxNEprL0lKWEsydjdmZGQwdmx5aXdhVldUWkVTT3VrR0lDaHcySkNVRWY5ekVjY25KaEpVYzVhWG13a3FhY29UeFlHVkpPUng2c2RDaW5KZzlXYXBUVFJrN2t3Z2Q5dEYxVEJDYlJXRUlXSndibzl3akppSmx6RDdsRmJsQUVEajdsakRDU2txWVp0UXFaRENobC9PV2tIR0h2VGtKeUpFZHlKRWR5L2k2SnlRYnFuQ21jNW95MHFOVTVMSHFmVWVlOCt1b2NTSm5CNXlLeWdLVE1qNk1taC8rM2o5d2hWVWg2R1MyVFZwRDFZRStLS0cvSUJiSkRHV3ZJcHB6NGhocjZlT0RZa3BjUEszbkt5Y2lEbFl4dTViL1VPVjFwc05LbG5JWThXR2xRVGdzNU43Y3c4ZVdCUGxvcUFuOHFBZ1BMcEpvK0JLY1BRck55eVpFY3laRWN5Zm12QkpkSjlUZzQrRGhZR3dtKzJVaFFLbGVtMFRoRWRuVWhqZUVXbEFOZVZpc1NFNEkrSHRtZENuSmhwVUE1V1htd2txV2N1RHhZaWNmTUNDM0M5Q2luS1E5V21wUlRSNjdsd2dkOTFGMjlValN1a0VPdkZIMElNQUNpWFpXT2g4VGJiQUFBQUFCSlJVNUVya0pnZ2c9PSIgaWQ9InN2Z18xIiBoZWlnaHQ9IjQ4IiB3aWR0aD0iNzEiIHk9IjAiIHg9IjAiLz4KIDwvZz4KPC9zdmc+');
        background-size:100%;
        display:block;
        width:31px;
        height:20px;
    }

Answer 1

The only examples I've seen of this in a brief search (here and here) don't use base64 encoded data. Might be worth a try?

// some code so I can post a link to JS fiddle