Use path ids based on shape layer names

[nimbupani]

A user (Tom Gantzer) requests using layer names to start IDs in SVG paths. Here is an example:

More reasons why:

My typical workflow is to merge the components of a path before I export. I do this so I know the SVG path data is going to be as minified as possible, without any layered PS paths potentially adding extra code I don't need. As for complex shape layers, you could build the shape in different layers and apply different styling to each, to build up the overall effect. I think the majority of PS users would be used to this approach anyway, as it lends itself to the workflow with Layer Effects in Photoshop.

[DmitryBaranovskiy]

@nimbupani Followup question: What ids this combination should create? Note that name “Rounded Rectangle 1” was given automatically by Ps.

[dirkschulze]

Also, we actually don't use ids anymore as far as I can tell. @DmitryBaranovskiy am I mistaken?

Question is if and when we should use ids. @nimbupani could you try to figure this out?

[DmitryBaranovskiy]

We don’t want to put ids on every element unless user wants to. As I can see it, the problem is that we can’t distinguish if layer name was default or actually given by a user.

[DmitryBaranovskiy]

So, after this commit, previous layers will have following ids: • “Fleur-de-lis” • “circle” • “circle-2” • none • “🎈”

[tomgantzer]

Hey sorry for the late follow-up.

In my specific use-case, I have around 200 icons I need to export as SVGs. These icons are all extremely similar and follow the same Icon and BG layers. In my CSS, I want to set up a class for an Icon, and a class for a BG layer so I can control every icon button in my website from the same stylesheet.

This SVG code is going to be embedded inline in the HTML so that different states can be achieved by using javascript to change CSS properties. For example, A disabled button is just the default BG color, with the icon layer opacity set to 0.4.

What I currently have to do:

• Run a minifier of some kind (SVGO or by hand) to remove the metadata I don't want and the style tags from being inline.
• Remove the default class names referenced in the SVG g, path, rect tags (usually something like cls-1, cls-2, cls3 etc).
• Move the styling information from the style tags into my CSS stylesheet under a suitable class name.
• Change the class names in the HTML to match my stylesheet.

I can then interact with this in the DOM for state changes, such as hover, selected, active, in focus, disabled etc.

I hope this helps in some way!