Displaying a large background SVG slow on WebKit?

Question

I have a large SVG graphic for the background of my site. See an example here: http://jsfiddle.net/aAwgU/4/embedded/result/

body{
    background: url(http://www.thedavidcummings.com/images/html.svg) no-repeat fixed right;
    background-size: auto 100%;
}

It works fine in Chrome and Firefox, but in Safari navigating the page and resizing the browser page is extremely slow, and the page completely crashes on my iPhone. Is this a bug in webkit?

Is there a way to make my .svg more WebKit-friendly? Or should I just use an image? SVG is ideal because of the small file size (only 7k.) The smallest .png equivalent I was able to make was 150k. I want to keep the dimensions big so that the image scales well.

Answer 1

You can optimize the SVG using something like https://github.com/svg/svgo (node), it will reduce filesize and sometimes improve rendering times.

Saddly, Safari is awful slow with SVGs now.