All geek questions in one place

Mapping a large SVG background slow on WebKit?

I have a large SVG graph for the background of my site. See Example: 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 great in Chrome and Firefox, but in Safari, navigating the page and resizing the browser page is very slow and the page completely crashes on my iPhone. Is this a bug in webkit?

Is there a way to make my .svg more convenient for WebKit? Or should I just use an image? SVG is ideal due to the small file size (only 7 thousand). The smallest .png equivalent I could make was 150k. I want the dimensions to be large so that the image scales well.

+4
source share
1 answer

You can optimize SVG using something like https://github.com/svg/svgo (node), this will reduce the file size and sometimes improve rendering time.

Sadly, Safari is now terribly slow with SVG.

+1
source

Source: https://habr.com/ru/post/1478883/

More articles:


All Articles