Adding a hybrid symbol-sprite mode

[rinart73]

In this article you can see symbol svg images that can also be used as background sprites. The article was published in 2015 but in seems that since then all browsers added support for this.
You basically define view ares and then via the use tag you display SVG symbols in them.

<symbol viewBox="0 0 32 32" id="symbol-one">...</symbol>
<symbol viewBox="0 0 32 32" id="symbol-two">...</symbol>
<view id="symbol-one-view" viewBox="0 0 32 32" />
<view id="symbol-two-view" viewBox="0 33 35 35" />
<use xlink:href="#symbol-one" width="32" height="32" x="0" y="0"></use>
<use xlink:href="#symbol-two" width="32" height="32" x="0" y="33"></use>

I think this could be a good addition to the modes.

[Kreeg]

Hello @rinart73! This one is already in development, but we encountered some issues. For more info you can check #81
We welcome any help. The development branch is https://github.com/svg-sprite/svg-sprite/tree/pr/81

[cotwitch]

What a pity that this is still not possible :(

I think it would be really great to have just one external sprite/definition (which could be cached on client) and it could be usable as inline element (due to that it's contents/elements could be controlled via CSS) and simultaneously, it could be used as an CSS sprite. Without "hybrid/universal" mode this could not be achieved. Or am I wrong?

Technically I mean following:

HTML

  <svg>
    <use xlink:href="icons.svg#icon" />
  </svg>

CSS

  .icon {
    background-image: url(icons.svg#icon-view);
  }