Show me an easy way to create SVG icons for web

[Stevoh]

Hi,

maybe this topic is an already solved one. I want to create and export SVG icons in Affinity Designer. Actually i have to modify the code after exporting the icon to set the fill attribute and remove unnessesary stuff.

 

Is there a easy way to create and export icons including fill="currentColor" and stuff?

 

Thanks,

Steven 

[GarryP]

Welcome to the forums @Stevoh

If you can supply an Affinity document that you are trying to export to SVG, and detail the parts of the SVG code which are being exported in a way which you don’t want, then someone might be able to help you in choosing the best export settings.

[v_kyr]

On 11/11/2022 at 3:15 PM, Stevoh said:

to create and export icons including fill="currentColor"

You mean to use the currentColor value from CSS and to pass that text color then through to the SVG shapes on export? - Nope, there is no direct way in ADe to do and associate that for SVG code. Or in other words it doesn't have any clues about CSS here for SVG code generation, thus you will have to do that as you already did, afterwards manually via editing in an text/code editor.

[Stevoh]

@v_kyr Thats a pitty. We're working in that way, now. Maybe this is a nice feature for AD in the future.

@GarryP Do you think about another solution?

 

Thanks for your answers.

[GarryP]

25 minutes ago, Stevoh said:

Do you think about another solution?

Unless you can supply the file and information I asked for we can only guess at a solution, and that could take a long time with a lot of unnecessary dead-ends.

Note: It's not a major problem, and you haven't caused any trouble, but it's best not to “at” someone (e.g. @GarryP) unless you are pretty sure they will be okay with it; some people don’t like being “at-ed” as it can cause unwanted forum notifications.

[Stevoh]

Oh - I'am sry for that.

here is a similar file:

testicon.afdesign

[GarryP]

Thanks for supplying the file.
And now can you supply the extra information which details what you mean by “create and export icons including fill="currentColor" and stuff”?
Especially the “and stuff” because that’s very vague.

[Stevoh]

I am talking about the implementation via CSS in my frontend. i want to set the fill color via CSS. I think, v_kyr gave me the answer, already: there's no clean export funcktionality. 

[skyphyr]

I agree that this would be very useful. However, given it was suggested to Serif back in 2015 (https://forum.affinity.serif.com/index.php?/topic/12228-designer-css-style-sheets-for-svg/), I'm guessing we won't be seeing this. Though this severely limits the usefulness of Designer in web development workflows for SVGs. Hand editing of svg files is not a long term solution.

[techtechtech]

Another vote for this to be updated and added to Serif, testing the water from Illustrator and this jumped straight out at me. Lots of other features I like but this one is a requirement for me.

Thanks