Jump to content

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

Link to post
Share on other sites
  • Moderators

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. 

Link to post
Share on other sites
  • 1 month later...

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.

Link to post
Share on other sites
  • Moderators

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?

Link to post
Share on other sites
  • Moderators

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?

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.9.3, Affinity Designer 1.9.3, Affinity Publisher 1.9.3;  2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7
Affinity Photo 
1.92.236 & Affinity Designer 1.9.2 (showing 1.9.9) for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 14.4 (18D52)

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.

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.9.3, Affinity Designer 1.9.3, Affinity Publisher 1.9.3;  2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7
Affinity Photo 
1.92.236 & Affinity Designer 1.9.2 (showing 1.9.9) for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 14.4 (18D52)

Link to post
Share on other sites

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

Please note there is currently a delay in replying to some post. See pinned thread in the Questions forum. These are the Terms of Use you will be asked to agree to if you join the forum. | 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.