CODEWITHSUNDEEP
htmlcsssvgsafarimobile-safari
Cliff Williams
Cliff Williams

Reputation: 116

Safari, Inline SVG & <use>

I'm using SVG via the element quite extensively and it's fine in most browsers (Chrome, FF, Opera, Android Chrome and Browser). However Safari (8 Mac OSX, iOS8), in particular is having issues rendering them.

The specific issue is that although the SVG seems to be occupying space in the document, nothing is actually visible. I've also tried to fill the SVG and checked several against different backgrounds to ensure that wasn't the issue.

Here is an example of the "source" SVG which is just before the closing </body> and will be referenced via <use> in another part of the document.

<div class="vh">
    <!-- inject:svg --><svg xmlns="http://www.w3.org/2000/svg"><symbol id="youtube-icon" viewBox="0 0 512 512"><path fill="#fff" d="M129.86 50h24.736l16.933 63.55L187.264 50h24.95l-28.58 94.504v64.486H159.08v-64.486L129.86 50zm81.244 129.74c0 20.667 10.8 31.427 31.95 31.427 17.537 0 31.35-11.73 31.35-31.428v-57.49c0-18.357-13.675-31.51-31.35-31.51-19.205 0-31.95 12.692-31.95 31.51v57.49zm22.44-55.556c0-6.42 2.956-11.184 9.08-11.184 6.69 0 9.55 4.622 9.55 11.184v54.555c0 6.384-3.254 11.103-9.122 11.103-6.022 0-9.508-4.926-9.508-11.104v-54.556zm99.805-32.478v89.025c-2.658 3.33-8.57 8.784-12.822 8.784-4.666 0-5.81-3.186-5.81-7.902V91.706h-21.805v98.03c0 11.585 3.543 20.948 15.232 20.948 6.598 0 15.755-3.433 25.203-14.64v12.946h21.806V91.706H333.35zm-32.077 240.428c1.48 1.954 2.22 4.815 2.22 8.583v57.672c0 3.56-.6 6.126-1.798 7.697-2.29 2.996-7.246 2.86-10.625 1.15-1.59-.8-3.227-2.11-4.916-3.927v-69.607c1.41-1.533 2.835-2.67 4.28-3.403 3.636-1.84 8.328-1.482 10.84 1.834zm69.91-2.53c-7.696 0-9.278 5.415-9.278 13.09v11.308h18.347v-11.307c0-7.55-1.602-13.09-9.07-13.09zM434.515 412c0 27.614-22.386 50-50 50H127.484c-27.614 0-50-22.386-50-50V285.684c0-27.615 22.386-50 50-50h257.03c27.615 0 50 22.385 50 50V412zM161.734 295.128h24.195V273.15h-71.78v21.978h24.196v129.44h23.388v-129.44zm83.19 17.743h-20.768v84.786c-2.534 3.174-8.163 8.365-12.21 8.365-4.443 0-5.532-3.032-5.532-7.526V312.87h-20.768v93.36c0 22.664 15.367 22.803 26.56 16.39 4.142-2.375 8.122-5.838 11.95-10.382v12.33h20.768V312.87zm79.942 26.59c0-15.15-5.037-28-20.247-28-7.417 0-13.78 4.727-18.466 10.437V273.15h-20.97v151.418h20.97v-8.586c5.79 7.22 12.12 9.998 19.725 9.998 13.817 0 18.986-10.733 18.986-24.555V339.46zm76.758 3.44c0-20.187-9.627-32.852-29.55-32.852-18.734 0-31.543 13.463-31.543 32.853v50.137c0 20.107 10.142 34.557 29.972 34.557 21.884 0 31.122-13.034 31.122-34.557v-8.39H380.25v7.763c0 9.725-.51 15.625-9.276 15.625-8.36 0-9.07-7.246-9.07-15.625v-21.07h39.72V342.9z"></path></symbol></svg><!-- endinject -->
</div>

Here is the reference to that symbol within the same HTML page:

<svg class="svg-icon social_links__icon" aria-labelledby="title" role="img">
       <title>Twitter</title>
       <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#twitter-icon"></use>
</svg>

I have seen a similar question, however the suggested answers don't solve my problem.

I have tried adding height & width to the source SVG element, the source pattern and the <svg> wrapper around the <use> and neither seems to have an impact.

The class .social_links__icon on the wrapper <svg> adds the following styles:

display: block;
height: 24px;
width: 66px;

Any help is appreciated.

Upvotes: 1

Views: 1355

Answers (1)

Cliff Williams
Cliff Williams

Reputation: 116

I have managed to find the solution to the issue and so I'm posting it here for others who may run into the same problem.

My source <svg> was included at the end of the HTML document, just before the closing <body> tag and the <use> which was referencing a pattern. I tried moving it to just below the opening <body> tag and it worked.

It seems that Safari won't allow a <use> to reference a subsequent part of the document. I'm not sure if this is a browser bug or not, but it's fairly simple to solve once the problem is known.

I also just found an article which has the same solution.

Upvotes: 2

Related Questions