SVG Sprite Symbols as CSS Content or Background?

[Fatbat]

I’m using the technique for including SVGs described here https://css-tricks.com/svg-symbol-good-choice-icons/ whereby you create a doc that looks something like this…

<svg xmlns="http://www.w3.org/2000/svg">

    <symbol id="arrow-left" viewBox="0 0 10 16">
        <path d="M9.4 1.4L8 0 0 8l8 8 1.4-1.4L2.8 8z"/>
    </symbol>

    <symbol id="arrow-right" viewBox="0 0 10 16">
        <path d="M0 14.6L1.4 16l8-8-8-8L0 1.4 6.6 8z"/>
    </symbol>

</svg>

Include it in the top of your HTML and then insert the SVG icons in your markup like this…

<svg class="arrow-right">
  <use xlink:href="#arrow-right" />
</svg>

It’s easy and works great. However, I’m trying to use the same icons in my CSS pseudo classes :before and :after using an empty content attribute and the SVG in the background. Something like this…

.title:after {
    float: right;
    width: 16px;
    height: 10px;
    content: "";
    background: url('#arrow-right');
}

and am having no luck whatsoever. I’ve tried this numerous ways but have yet to figure out the right syntax.

Is this even possible? I’ve been searching and searching for an answer but haven’t come up with anything.

[Fatbat]

Instead of deleting my posts and keeping my thread 4 pages deep where no one will see it, maybe you can actually help me? Can you answer my question please?

[Paulie_D]

As far as I am aware, what you are trying to do is not possible.

I don’t believe SVG fragment identifiers can be placed in pseudo-elements like that unless you are using a sprite which isn’t the case here…I think.

[Fatbat]

Thank you Paulie. I appreciate the reply.

We are using a sprite though. The first bit of code above is the sprite which is either called as an include or which is hard coded at he beginning of the HTML doc.

[Paulie_D]

Sprites can be used as background images as a whole, not part. You’d need to use background positioning etc to manage this.

What I am saying is use the whole SVG not one small part of it.

[_icarus_]

@Fatbat

From my understanding of the information you have provided –

You are using an SVG Sprite – which gets loaded in your HTML doc and must be xlinked.

You are then trying to access symbols that you have loaded into your HTML file, from a CSS/less/SASS file. Due to the nature of SVGs and their necessity for xlinking – you will not be able to use an SVG you have loaded into the DOM through your HTML file, to modify the styles of your page or site.

For the specific use case that I am imagining you are trying to achieve(an SVG icon used as a background image), consider this:

you can load your svg as the background-image property, then use background position to adjust which icon/version of the icon to display. That would look something like this:

.icon{
background-image: url(directory/path-to-svg-sprite.svg);
width: 1em; height: 1em;
font-size: 12px; //makes the width AND height 12px (you would need to adjust your svg viewBox in this particular use case)
display: inline-block;
position: relative;
}
.icon.icon-arrow-left:before{
background-position: your specific icon coordinates here;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
content: "";
display: block;//psuedo element best practice is to set a display value
}

The tricky thing about this method however, is that you may only access your SVGs as they appear in your sprite – you cannot modify the actual properties of the SVG. So if your icon needs to fade from red to black, you will need a red icon, and a black icon in your sprite sheet.

[thejamesnash]

Yep, it is possible using Fragment identifiers. The implementation you’re using requires the CSS:

.title:after {
    background-image: url(directory/path-to-svg-sprite.svg#arrow-right);
}

That should do it! Example here: http://codepen.io/rgba/pen/EZbVLR

The caveat is that the current version of Safari doesn’t support fragment identifiers within CSS.

[Author]

Posts