Using `absURL` in a SVG `<use>` element

I’m trying to include an external SVG sprite file via an SVG use element. absURL does not seem to be outputting any content at all. If I put it in an a href, it does work, but that’s obviously not what I am trying to do :).

Code:

<svg>
    <use href="{{ "/icons.svg" | absURL }}"></use>
</svg>

Expected:

<svg>
    <use href="http://mysite.com/icons.svg"></use>
</svg>

Actual:

<svg>
    <use href=""></use>
</svg>

What does it do? You should show what you expect, and what is doing, and point to a repo so others can reproduce (no one is going to build an example site to test this). Please refer to requesting help, it will show you have to get answers. :slight_smile:

1 Like

I’m sorry, that was a horrible message. I’ve updated it with an example, and I’ll add a repo later.

1 Like

Cool, when you link to a repo, I’ll take a look.

I don’t quite understand you on this point. It looks like you are including href in your code example. I am not sure it is as obvious as you think. :slight_smile:

You are right that it is not as obvious as I thought. It ended up being that I had commented out baseURL while testing, and still assumed absURL would work :man_facepalming:. I’m not quite sure what I changed, but it is working now.(adding a baseURL didn’t seem to affect it) I’m really sorry for the trouble, thanks for the help.

And thanks for the awesome support!

1 Like