Jump to content
JasonF

Affinity Designer SVG Export Questions - Changing Colors and No Fill Colors on Some Paths

Recommended Posts

I'm having issues exporting a particular file to SVG and am hoping someone can help me determine what I'm doing wrong.

I have two primary issues with my export of this particular file (attached):

1. On export, the black color for all text in the image, specified as #000000 in the AD file, is changed to #030405. I can correct this manually in the code of the SVG, but I'd prefer to not have to. The red color (#ed1c24) of the Flag logo is not being modified during the export.

2. For the elements at the top of the image (flag logo, DiveTag and TM), fill colors are being supplied in the SVG code: 

style="fill:#030405;fill-rule:nonzero;"

For the elements at the bottom of the image, though, (Reward Text, URL), fill colors are NOT being supplied in the SVG code:

style="fill-rule:nonzero;"

While the SVG renders correctly in a web browser without the fill colors being specified, it does not render properly in the PDF generator control we are using (https://github.com/dompdf/dompdf). It just fails to render the paths without color specified in their styles. Again, I can correct this manually in the code, but I am wondering if there is a way to force AD to specify fill colors for all exported SVG paths? Also, why is it specifying fill colors for some of the paths in my file, but not others? 

Thanks for any help you can provide!

Personalized_tag_contents_750x750.afdesign

Personalized_tag_contents_750x750.svg

Share this post


Link to post
Share on other sites

Hi JasonF,

Welcome to the forums :)

I can certainly look into this for you. Could you please confirm the specific SVG export settings you're using, so I can fully replicate your workflow?

Share this post


Link to post
Share on other sites

Thanks for looking into this! 

As for specific export settings, I've tried a bunch of different combinations with similar results each time. I just exported again using the export settings in the 2 attached screen shots below:

 

 

AD_SVG_export_settings1.png

AD_SVG_exportsettings2.png

Share this post


Link to post
Share on other sites

No problem at all, thanks for that :) 

On 8/31/2018 at 6:09 PM, JasonF said:

On export, the black color for all text in the image, specified as #000000 in the AD file, is changed to #030405. I can correct this manually in the code of the SVG, but I'd prefer to not have to. The red color (#ed1c24) of the Flag logo is not being modified during the export.

This is a strange issue I've not seen before. With your file I selected all of the black text, changed the fill to a hex code of 000001, then changed it Back to 000000 and exported the file. It now no longer changes the HEX code on export.

On 8/31/2018 at 6:09 PM, JasonF said:

I can correct this manually in the code, but I am wondering if there is a way to force AD to specify fill colors for all exported SVG paths? Also, why is it specifying fill colors for some of the paths in my file, but not others? 

Thanks for bringing this to our attention, although it displays and imports correctly, our SVG export appears to write no fill when the colour is set to pure black, when using RGB or HEX export options. I've had this logged with our developers to be investigated and repaired, but for the time being you can either use a colour slightly off black, such as 000001 which will be written on export, or you'll need to manually add the black fill before using your PDF generator. 

Share this post


Link to post
Share on other sites

Thanks so much for looking into this. I'll modify my current export process to alter the black, as you suggest, and then run a find/replace in the SVG code. Hopefully we'll see a fix for this in a future update of AD!

Share this post


Link to post
Share on other sites

I have some issues too on SVG export. For example color #0039A6 gets changed to #0036AD. #D7A900 to #DEA800. I tried various export setting. However I see this as a bug. Preset 'SVG (for web)' should not change colors. 

 

RGB/8 document on Designer 1.6.1 - Mac High Sierra.

Share this post


Link to post
Share on other sites

Hi Jack70 :)

5 minutes ago, Jack70 said:

For example color #0039A6 gets changed to #0036AD

I've tried to replicate this in both the Mac and Windows build for Designer using the SVG (for web) preset. In both cases, the svg created retains 'style="fill:#0039a6' in both a text editor and opening the SVG back into Affinity. Where are you seeing this change please? What document settings are you using?

Please open the Export panel, select SVG the select More. Do you have 'Use hex colours' ticked?

Share this post


Link to post
Share on other sites
30 minutes ago, Dan C said:

I've tried to replicate this in both the Mac and Windows build for Designer using the SVG (for web) preset.

Thanks for your reply. See attachment. Steps: export, SVG, preset SVG for web. Hex colours is ticked.

test.afdesign

Share this post


Link to post
Share on other sites

Thanks for that Jack, I can see that your colour profile is set to Display and this seems to be causing the issue. This is an Apple provided colour profile so I will investigate further.

What colour profile do you use through your Mac OS settings please?

Share this post


Link to post
Share on other sites
6 hours ago, Dan C said:

What colour profile do you use through your Mac OS settings please?

I am sry, how can I check this. I did not consciously install or change this. I have no preferences in this.

Share this post


Link to post
Share on other sites
4 hours ago, Jack70 said:
11 hours ago, Dan C said:

What colour profile do you use through your Mac OS settings please?

I am sry, how can I check this. I did not consciously install or change this. I have no preferences in this.

System Preferences > Displays > Color pane. For my iMac, it looks like this, using the built-in factory default:
1873854922_displayprofile.jpg.8b45f3c98fca8199e9e5f069e8261bee.jpg


Affinity Photo 1.7.1, Affinity Designer 1.7.1, Affinity Publisher 1.7.1; macOS High Sierra 10.13.6 iMac (27-inch, Late 2012); 2.9GHz i5 CPU; NVIDIA GeForce GTX 660M; 8GB RAM
Affinity Photo 1.7.1.143 & Affinity Designer 1.7.1.1 for iPad; 6th Generation iPad 32 GB; Apple Pencil; iOS 12.3.1

Share this post


Link to post
Share on other sites
19 hours ago, Dan C said:

What colour profile do you use through your Mac OS settings please?

Thx :)

Ok it's set for my monitors to DELL U2412M and for the retina screen of my Macbook Pro to Color LCD.

However I of course do not want my display settings to play any role when exporting for WEB. I give in my document an object a web color and I want it to retain this code when exporting to SVG.

Share this post


Link to post
Share on other sites
1 hour ago, Jack70 said:

However I of course do not want my display settings to play any role when exporting for WEB. I give in my document an object a web color and I want it to retain this code when exporting to SVG.

Then as @Dan C & @>|< have mentioned, you should not be using the "Display" color profile for your document color profile (File > Document Setup > Color tab):
35491635_documentcolorprofile.jpg.71bb148abba51662c6af2a40ac5b76de.jpg
For web use, the sRGB (standard Red Green Blue) color profile is the recommended one. Keep in mind that web browser color management is a bit more complicated than it might seem, so that should also be considered when building web pages, like the mentioned corruption of user monitor profiles, untagged elements, etc.


Affinity Photo 1.7.1, Affinity Designer 1.7.1, Affinity Publisher 1.7.1; macOS High Sierra 10.13.6 iMac (27-inch, Late 2012); 2.9GHz i5 CPU; NVIDIA GeForce GTX 660M; 8GB RAM
Affinity Photo 1.7.1.143 & Affinity Designer 1.7.1.1 for iPad; 6th Generation iPad 32 GB; Apple Pencil; iOS 12.3.1

Share this post


Link to post
Share on other sites

Ok thx guys, I was not aware that my color profile was default on Display. I changed it once now for a new document and now it stays on sRGB.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×