Menu
A site I'm working on displays a large number (>50) of complex SVG images in a scrolling dialog window. When viewing the site in Chrome, the scrolling performance of the dialog window is very poor - it is noticeably laggy and slow. However, if I replace the SVG images with PNG images, the scrolling is perfectly smooth and responsive.
Here's a demonstration of the difference: https://jsfiddle.net/NathanFriend/42knwc1s/
Why is the SVG scrolling performance so much worse than the PNG scrolling performance? After the browser renders an SVG image, I would assume it doesn't need to rerender the image until the image is manipulated in some way (like resizing). Does scrolling an element that contains SVG images cause the images to be rerendered for every frame of the scroll animation?
`
358
SVGs are far smaller in size than PNGs and aren't likely to slow down your computer or website. (However, very detailed designs may slow down an SVG.) Because they're a vector file format, you can scale SVGs up or down without any loss in quality.
Neither file type is better or worse than the other; each has its limitations. Though SVG outperforms PNG in several areas, PNG is a lot better at handling certain things. In general, though, you should stick to SVGs wherever appropriate and use PNGs in all other situations that vectors cannot handle.
SVG uses a "painters model" of rendering. Paint is applied in successive operations to the output device such that each operation paints onto some area of the output device, possibly obscuring paint that has previously been layed down.
SVG and PNG both are a type of image format to store images. SVG is a vector based image format where an image is represented by set of mathematical figures and PNG is a binary image format and it uses lossless compression algorithm to represent image as pixels.
I think this is just some kind of a Chromium bug, I've found this issue on SO, because I started experiencing it as well on Mac. It works OK on Opera for instance.
I don't think anyone here will be able to explain why it's slow if it really is a bug. I've created a Chromium bug, please star it if you want the issue to be fixed soon or learn more https://bugs.chromium.org/p/chromium/issues/detail?id=681611
143
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
