Giters

svg-sprite / svg-sprite

SVG sprites & stacks galore — A low-level Node.js module that takes a bunch of SVG files, optimizes them and bakes them into SVG sprites of several types along with suitable stylesheet resources (e.g. CSS, Sass, LESS, Stylus, etc.)

Home Page:https://github.com/svg-sprite/svg-sprite

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Adding a hybrid symbol-sprite mode

rinart73 opened this issue · comments

commented

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.

commented

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