SVG graphic incorrect colors

[TobStu]

Hi, I work a lot with illustrations from the site https://2.flexiple.com/scale/all-illustrations.  I enter my HEX color code there and download the SVG to edit it in Affinity Designer. Problem: My chosen corporate color is no longer displayed in Affinity, but only the default color (light blue) of the image. In other programs like Inkscape it works, there I see the desired HEX color code. Could you maybe check this? I am sure it is a bug in the file processing. I am working on a Mac M1. 

Thanks Tob

[Pšenda]

ICC Profile for monitor in OS is OK?

[v_kyr]

Hi and welcome!

A quick look at that site https://2.flexiple.com/scale/all-illustrations and trying out a "Gardening.svg" from there shows, that the SVG code from that site includes the corporate color as an style fill after their default initial used fill color. - Meaning here, where darker blue is their default initial fill color and lighter blue here what I've setup there as the corporate color to be used ...

Quote

...
<a0:path d="M672.18 709C667.49 715.6 665.51 723.82 665.18 731.91C664.85 740 666.18 748.06 667.4 756.06L683.54 792.37C684.48 775.89 682.82 757.94 676.94 742.51L671.76 744.61C674.82 742.4 676.38 738.56 676.68 734.79C676.98 731.02 676.22 727.27 675.45 723.57L669.86 727.57C673 721.911 673.832 715.257 672.18 709V709Z" class="change-color-in-svg" fill="#4D61FC" style="fill: rgb(77, 252, 231);"/>
...

ADe seems during parsing in such SVG code with a "fill=xxx" followed then by a "style=(fill: rgb xxx)" in paths to take and just interpret the first "fill=xxx" one, aka the initial/org darker blue one here!

Now if I open the original "Gardening.svg" file inside an text editor and remove inside of it's SVG code just all the occurrences of that fill="#4D61FC", so that only the style based custom color fill is left in those SVG path definitions, then Affinity will parse & showup of course correctly only that setup custom color then.

Quote

...
<a0:path d="M672.18 709C667.49 715.6 665.51 723.82 665.18 731.91C664.85 740 666.18 748.06 667.4 756.06L683.54 792.37C684.48 775.89 682.82 757.94 676.94 742.51L671.76 744.61C674.82 742.4 676.38 738.56 676.68 734.79C676.98 731.02 676.22 727.27 675.45 723.57L669.86 727.57C673 721.911 673.832 715.257 672.18 709V709Z" class="change-color-in-svg" style="fill: rgb(77, 252, 231);"/>
...

Here for try outs ...

• Gardening-org.svg
• Gardening-test.svg
• Gardening-org.afdesign
• Gardening-test.afdesign

[v_kyr]

The whole looks to be an Affinity SVG parsing/interpretation bug, since usually according to the SVG spec, a style attribute prevails.

Quote

SVG style attribute

The SVG element style attribute works in any SVG tag. When overriding attributes in the style attribute with CSS, the CSS property in the style attribute prevails.

<rect style="fill: beige" fill="aliceblue" width="300" height="100" />

The element is filled with beige because the declarations in the style attribute take precedence over the fill attribute. Just as with HTML elements, a style attribute sits closer to the element than a class—so style also prevails over global CSS declarations.

 

[Lee D]

This is already logged with our developers.