Webflow SVG import clash with Affinity SVG file

Alan7 · August 29

This is more of a conflict with Webflow than a bug with Affinity.

I have begun using Affinity 2 with Webflow and I came across a conflict between the Affinity svg save file and how Webflow handles it. Perhaps I am doing something wrong on my end, but I tried saving colored svg's using a combination of ways.

So the issue is with Webflow's "No Code" principals. Most people follow tutorials and the most used way of embedding an svg into their website is to use the "SVG Import" plugin. This plugin sets "fill" to be "currentcolor" for most cases or sets the color on fill. Anyway, this causes an error/conflict with Affinity's svg file. If the svg was given fill before saving the Affinity file uses CSS, "style="fill:[color]"" for the fill.

When uploaded to Webflow using this commonly used plugin, it is embedded as "["style="fill:[color]"" ]" and for a reason I am not sure of, this ends up rendering nothing or an all black svg that you cannot change the color of.

The fix is simple enough. On the 'Path' settings you will have to change the left and right of the '=' to 'fill' = [#[hex] or 'currentcolor'], but because so many people do not know code it may cause frustration.