3

I have a project that requires large SVG files to be rendered. So far I've been using a UIWebView, which works, but can take upwards of 10 seconds to render. On older devices the app just runs out of memory.

I've come up with several possible solutions:

  • Use a CATiledLayer (but I couldn't find any way to do this with svg)
  • Rasterize the SVGs first, split them up, then use a tiled layer (this would be really slow on the first run, though)
  • Use PDF instead (although im not sure if this would help at all wth vector - anyone with prior experience?)

The SVGs are generated server-side, so im open to suggestions on that front too (I.e. changing formats)

I'd appreciate some pointers from people who have experience in this area in choosing a way forward. You have my sincere thanks!

3 Answers 3

2

Okay! After much trial and error I believe I have a buttery smooth scrollview of massive SVGs in iOS.

Basically, you need to cut up your svg into tiles and use UIWebViews to render them within a UIScrollView.

Make sure you load the tiles asynchronously from the main thread, which can be tricky because you can't do stuff to UIWebView from a background thread. You'll suffer from choppy framerates if you try and load the tiles in scrollviewdidscroll.

Also, you might want to use a small reset css in your UIWebViews to get rid of ugly padding around your tiles.

* {
 margin:0;
 padding:0;
}

did it for me.

0

PDF is the native format of Adobe Illustrator and well supported on iOS, so it's definitely an option for vector graphics. Rendering complex vector graphics is always very CPU-heavy though, so you'll have to experiment to find out what is faster. Given that the PDF stack on iOS is much more mature than SVG support in WebKit, I would guess that it could be faster but it depends a lot on your input files. You could check out the ZoomingPDFViewer sample code from Apple which uses CATiledLayer with PDF to get started.

2
  • My chief concern is the memory limit. These svgs are quite complex and I dont think rendering them their entirety at launch is a good solution. A method that uses a tiled approach would be ideal -- im just not sure if vectors in PDF will react well to that.
    – Ben
    Oct 7, 2011 at 4:02
  • Tried it -- still not fast enough. I think it's time for me to accept that 8mb vector graphics just aren't a good idea on a mobile device.
    – Ben
    Oct 7, 2011 at 12:07
0

I wrote a system that can handle large SVG files that Inkscape cannot. It converts SVG into JavaScript and HTML. The public version runs on a webserver that is slower than my development environment. I would like to test what you call a large SVG. If it works it will create the SVG in JavaScript and HTML and will fender the SVG so that a user would see it being built. Is it possible that you could send a medium and large SVG so that I could try converting them in both dev and test?

Excuse spelling-ipod

6
  • I'll send you some test data once I get home. I'm not sure if JavaScript and HTML would be a good solution for this -- I'd expect webkit's native SVG capability to be faster.
    – Ben
    Oct 7, 2011 at 4:02
  • Chasbeen, here's the kind of files that I am working with: dl.dropbox.com/u/29939553/tuscany.svg Please let me know when you've grabbed a copy so I can clear the link off my dropbox. I'd be interested to see if your system can render just small parts of the file at 1.0 scale quickly.
    – Ben
    Oct 7, 2011 at 12:26
  • Ben the best I could do was cut the SVG down to 2 Megabytes. You willl need to wait 10 seconds before you start to see the format forming. I thought it would be interesting ro see how far the converter would get... irunmywebsite.com/raphael/p_BIGMUSIC1d.php
    – Chasbeen
    Oct 7, 2011 at 23:27
  • This is too slow 10 seconds (CHROME ONLY OTHER BROWSERS EVEN LONGER-SORRY)
    – Chasbeen
    Oct 7, 2011 at 23:33
  • Its an interesting idea nevertheless -- You might be able to handle huge svgs by only rendering what is visible to the user at the point of time. The only problem is that uiwebview seems to lock up for me during graphics-heavy javascript execution. Thank you for trying to help!
    – Ben
    Oct 9, 2011 at 7:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.