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

@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