Can SVG sprites work in CSS?

[grimski]

I’ve used SVG sprites for about a year now, along with the svg4everyone plugin for better browser support. I’ve always just used the SVG’s in HTML like this:

<p><svg class="icon icon--phone"><use xlink:href="img/sprite/sprite.svg#icon-phone"></use></svg> Telephone number here</p>

It got me wondering, is it possible to use the same SVG sprite in a CSS file? I’ve gave it a shot but I’ve not got it working. I wondered if anyone else has any better luck or if it is possible at all?

The icons in my SVG file are just formatted like this:

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

        <symbol id="icon-phone" viewBox="0 0 20 20">
            <path d="M11.229,11.229c-1.583,1.582-3.417,3.096-4.142,2.371c-1.037-1.037-1.677-1.941-3.965-0.102
            c-2.287,1.838-0.53,3.064,0.475,4.068c1.16,1.16,5.484,0.062,9.758-4.211c4.273-4.274,5.368-8.598,4.207-9.758
            c-1.005-1.006-2.225-2.762-4.063-0.475c-1.839,2.287-0.936,2.927,0.103,3.965C14.324,7.812,12.811,9.646,11.229,11.229z" />
        </symbol>

    </defs>
</svg>

[Shikkediel]

Could you elaborate on what you mean by “using it in a CSS file”?

As far as I understand what you’re after, you could only use it externally as an image. Specific ids inside the SVG markup aren’t accessible that way.

[grimski]

Sorry, basically how you would normally set a background-image in a CSS file. Like this…

.item {
    background-color: black;
    background-image: url(...img/sprite/sprite.svg#icon-phone);
    background-repeat: no-repeat;
    background-size: 20px;
}

Yeah I don’t think it’s possible either but I just thought I’d ask as it’d save me having duplicated images! :)

[Author]

Posts