Fixing SVGs written by Affinity Designer

Using Affinity Designer is great for designing Vectors, but unfortunately it stores gradient- tags at the end in the file, hence nanosvg is unable to recognise it which results in improper rendering.

With that helper script (which I included in my build-process) it works now by rendering def tags. (Before that I did it always manually…urghh)

Cheers, Patrick


Ugh, yeah, I’ve run into that issue before. I think with Adobe Illustrator there are export options for these things, but if you set them wrong you run into this.

Yep, but unfortunately Affinity Designer has no option on export for something like this. Adobe is too expensive and Inkscape is something I couldn’t work productive with. (Actually I can’t understand how people could work with Inkscape, I tried it 10m or so and throw it right into the trash… - but it’s always a matter of teste of course)

Oh, for sure. I was using Illustrator because I already have a subscription. I looked at Inkscape, and it didn’t look like something I wanted to spend time with. Now I’m using Adobe XD, which is much, much, much easier to understand. It is free, too. But I have heard very nice things about Affinity, so cool you can fix those export issues.

I did a powershell batch script for Inkscape that trims off extra tags. Not at my computer atm but I can upload if you want to try.

1 Like

Yeah, I somewhat similarly run my SVGs through inkscape’s command line to make a few edits. I find inkscape handy for that, and don’t use it for anything else.

XD is 10 bux per month as far as I can see @Squinky.Labs

No, it isn’t. There is a paid version which removes some limitations in workflows I never use, but the free version has all the design and drawing features. Here’s their comparison page: XD Individual Pricing | Free Starter Plan Info | Adobe XD


Powershell for converting svg in Inkscape:

# See Inkscape verbs at
$cmd = "C:\Program Files\Inkscape\bin\inkscape.exe"

# Converts all svg images in $fromFolder to $toFolder
$fromFolder = "C:\temp\images"
$toFolder = "C:\temp\images-converted"
$files = Get-ChildItem -Path $fromFolder -Filter *.svg
ForEach($file in $files) {
  & $cmd "--actions=EditSelectAll;ObjectToPath" "--export-plain-svg" "--export-filename=$toFolder\$file" "--batch-process" "$fromFolder\$file"
1 Like

that’s pretty cool. would that also convert font glyphs to paths?

Aha, the page I saw only had the 9.99/month pricing. Sneaky…

1 Like

You can execute the verbs sequencially in the command input, but I couldn’t find much documentation beside the header file.

1 Like

Patience is the key to Inkscape.

I am also using Adobe XD and find it particularly well suited for module design (repeating components, module color variations and so on).

Do you have anything special setup (template or export routine) to ensure the designs work well in rack?

I made a new post rather than hijack this one :wink: Tagged you

1 Like

Yes. I use a similar line to convert text elements to paths:

inkscape '--actions=select-by-element:text;object-to-path' --export-filename=- --export-plain-svg "${@}" "${from}" | xmllint --format - > "${to}"