Displaying a large background SVG slow on WebKit?
css, html, safari, svg, webkit
Solution
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.
Problem
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.