Affinity Designer: Export SVG as PNG with background color

[kingsgambit]

Hello,

I have a SVG image with transparent background, and I want to export it as PNG in various resolutions with white background to use them as app icons. How can I do that?

Update: I could not do this with Designer, so I've tried with Photo. I've added a Fill Layer with white color, and moved that layer to the lowest position in the Layer panel. It seems it is done, however the edges of the curvy vectors are not looking good. Any idea how can I make all edges look perfect while giving a color to the background?

Thanks!

[v_kyr]

1 hour ago, kingsgambit said:

I have a SVG image with transparent background, and I want to export it as PNG in various resolutions with white background to use them as app icons. How can I do that?

Update: I could not do this with Designer ....

Where's the problem with Designer here? - Here are 3 different ways to do that with Designer, I sketch them quickly ...

1. Open your transparent background SVG file in Designer.
   Go to/show the document settings and there select the color tab and untick transparent background.
   Now your doc background will be white. Export your document as PNG in the wanted resolution (or use the Export Persona to export in different resolutions at once).
2. Open your transparent background SVG in Designer.
   Add a big white rectangle which covers in size your whole document.
   Drag that white colored rectangle layer to the bottom of the layers panel.
   Then export the whole document as PNG in the image sizes you need (alternatively export the whole via the Export Persona in different setup resolutions).
3. Open/load your transparent SVG file in Designer and look under the document settings it's initial doc sizes.
   Create another new document of the size of your imported SVG, but as usual, without ticking the with transparent background checkbox.
   Select all layers from your initial opened transparent background SVG file and copy them, paste everything into your new created document with the white background.
   Then export the whole new document as PNG in the image sizes you need (alternatively export the whole via the Export Persona in different setup resolutions).

[v_kyr]

@kingsgambitIt might be of help for you, if you also take a look into the Designer online help, especially there ...

Get started

• Create new documents
• New from clipboard
• Open documents and images
• Document setup

Exporting

• Exporting using Export Persona
• Export Options panel
• Slices panel
• Layers panel (Export Persona)

Or some of the Designer tutorials listed here.

[walt.farrell]

Or:

1. Open the SVG.
2. File > Export.
3. Select PNG.
4. Click More...
5. Choose an appropriate Matte color.