White background after exporting svg

FranciscoRiojas · October 19, 2023

I am losing my mind trying to figure out why I continue to see a white background added to my svg file when the document settings has 'transparent background' selected...and i have no background anywhere in my design...what am i missing? Please be kind, im still learning designer and this is getting frustrating. Is there a certain export option i need to select or de-select?...idk, please help,anyone....🙏🏽

2nd image you can see no background...but the last pic has white background after export as svg

FranciscoRiojas · October 19, 2023

Also, ive had no problem exporting to svg with no background...but svg, i can't figure out why im getting a white background

GarryP · October 19, 2023

Which application are you using to view the exported SVG?
Are you sure that that application isn’t adding the white background?
Have you tried viewing the SVG in another application?
Do you see the white background there too?

If you can upload the SVG we can check to see if anything looks wrong with it.
If you can upload the original document then that would also be helpful.
(If you can't, or don't want to, upload either in public then there may be other things that can be done.)

Note: Full-screen screenshots taken by the operating system, or another application, are usually much more useful for diagnostic purposes than photos taken with a phone or similar device. (On Windows, Win+Shift+S will normally take you to the Snipping Tool.)

Dan C · October 19, 2023

Welcome to the Affinity Forums @FranciscoRiojas

As Garry has mentioned above, please try opening your SVG in a separate application, as the viewer you are using may be applying this white matte to your file.

If the issue continues, can you please provide a copy of your .afdesign file here for me, so that I can investigate further?

3 hours ago, FranciscoRiojas said:

Also, ive had no problem exporting to svg with no background...but svg, i can't figure out why im getting a white background

I'm a little confused by the above statement also, I suspect that you mean a different format that you have had no problem with previously?

Many thanks in advance!

v_kyr · October 19, 2023

After generating/exporting the SVG file, just reopen the created SVG file directly in ADe via "File -> Open..." in order to see if it has a transparent background or not.

FranciscoRiojas · October 19, 2023

GarryP - the viewer it opens with is microsoft edge...but its not the viewer...v_kyr - i opened the svg file with Affinity Designer and it shows the white background...(see attached - the preview in the export settings shows the white background) DanC - attached is the .afdesign file....thanks for responding everyone 🙏

Francisco

maizanosHalloweenA.afdesign maiz7.svg

FranciscoRiojas · October 19, 2023

@GarryP @v_kyr @Dan C im new to this forum and not sure how to do the quote thing...but i think i have the tagging people correct 🤷‍♂️

Francisco

v_kyr · October 19, 2023

Hard to tell, as I personally can't open ADe v2 files in ADe v1 somebody else has to take a closer look over the layers panel there, in order to see if at all and when then where the white background or some filled white bottom rect does stem from. BTW, that file either way contains a bunch of rasterized image/bitmap data and so is not just containing only plain vectors here!

And as the supplied SVG code file is ~6 MB in size and also messed up by a Windows sys as a one ultra long line of SVG/XML source code (aka shown that way initially inside a macOS text editor), I don't feel like converting it and looking at it's SVG code wise here (no mood for that).

Also extracting the PNG thumb preview image of your ADe file shows this to me (aka a transparent background) ...

In macOS Preview:

In GC9:

lepr · October 19, 2023

3 hours ago, FranciscoRiojas said:

GarryP - the viewer it opens with is microsoft edge...but its not the viewer...v_kyr - i opened the svg file with Affinity Designer and it shows the white background...(see attached - the preview in the export settings shows the white background) DanC - attached is the .afdesign file....thanks for responding everyone 🙏

Francisco

maizanosHalloweenA.afdesign 14.51 MB · 2 downloads maiz7.svg 5.57 MB · 2 downloads

Much of the design is being rasterised with a white background because the two Warp Groups have Erase blend mode. Erase blend mode is not supported by export formats, so rasterisation is required to maintain the appearance of the design.

Now you know that, you probably realise a solution is clipping or vector masking, but ask for help if you get stuck.

FranciscoRiojas · October 19, 2023

ok, thanks guys. @lepr thanks for letting me know about the erase blend fix....I tried the vector clipping and i think it worked. attached is updated .afdesigner file and a mockup of the saved vector on a black background. I think I did things correctly. Can you check it out and lemme know if it looks like I fixed it right?

I appreciate the help...do you or anyone recommend any tutorials? I have a course I purchased through Udemy and ive learned a lot but I have a lot im trying to understand thats not covered...im new to vector design and im trying to learn and absorb it all...

thanks,

Francisco

maizanosHalloweenA2.afdesign

Dan C · October 20, 2023

No problem at all, I'm glad to hear you've seemingly resolved this issue! Inspecting the Layers structure in the latest file provided certainly appears to be designed in a more sensible way for SVG export.

13 hours ago, FranciscoRiojas said:

I appreciate the help...do you or anyone recommend any tutorials? I have a course I purchased through Udemy and ive learned a lot but I have a lot im trying to understand thats not covered...im new to vector design and im trying to learn and absorb it all...

I have included some links below for the Affinity resources, including our 'Quick Start Guide', video tutorials and online helpfile:

Quick Start Guides:
Photo - https://affinity.serif.com/learn/photo/desktop/quickstart/
Designer - https://affinity.serif.com/learn/designer/desktop/quickstart/
Publisher - https://affinity.serif.com/learn/publisher/desktop/quickstart/

Tutorials:
Photo - https://forum.affinity.serif.com/index.php?/topic/170269-official-affinity-photo-v2-tutorials/
Designer - https://forum.affinity.serif.com/index.php?/topic/170248-official-affinity-designer-v2-tutorials/
Publisher - https://forum.affinity.serif.com/index.php?/topic/170254-official-affinity-publisher-v2-tutorials/

Online helpfile:
https://affinity.help/

I hope this helps