SVG sprite css no inline ?

[vzed]

Can this be done in real life ?

html:

<tag class: icon dog ></tag>

awesome.svg:
<svg>
<symbol id=”my-dog”></symbol>
<symbol id=”my-cat”></symbol>
<symbol id=”my-fish”></symbol>
<symbol id=”my-dogcatfishpony”></symbol>
</svg>

CSS:
.icon{ w: 30; h:30; display: block};

.dog{
background-image: url(‘../svg/awesome.svg#my-dog(viewBox(0, 0, 100, 100))’);
background-repeat:no-repeat;
}

This works if I reference the individual svg files but I’m tring to utilize the svgstore an can’t get it working I’m all google’d out , hahaha

[vzed]

I don’t know if i posted this is in the wrong section or if my question was unclear but basically I’m asking is it possible the target a “symbol” by path+id as a background image in css?

Are there reasons not to do this if it is possible?

[Paulie_D]

is it possible the target a “symbol” by path+id as a background image in css?

No…it’s not.

As a background image it’s just an image…you can’t reach into it any longer.

[vzed]

I’m kind of late to the svg party, is it a “NO,NO” to have something like this in many many places :

<buttontag >
<span_> <svg><use class:icon-doit>…</use></svg> </span_> Do it
</buttontag>

With things being more modular these day is inline not as frown upon? Relatively speaking

[Paulie_D]

That’s exactly how it’s supposed to work…in fact you don’t even need the span.

Instead of an image, you have a use…it’s just an HTML element like any other.

If you don’t want to style the use at any point you can still use an image (and SVG image) but if you want fine grain control then a use is the best option.

Chris covers this in his SVG Lodge course which is now free.

[vzed]

thx

[Author]

Posts