add a new mode that combines the view and the symbol mode.

[flobacher]

through the use of 'use'-tags, filesize increases only very little

TODO:

• rebase
• reduce lodash usage
• needs tests

[flobacher]

maybe the name of the new mode should be changed to combined, or something else, but the idea is to be able to reference symbols via use tags in the html and to be able to use the same spritesheet via the help of the generated positions (view mode) in css for e.g. in an ::after selector.
i am really looking forward to hear your feedback.

[jkphl]

Hi @flobacher,

thanks for these suggestions. Due to my current workload (and some travels the next days) I'll probably not be able to review this before mid of next week. Thanks for your patience!

Cheers, Joschi

[flobacher]

Hi Joschi,

no need to hurry. just think such a combined spritesheet is realy handy.
u can reference symbols via their id in use tags.
and in css you can use the background-positions calculated from the viewmode.
and since it is all combined in one file, it will only be downloaded once.
this way it is also possible to generate a png fallback from the spritesheet,
which was not possible via the symbol mode alone.

hope you like it!

Cheers, Flo

Zitat von Joschi Kuphal notifications@github.com:

Hi @flobacher,

thanks for these suggestions. Due to my current workload (and some
travels the next days) I'll probably not be able to review this
before mid of next week. Thanks for your patience!

Cheers, Joschi

---

Reply to this email directly or view it on GitHub:
#81 (comment)

[flobacher]

I just renamed the mode to universal, because its universal nature (symbols, views and positions all in one spritesheet) reminded me of the universal module definition pattern for js modules. I hope you think as well, that this is a better name for this mode.
cheers, flo

[jkphl]

Hi @flobacher,

first of all sorry for not being more responsive! It really took me until now to find the time to thoroughly review your suggestions.

Although there are some parts that I would solve a little different, I really like your approach. In fact I wonder if we couldn't even take this a little further. Let me explain:

1. The css mode is equivalent to your <symbol>s in combination with the <use> elements..
2. The view mode is an extension to the css mode adding the <view> elements.
3. The defs, symbol and stack modes are mutually exclusive, but could probably all be extended by the <use> plus <view> features (not sure about the stack mode, but I'll try).

So why not generally configure a sprite by combining "flags" like this (hope you understand the EBNF like try of an explanation):

Sprite                    = UniversalSprite | BackgroundSprite ;
UniversalSprite           = LibrarySprite , { LibraryBackgroundSprite } ;
LibrarySprite             = DefsSprite | SymbolSprite | StackSprite ;
BackgroundSprite          = CssSprite, { ViewSprite } ;
LibraryBackgroundSprite   = UseLibrarySprite, { ViewSprite } ;

In words:

1. First you have to decide wether you want one of the "library based" sprites (symbol, defs or stack) or just a -"simple" CSS sprite for use as background image (css / view).
2. In case of the latter you have to decide whether you want the <view> elements or not (IMHO the only reason against them could be to save some bytes ...).
3. If you go for the library based sprite, you may additionally enable the background capabilities (including or excluding the <view> elements).

This could elmininate the need for the different modes altogether and make the configuration more like a flag based process. Maybe that's a lot simpler than the current way of configuring. What do you think? Looking forward to your thoughts!

Cheers,
Joschi

[flobacher]

Hi @jkphl,
thanks for taking the time to get back on me.. I am sure, you can do a much better way of integrating that new mode into your code than me! And yes, I like your flag based approach of combining the diffrent modes into a single file very much! Just one comment.. I think at Point 3 of your explanation I would just add for completeness, to add those bg capabilities via tags inside the spritesheet, so that the shapes don't have to be duplicated.. and the , just like the just adds a couple of bytes, so that should not hurt anyone.. I would really love to see that in svg-sprite =)

[jkphl]

Hey @flobacher,
just to let you know: I'm planning a major overhaul of svg-sprite somewhere around August, mostly focusing on usability and ease of configuration. I'll try to combine all this then.
Cheers,
Joschi

[flobacher]

Great!!!

Let me know, if you need any help!

Cheers,
Flo

Zitat von Joschi Kuphal notifications@github.com:

Hey @flobacher,
just to let you know: I'm planning a major overhaul of svg-sprite
somewhere around August, mostly focusing on usability and ease of
configuration. I'll try to combine all this then.
Cheers,
Joschi

---

Reply to this email directly or view it on GitHub:
#81 (comment)

[stikoo]

This is exactly the functionality I'm after. I'm currently moving to a symbol workflow but would like to retain the ability to use the CSS method as well. Will just have to have 2 output modes for now :(

[XhmikosR]

@flobacher @Kreeg I rebased this and updated to match the current code, but, unfortunately, I can't push to @flobacher's master branch: https://github.com/svg-sprite/svg-sprite/compare/pr/81

We still need tests, though.

[Kreeg]

@XhmikosR do you mean screenshot tests?

[XhmikosR]

Whatever tests are needed, not sure exactly. I just don't see any tests is all :)

If you plan to land it later @Kreeg I guess we should close this PR and you use the branch I pushed to our repo.

[Kreeg]

@XhmikosR ok i will land it later. And I will close this PR then. For now I think it should be opened

[Kreeg]

Update:
got the result file

https://pastebin.com/raw/Hcd18qP5

This is result thi the same input with view mode in tests

[Kreeg]

I am not quite follow what kind of result is expected here...
So in this mode I can use sprite in img src="svg#name" elements like in symbol mode and i still can use css backgound?
The results are

So css mode is working but img is showing whole svg file.
Am i wrong somewhere or it is just code isn't woring?

[flobacher]

@Kreeg I usually work with symbol mode via the following markup

<svg viewBox="0 0 30 10">
  <use href="./path-to-my-spritesheet/svg-sprites.svg#mysymbol" />
</svg>

I don't think referencing a symbol from an svg works via img tag..

[Kreeg]

@flobacher Ok I'll what we can do here. The problem here is in tests. There is a browser (puppeteer via chromium) security problem in assessing file://... svg from file://...html.

[flobacher]

@Kreeg use a standard url, so relative path or absolute (including the protocol https:// ) using file:// should not be necessary

[Kreeg]

Ok. that is what I've got now

The problem here now is with the css version. It's just differs from svg use version

[flobacher]

@Kreeg hm.. looks like this is because of the gradients that are also referenced via id

[Kreeg]

Maybe this is related #74?