| <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> | |
PS: live example: http://codepen.io/rhawbert/pen/uAKfw
You can also use a script to load your icons, so it would be deferred and cached. https://gist.github.com/legomushroom/7689480
@legomushroom Thanks for the tip! What about is the display: none is removed? Would placing it in <body> or <head> be any different?
@legomushroom Also the reason the problem shown up is because of PE tests I was doing... so loading an external SVG isn't possible in this scenario, since the SVG is actualy injected in the markup in order to reduce the number of requests, latency, etc.
Here are some screenshots: http://www.browserstack.com/screenshots/089aea27a3d9d218ac220248e126f99f2b7dbbf2
@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
That was quite helpful. Thank you @FWeinb
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?
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.
Thanks @tkadlec... very inconcistent browser behaviours thou. I'd love to see how Desktop Safari 6 & 7 would perform.
Sure thing, @rhawbert.
Safari 7: After only
Safari 6.1: After only
@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
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).
@rhawbert hehe ie9 behaves much better then even ie10 with svg :)
I had to move the <svg> just after the opening <body> tag to have it work on iOS7 and iOS8. Thanks for this information!
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?
If you add the 'display:none' property it won't be in rendering tree any more, so it won't affect rendering performance at all. You can be concerned about bigger DOM size, but I think the difference is really noteless