Safari displays SVG files unnecessarily slowly

I have an application where I load different SVG files into an object and perform operations on them using JS. The code is correct and works fine in all recent browsers, even IE11, with the only exception for Safari (including Safari on iOS and wkhtmltopdf).

When the application is launched in Safari, the performance on SVG objects is terrible. This includes initial loading of the page and changing the data

host attribute <object>

. Basic tasks such as using setAttribute

SVG elements while looping can hang in minutes.

The app relies entirely on SVG interactivity, so this is a serious problem for me.

I'm sure it has something to do with the content of the SVG files. I'm tinkering with simplifying files to see if some type of SVG feature (templates, styles, inline images, elements <use>

, etc.) is to blame , and while things get faster as things like images break out I haven't found the main culprit yet, and I can't really remove the features without breaking the application.

One weird thing I've noticed is that going from a "simple" SVG to a complex one is faster than the other way around. It seems that Safari cannot clear a complex object when not needed.

I have installed a demo page from the following link:

http://www.flooradvisor.com.au/shapes/backend/tests/webkit-svg-change-src.html

If anyone can help me understand why Safari hates my SVG files and what I can do about it, that would be much appreciated.

+3


source to share





All Articles