Loading a huge image (5mb) into svg background leads to pixelation and performance issues

Question

I have some issues with pixelation and the performance of SVG background images together with D3.js.

You can already see a running

Answer 1

As 5mb are too much for browser. I now tested it with 50% of width and height. So the picture is now just 2,33mb big.

And as you can see, it works now in Firefox and Chrome and the picture is loading in about 2 seconds. The performance is also okay.

But for sure I cannot zoom that much into the map anymore, otherwhise it get very pixeled. So I capped it at zooming 7x.

So the only other solution would be tiling images, but that would be way to hard to do for this project. And as I said this will kill the soft zooming.

Answer 2

I don't really understand your question but performance wise if you have deep hierarchy tree in SVG, you should consider using html5 canvas instead since it's much more performance efficient. It feels from your question that's the main issue. Maybe it's not the best solution for you but I think you should read up on what best suits you. See https://msdn.microsoft.com/en-us/hh552482.aspx?f=255&MSPPError=-2147217396 and http://www.sitepoint.com/7-reasons-to-consider-svgs-instead-of-canvas/ for pros and cons between SVG and canvas. Microsoft Virtual Academy also has a chapter for this as well.

Hope it helps!