SVG Sprite Generation

[lewishowles]

The ability to name multiple SVG layers the same for the asset generator - perhaps with special code that denotes 'make me a sprite' - and have the generator combine them all into one <symbol>-separated SVG file would be immensely useful.

Currently I'm having to align all SVG elements to the top left of the document, export them all as SVG, clean up the code in each, then combine them into a sprite.

The ideal is Photoshop doing all that for me - e.g.

sprite.svg#lock,lock.png32

sprite.svg#key,key.png32

Would generate three files, two PNGs and one SVG, containing fragment identified <symbol>s for lock and key.

<svg xmlns="http://www.w3.org/2000/svg">
    <symbol viewBox="0 0 50 50" id="lock">
        <title>Title</title>
        <desc>Desc</desc>
        <path ... />
    </symbol>
    <symbol viewBox="0 0 50 50" id="key">
        <title>Title</title>
        <desc>Desc</desc>
        <path ... />
    </symbol>
</svg>

Generating titles and descriptions would likely not be necessary, but the viewBox could be determined from the layer size, which would also be very useful.

[timriot]

Hey @lewishowles!

Not sure if this would be more or less complicated, but when we originally considered spritesheet support, we came up with a tagging schema like this:

Define a spritesheet group container: my.spritesheet

which contains various layers/groups tagged as svg: layer1.svg, layer1.png layer2.svg, layer2.png ...

What are your thoughts?

[lewishowles]

It's an interesting thought - I can see that potentially being easier for you guys.

But in terms of real practicality I think it would be worse for someone like me.

I've literally been working with SVG today and it took forever (hopefully greatly sped up in the next release of Photoshop, but that sounds a lot further away than it probably is). The immediate issue I see with having one group define a sprite sheet is that each of your SVG images will need to be together in the document.

In the case of the site I was working on today, some of the items in the sprite were in the header, some in the footer and so forth. So collating them all into a single group demotes it to the realm of 'something I have to manually do at the end' (like the current need to reposition items on the canvas), rather than something automatic, which seems to be the goal of the asset generator.

I literally came up with the hash idea because that's how they're referenced in the code when used - and it probably needs more thought but I can't think of any other reason you'd want a hash in a file name - so perhaps that could be the hook to let PS know to create a sprite.

[timriot]

This is great feedback, @lewishowles. Thank you for your awesome idea and your candid remarks!

We'll be sure that whatever tagging scheme we come up with will address the use case you propose, without requiring all the SVGs to be in a single folder. (The # does seem like a good idea, but I'd like to think on it more.)

[joelrbrandt]

@lewishowles indeed, this is great feedback. I'm marking this as a feature request. Thanks!

[lewishowles]

Amazing news - glad I can be of some small help.

I use Photoshop, the Asset Generator and code websites almost all day every day so if I can be of any help I'm glad to.

I'd ask if there was any ETA on fixing some of the other major generator issues (smart objects not scaling at full quality, svg needing to be in the top left of the document), but I'm sure you'll be tight-lipped on that!

[joelrbrandt]

@lewishowles We're not all that tight lipped. :-) If you see an issue that's closed, then you can assume it's coming in the next version of PS. And, we've announced that the next version of PS is shipping on June 18.