Andez

I feel the same. I'd like classes to be added so you can dynamically change styles in browser using Css. IDs are not great for this.

@Alfred - I've redone the question

I want to be able to create say a monochrome icon - something with a foreground colour and a background colour - and then somehow tweak in a web page. At the moment I have to use SVGO to convert Affinity Designer SVG digital high quality exports to something I can paste in the browser. Exported files Round Rect <?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 400 404" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><rect id="round-rect" x="0" y="1.757" width="400" height="400" style="fill:none;"/><path d="M367.709,119.602c0,-45.343 -36.812,-82.155 -82.155,-82.155l-171.108,0c-45.343,0 -82.155,36.812 -82.155,82.155l0,164.31c0,45.342 36.812,82.155 82.155,82.155l171.108,0c45.343,0 82.155,-36.813 82.155,-82.155l0,-164.31Z" style="fill:none;stroke:#000;stroke-width:29.17px;"/></svg> Pacman <?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 400 400" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><rect id="pacman" x="0" y="0" width="400" height="400" style="fill:none;"/><path d="M376.85,69.85c-36.675,-42.75 -91.1,-69.85 -151.85,-69.85c-110.463,0 -200,89.538 -200,200c0,110.462 89.537,200 200,200c60.75,0 115.162,-27.088 151.85,-69.85l-126.85,-130.15l126.85,-130.15Zm-101.85,-22.737c15.4,0 27.888,12.487 27.888,27.887c0,15.4 -12.488,27.888 -27.888,27.888c-15.4,0 -27.888,-12.488 -27.888,-27.888c0,-15.4 12.488,-27.887 27.888,-27.887Z" style="fill-rule:nonzero;"/></svg> Clean So from powershell in Windows 10: npm install -g svgo svgo -f "./demo-export-2" This overwrites the exported files to a cleaner more friendly web format. Cleaned Files Round Rect <svg viewBox="0 0 400 404" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="1.5"><path fill="none" d="M0 1.757h400v400H0z"/><path d="M367.709 119.602c0-45.343-36.812-82.155-82.155-82.155H114.446c-45.343 0-82.155 36.812-82.155 82.155v164.31c0 45.342 36.812 82.155 82.155 82.155h171.108c45.343 0 82.155-36.813 82.155-82.155v-164.31z" fill="none" stroke="#000" stroke-width="29.17"/></svg> Pacman <svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2"><path fill="none" d="M0 0h400v400H0z"/><path d="M376.85 69.85C340.175 27.1 285.75 0 225 0 114.537 0 25 89.538 25 200s89.537 200 200 200c60.75 0 115.162-27.088 151.85-69.85L250 200 376.85 69.85zM275 47.113c15.4 0 27.888 12.487 27.888 27.887S290.4 102.888 275 102.888c-15.4 0-27.888-12.488-27.888-27.888 0-15.4 12.488-27.887 27.888-27.887z" fill-rule="nonzero"/></svg> Demo I have put together a little demo: https://codepen.io/andez2000/pen/wvMmjKJ What I want to do Ideally an easy way to change black to orange, and say the transparent background to blue (random colours) - but not currently working in what I want. Is this possible to do? Adobe Illustrator provides a mechanism to add classes to graphics which would be a killer feature for AD. https://codingwithspike.wordpress.com/2016/05/01/css-styling-illustrator-svgs/ Thanks

Thanks for that... Will check it out

Hi all, SVG newbie here. I am curious as to how the professional world of putting together icon packs. I have currently setup my Affinity Designer project using artboards. I have styled one or two icons on how I want. From the export Persona's I can set these to export as both png and svg with required sizes. All of that is good. I am thinking next steps in progressing the icons. So my thoughts are what are the best practices around: 1. Having a circle and a rectangular background per icon Do I create an artboard for each? If I decide I want a different width for the line - and for that to reflect across each artboard, how would that work? 2. Having different colours to export for each icon with the background (so blue above, but if I wanted to use red for example) So when exporting to a bitmap like png/jpg with different colours - what best practices/approaches would you suggest for this? Thanks Paul