Add support for SVG fragments in CSS

Hi, first of all thanks for the great plugin, working with SVG icons is much easier with it.

Today, I’ve decided to try to use generated sprite in CSS background property. This technique is supported in most modern browsers, and you can see an example here – http://jsfiddle.net/simurai/7GCGr/

Unfortunately, it seems that the current generated sprite output (specifically, <symbol> element) does not support this functionality. When I add a style declaration like background: url('/icons-sprite.svg#plus') no-repeat; the whole sprite is included, not a single fragment. And when I try to limit it’s size, the sprite is scaled as a whole as well.

I was wondering if it’s possible to extend current configuration options to support the kind of output needed to allow using svg fragments from external sprites in CSS. This is an example of svg sprite which allows to included separate fragments – http://dahlström.net/tmp/sharp-icons/svg-icon-target.svg

I’m sorry for not providing more constructive feedback, and I hope I’ll have time to investigate the issue further in future. But since you obviously know more about SVGs that I do, I just wanted to plant this thought and maybe discuss it a bit more.

It is entirely possible that I am missing something and this should be working out of the box. I am using 3.0.0 version with webpack 4.

Thanks.

Edit: I’ve decided to add my current config just in case

    new SVGSpritemapPlugin('./src/assets/icons/**/*.svg', {
      output: {
        filename: 'icons-sprite.svg',
        svg4everybody: false,
      },
      sprite: {
        prefix: false,
      },

Edit2: Upon further investigation, I’ve figured out that the only thing missing from output in order to be able to use svg fragments in CSS is style tag which could look similar to the following:

<style>
    symbol { display: none }
    symbol:target { display: inline }
</style>

Looking at the docs, there’s no way to include such tag in output file, right?

Also, dimensions of fragments included in CSS seem to be affected by width and height attributes on <use> element in the sprite. Here’s the same icon used as background with the following properties

  background-image: url('/icons-sprite.svg#alert');
  background-size: 100px;

with <use xlink:href="#alert" width="28" height="24"/>: and with <use xlink:href="#alert" />:

As you can see, when attributes are in place, icon is much smaller than expected size. Also, removal of width/height doesn’t seem to have any negative effect (I’ve checked usage in HTML and CSS).

I’d like to hear you thoughts on the matter.

[stasgavrylov]

@cascornelissen finally managed to test your approach. Thank you, fragments work great! I’m closing the issue.

[cascornelissen]

No problem at all 😄 Thanks for the update!