I'm using svgo and a custom plugin for this purpose. In Affinity Designer I add layer names like "myid", if I only want an id, I use "myid.myclass", in case I want both, and ".myclass" in case the class is sufficient. That's the plugin:
fn: function (item) {
if (item.isElem() && item.hasAttr('id')) {
var id = item.attr('id').value.split('.');
if (id.length>1) {
item.addAttr({
name: 'class',
value: id[1],
prefix: '',
local: 'class'
})
item.removeAttr('id')
if (id[0] && id[0] !== '')
item.addAttr({
name: 'id',
value: id[0],
prefix: '',
local: 'id'
});
}
}
}
For my use case that's sufficient, but you could easily enhance it to allow multiple classes, etc.
P.s.: to use it, you also have to disable "cleanupIDs" plugin in svgo config.
