CODEWITHSUNDEEP
htmlsvg
CNSKnight
CNSKnight

Reputation: 577

Finicky Inline SVG, <symbol/> with <use/> fails to display/render

I pulled a tip from @codepen recently and trying my hand at more portable svg using <symbol/> and <use/>. Mostly it doesn't render but in some places it does. Consider:

<div class="row"><!-- MaterializeCSS -->
    <div class="col s12 m6">
        <div id="componentDiv">
            <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
                <symbol id="svg-icon-facebook" title="Facebook" viewBox="0 0 512 512">
                    <path d="M211.9 197.4h-36.7v59.9h36.7V433.1h70.5V256.5h49.2l5.2-59.1h-54.4c0 0 0-22.1 0-33.7 0-13.9 2.8-19.5 16.3-19.5 10.9 0 38.2 0 38.2 0V82.9c0 0-40.2 0-48.8 0 -52.5 0-76.1 23.1-76.1 67.3C211.9 188.8 211.9 197.4 211.9 197.4z"></path>
                </symbol>
                ...
            </svg>

            <div class="my-svg-icons">
                <a href="login?provider=facebook" aria-label="Log in with facebook">
                    <span class="icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-icon-facebook"></use></svg></span>
                </a>
                ...
            </div>
        </div>
    </div>
</div>

Where row is about 5 levels deep in the DOM (fwiw).

FF and Chrome refuse to render - I've checked ad-blockers are disabled, etc.

Opera happily renders.

I can pull "componentDiv" out into a bare-bones htmlboiler page and it will render.

I also tried locating the symbols block as a body > child with no effect.

Any thoughts?

Upvotes: 1

Views: 443

Answers (2)

mcmimik
mcmimik

Reputation: 1813

I had a very similar problem, but there was a url() inside symbol, that was inside svg tag with the "display: none" style.

Possible workaround: use special rules set to hide the original svg tag instead of display: none:

.visuallyhidden {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}

Here is an example with two classes: try to change class "hidden" to "visuallyhidden": https://codepen.io/mcmimik/pen/RyXNQR

Upvotes: 1

CNSKnight
CNSKnight

Reputation: 577

Workaround:

Seems this FF, Chrome issue has affected many for some time.

My workaround simply involved sourcing the .svg on an <img/> tag rather than the inline <svg/> block. Therein, the xling:href value changed.

From:

<svg>
<symbol id="symbol-id">...</symbol>
...
</svg>
<svg>
  <use xlink:href="#symbol-id></use>
</svg>

To:

<img src="path/to/svg-markup.svg"/>
<svg>
  <use xlink:href="path/to/svg-markup#symbol-id></use>
</svg>

Upvotes: 2

Related Questions