Skip to content

Instantly share code, notes, and snippets.

@rhawbert
Last active February 6, 2018 06:19
Show Gist options
  • Star 9 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rhawbert/05c7a758cb22d2a1ed24 to your computer and use it in GitHub Desktop.
Save rhawbert/05c7a758cb22d2a1ed24 to your computer and use it in GitHub Desktop.
Safari 8 (iOS & Mac OS) doesn't render injected SVG sprites when defined later, after the actual svg > use tags
<h1>Safari 8 is a no go (iOS & Mac OS)</h1>
<p>Desktop version 8.0 (10600.1.25), Mobile v. 8.0.2</p>
<h2>Before the svg sprite as symbol</h2>
<svg class="icon">
<use xlink:href="#icon-airplane" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" style="display:none; position:absolute; width:0; height:0;">
<symbol id="icon-airplane" viewBox="0 0 32 32"><path stroke="#449FDB" d="M0 0"/><path d="M24 20l-5.713-5.714L32 4l-4-4-17.14 6.858L5.46 1.46C3.906-.094 1.734-.466.634.634s-.727 3.273.828 4.828l5.396 5.397L0 28l4 4 10.287-13.715L20 23.998v8h4l2-6 6-2v-4h-8z"/></symbol>
<symbol id="icon-book" viewBox="0 0 32 32"><path stroke="#449FDB" d="M0 0"/><path d="M28 4v26H7c-1.657 0-3-1.343-3-3s1.343-3 3-3h19V0H6C3.8 0 2 1.8 2 4v24c0 2.2 1.8 4 4 4h24V4h-2zM8 26h18v2H8z"/></symbol>
</svg>
<h2>After the svg sprite as symbol</h2>
<svg class="icon">
<use xlink:href="#icon-book" />
</svg>

Questions:

Does injecting the SVG before everything, right after opening the <body> hinders page render performance?

Moving the injected SVG to the head solves the render issue, what would happen with page render performance, validation and compatibility (ie)?

PS: live example: http://codepen.io/rhawbert/pen/uAKfw

@FWeinb
Copy link

FWeinb commented Oct 1, 2014

@legomushroom
Copy link

@SaraSoueidan you are welcome! :) the only concern about placing it in head would be slightly increased html parsing time, because it parsed from top to bottom, but should be negligible. So it more about page load time but not rendering performance. I think it is better to preserve display:none property, to prevent it to be in rendering tree. Placing it in the head tag automatically does that, because everything inside it doesn't render by default

@rhawbert
Copy link
Author

rhawbert commented Oct 1, 2014

That was quite helpful. Thank you @FWeinb

@rhawbert
Copy link
Author

rhawbert commented Oct 1, 2014

Thanks @legomushroom, very clarifying remarks. I think @SaraSoueidan said on twitter that Mobile devices would suffer a bit more with html parsing... I mean, those (minified) SVGs sure can get big as the amount of icons increases on a website... any thoughts?

@tkadlec
Copy link

tkadlec commented Oct 1, 2014

Here are a few quick results for what shows up. I can run more tests later if you'd like. We may be able to actually automate this to some extent and toss the results the Browserscope.

  • iOS7: After only
  • Chrome 37: Both
  • Android 4.4.4 WebView (~Chrome 33): After only
  • IE10 (Windows Phone 8): Both
  • iOS6: Neither!
  • Android 4.1.1 WebView: Both
  • Android 4.1.1 Browser (S3): Both
  • FF Mobile 23: Both
  • UC 8.6: Neither!
  • Opera Mini 11.10: Neither!
  • Opera Mobile 24: Both
  • FF Mobile 32: Both

@rhawbert
Copy link
Author

rhawbert commented Oct 1, 2014

Thanks @tkadlec... very inconcistent browser behaviours thou. I'd love to see how Desktop Safari 6 & 7 would perform.

@tkadlec
Copy link

tkadlec commented Oct 1, 2014

Sure thing, @rhawbert.

Safari 7: After only
Safari 6.1: After only

@legomushroom
Copy link

@tkadlec neat thanks for the comprehensive list. iOS 6 and Opera Mini 11 because they are not really in svg. At least safari 5.1 and Opera 12.1 as I know

@rhawbert
Copy link
Author

rhawbert commented Oct 1, 2014

Appreciated @tkadlec,

Sigh... The biggest offenders here are the ones that doesn't update as often: iOS safari.
Desktop Safari is a modern browser but usage number aren't that high.

Even ie9 kinda behaved quite well (both icons shown).

@legomushroom
Copy link

@rhawbert hehe ie9 behaves much better then even ie10 with svg :)

@JimmyMultani
Copy link

I had to move the <svg> just after the opening <body> tag to have it work on iOS7 and iOS8. Thanks for this information!

@maksof-ashar
Copy link

I have used the svgs directly in the body content, they are running good in other browsers but when i tried to check the site on safari, i get that all the svgs allignment is disturbed secondly animation i putted on some svgs is also not working properly.. Can anyone help me to solve this problem?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment