Jump to content

Recommended Posts

Posted

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

Posted

ICC Profile for monitor in OS is OK?

Affinity Store (MSI/EXE): Affinity Suite (ADe, APh, APu) 2.5.7.2948 (Retail)
Dell OptiPlex 7060, i5-8500 3.00 GHz, 16 GB, Intel UHD Graphics 630, Dell P2417H 1920 x 1080, Windows 11 Pro, Version 24H2, Build 26100.2605.
Dell Latitude E5570, i5-6440HQ 2.60 GHz, 8 GB, Intel HD Graphics 530, 1920 x 1080, Windows 11 Pro, Version 24H2, Build 26100.2605.
Intel NUC5PGYH, Pentium N3700 2.40 GHz, 8 GB, Intel HD Graphics, EIZO EV2456 1920 x 1200, Windows 10 Pro, Version 21H1, Build 19043.2130.

Posted

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 ...

☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan
☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2

Posted

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.

 

☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan
☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.