Rendering svg in uiwebview causes memory pressure (and app crash)

Question

I am working on an 'interactive map', similar to this example. I needed to be able to zoom in the map and still get a clean illustration, so the drawing of the map is done in svg (it actually was created in Illustrator, then saved as svg file).

In the app, I create a UIWebView and load the html containing the svg. The HTML file is a bundle resource in the app, so there's no network delay. There are tappable shapes that when you tap them, it brings you to another map (another html page with an svg drawing).

One of the svg is rather large (~5.8MB). When loading, I get 'Memory Pressure' warnings then it crashes. Instruments shows Virtual Memory at 298.71MB and Real Memory at 149.10MB at time of crash.

I already simplified the drawing (I took out some details), and I also used @Peter Collingridge svg optimizer.

How can I optimize memory use so it won't crash?

Answer 1

I resolved my issue:

• I was creating the webview in my viewWillAppear:method, before calling [super viewWillAppear:animated]. I originally did this because I have a super class that instantiates common elements for all the different maps I have and that way the elements appeared in the correct order. The call to super is now done before anything else and I bring the elements to front.

• I am now setting my webview to nil before creating and pushing another map (so another webview with other content).

• The first webview was created by the storyboard. It is now all done in code.

• The drawings of the maps have been simplified, so the files are lighter in size. (Less details)

Memory Report shows that Memory Utilized is now around 81.9 Mb (16.2% of available memory on an iPod Touch 5th generation).

I found that strange that I had a memory pressure warning with a (rather) small svg file. Also, the gage showed percentage never higher that 50%. I was not considering the JS engine and the webview memory limits. (Javascript engine is said to get full power in iOS 8, as reported here). (I couldn't find any official documentation about memory limits, probably because it seems to vary from device to device. See this answer.)

In the end, loading the page is still long on my iPhone 4s or my iPod Touch 5th generation, but it works. If you want to suggest a better way to achieve this kind of map, you are welcome to do so.