Export assistance

[Godlessape]

Im trying to figure out the best export settings for SVG files from either iPad or Desktop (iOs) version of Affinity for files to be placed into Figma. (Figma support said that affinity interprets SVG differently to how they do, but can't offer assistance on the 'Export from Affinity' side of the issue)  Currently in all my exported files Ive found that Masks and effects layers don't translate (elements in files that have these treatments get shifted to the top left of the frame on placing them in Figma - regardless of 'set view box' setting) but also I found that in all my exported files, elements that start out as a simple stroke with a fill become separated - so the outline gets expanded to a separate more complex entity with its own outline-and-stroke and the fill is moved to a separate layer with its own outline-and-stroke. What am I missing? Ive tried exhaustively the various settings in export but I also don't understand technically what all the settings mean, so am surely missing some key piece of intel. Please can someone help/explain. Attached a sequence of screenshots of the current export settings Im using - which also illustrate how an element get moved to the top left of the view box on landing in Figma (final image). (having tried both iPad and desktop export)

Ideally I would like to maintain the simple stroke and fill that I used to create the files in Affinity if that is possible....?

 

[NathanC]

Hi @Godlessape,

It would be great if you could provide us with a sample .afdesign file and SVG file referenced in your screenshot so we can get a better idea of what's going on, I can provide an upload link if you don't want to publicly share.

Also, are you importing the SVG into Figma via a drag & dropping the .SVG file in or via a clipboard copy & paste?

[Godlessape]

Thanks @NathanC, Please send the upload link and Ill send you the file to have a look at.

Re. the upload process: Im using drag-and-drop from my Mac into Figma. 

This is what Figma support had to say about svgs "Generally speaking, SVG is an open standard, but applications have opinionated interpretations of them. We try to ensure that our interpretation of an SVG aligns with what you might see in a browser like Chrome or Firefox, but Affinity has its own too. We can’t speak to their interpretation, unfortunately, but we do know that exporting from Affinity and importing to Figma can be a challenging experience." I understand the words and concepts but not the machinations of that statement. 😛 Id imagine that everyone would like to align interpretations so that files don't react differently in different applications.

So my two issues are

1: How to maintain the composition of my strokes and fills on export from affinity.

2: how to upload a mask layer that won't be displaced in the frame when I place it in Figma. (if that's something that can be fixed/adjusted on this side of the export)

[NathanC]

Hi @Godlessape apologies on the late reply,

Thanks for confirming, I've provided a private dropbox link below for uploading your files.

https://www.dropbox.com/request/wg9EV1R1UAVosuMNCZfn

 

[Godlessape]

I have clarity!  As received from Affinity Support : 

 

"Hi Dan,

 

Many thanks for these files/further information, this is certainly helpful!

I can confirm that the difference between the curves that are and aren't separated when exporting to SVG is the presence of Pressure applied to the Curve within Affinity. Unfortunately the SVG format doesn't support Pressure in the same way that Affinity does, therefore these strokes are 'Expanded' when exporting, creating a Fill layer and a Stroke layer separately in your SVG file.

As can be seen in the .afdesign file you've provided, the Curve objects have Pressure applied in the Stroke Studio -

If you Reset this Pressure, removing it from the Curve, then when exporting to SVG the singular Fill/Stroke object will be retained. If this Pressure is required, then unfortunately the Fill & Stroke objects have to be Expanded and exported to separate layers in the SVG file.

 

In regards to masked objects, Affinity uses <clipPath> when exporting to SVG, which is a global SVG attribute that other applications also use. Unfortunately there's no way to change this within Affinity when exporting to SVG and will require Figma to add support for <clipPath> objects."

 

If anyone else is experiencing the same issue. 'Pressure' relates to the variable thickness of your stroke/outline