Svg-sprite-loader: Symbols vs. Stacking

[timkelty]

Curious why this uses svg "stacking" vs. multiple symbols (which seems like a more modern approach): https://css-tricks.com/svg-symbol-good-choice-icons/

Or is there a way to implement this behavior I'm missing?

[timkelty]

Ah ok...I guess I was a bit confused, it appears you _are_ doing multiple symbols w/ IDs.

But then you're also calling those symbols with <use> and using the :target technique.
Why do we need to do both?

[princed]

What do you mean by target technique?

[timkelty]

This css is included in the sprite:

<style>use {display: none;} use:target {display: inline;}</style>

• As well as wrapping <symbols> with <defs>.
• As well as referencing/outputting it with a <use> tag

This seems to be mixing 2 different techniques.
If you have symbols, that's all you need (AFAIK).

This is only necessary when you're stacking with <defs> / <g> elements. If you're using symbol, they don't display as you define them.

[kisenka]

Because if you refer to image in external sprite, e.g. .logo {background-image: url(sprite.svg#symbol_id)} symbol won't renders by itself, you should render it manually. That's why :target is used.

[timkelty]

@kisenka Ah, I didn't realize that!
I thought a fragment identifier for a symbol would display (though I knew there were browser compat. issues).

Thanks!

[princed]

@kisenka Should we document it maybe?

[kisenka]

@princed yep