title: Safari unreasonably slow rendering SVG files
body: <p>I have an application where I load different SVG files into an object and perform operations on them using JS. The code is all correct and works perfectly across all latest browsers, even IE11, with the single exception of Safari (including Safari on iOS and wkhtmltopdf).</p>
  
  <p>When the application runs in Safari, performance on the SVG objects is abysmal. This includes initial page loading and changing the <code>data</code> attribute of the host <code>&lt;object&gt;</code>. Basic tasks like using <code>setAttribute</code> while looping over SVG elements can hang the application for minutes.</p>
  
  <p>The application is entirely dependent on SVG interactivity so this is a major issue for me. </p>
  
  <p>I'm pretty sure yet this is something related to the content of the SVG files. I've been playing around with simplifying the files to see if a particular type of SVG feature is to blame (patterns, styles, embedded images, <code>&lt;use&gt;</code> elements, etc) and while things do get faster as things like images are ripped out I haven't found any primary culprit yet and I can't really remove features without breaking the app anyway.</p>
  
  <p>One odd thing I noticed is that changing from a "simple" SVG to a complex one is faster than the other way around. It seems like Safari has trouble cleaning up the complex object when it's not needed.</p>
  
  <p>I've set up a demo page at the following link:</p>
  
  <p><a href="http://www.flooradvisor.com.au/shapes/backend/tests/webkit-svg-change-src.html" rel="noreferrer">http://www.flooradvisor.com.au/shapes/backend/tests/webkit-svg-change-src.html</a></p>
  
  <p>If anyone can help me understand why Safari hates my SVG files and what I can do about it that would be hugely appreciated.</p>