Photo 2: Strokes do not correctly follow the radius of circles and rounded rectangles, create color bleed if stroke is set to inside or outside

[geometric]

Using: Affinity Photo 2 (latest version) on Windows 10

Make a rectangle and round the corners. Give it a stroke and a fill. Set the stroke to be on the inside or outside. Notice that when set to the inside, the fill extends beyond the stroke on the corners, and when set to the outside, there is a gap between the fill and stroke through which you can see the background.

Hardware acceleration doesn't make a difference.

Apparently this is also an issue in Designer 2.

Edited April 22 by geometric
Update to include same issue in Designer

[NotMyFault]

This is currently by design and already logged for improvement.

[Alfred]

3 minutes ago, NotMyFault said:

This is currently by design and already logged for improvement.

It looks much more like an oversight than a deliberate design choice!

[NotMyFault]

By chance I revisited one of the older videos from filmmaker IQ about blend modes.

other apps (Adobe after effects) offer a blend mode „alpha add“, solving the issue. Regular blend formula (normal)  with alpha compositing causes the issue of partial alpha. 

https://helpx.adobe.com/after-effects/using/blending-modes-layer-styles.html

[geometric]

2 hours ago, NotMyFault said:

By chance I revisited one of the older videos from filmmaker IQ about blend modes.

other apps (Adobe after effects) offer a blend mode „alpha add“, solving the issue. Regular blend formula (normal)  with alpha compositing causes the issue of partial alpha.

The issue I've highlighted has nothing to do with blend modes. This is about the basics of how the application renders the geometry of fills and strokes on a curve and how it's leaving gaps and exposing colors where they shouldn't be.

I've attached a screenshot of the same situation in Figma, which render correctly. It's absurd to claim this is "by design." It's objectively incorrect rendering.

[NotMyFault]

15 minutes ago, geometric said:

It's absurd to claim this is "by design." It's objectively incorrect rendering.

Always shoot the messenger?
 

Affinity strictly renders what you asked it to render, and follows the industry standards.

Can you please create a test file in Figma, and export it in SVG or EPS, so we can see if Figma renders differently using the same data (from files), or adjusts the data to cover up the issue when rendered?
use an ellipse shape of exactly 50 px size, and a outer stroke of exactly 5 px.

 

SVG outer stroke.svg outer stroke.afphoto

[NotMyFault]

If Figma creates one shape (combination of fill and stroke), we know the trick.

in that case use blue as stroke color.

at this time I can only assume Figma silently increases the size of the fill, to cover the semitransparent gap which is dictated by the industry standards of layer blending, 

[geometric]

1 hour ago, NotMyFault said:

at this time I can only assume Figma silently increases the size of the fill, to cover the semitransparent gap which is dictated by the industry standards of layer blending, 

Looks like that is what Figma outputs, yes. It increases the size of the fill to avoid gaps so that the output is usable. I don't have Adobe Illustrator installed, but in my many years of using that industry standard software, I believe it behaved the same way.

What software besides Affinity leaves gaps the way Affinity does? What standard are you referring to?

[NotMyFault]

10 minutes ago, geometric said:

What standard are you referring to?

https://en.wikipedia.org/wiki/Alpha_compositing
https://en.wikipedia.org/wiki/Blend_modes

https://www.w3.org/TR/SVG2/

[geometric]

2 minutes ago, NotMyFault said:

https://en.wikipedia.org/wiki/Alpha_compositing
https://en.wikipedia.org/wiki/Blend_modes

https://www.w3.org/TR/SVG2/

Please highlight the section of the SVG2 spec that states you have to have a little gap between the fill and stroke. I'll wait.

Anyway, after some digging it looks like this has been a known issue for at least nine years so I doubt it's getting fixed.

[NotMyFault]

11 minutes ago, geometric said:

What software besides Affinity leaves gaps the way Affinity does?

I don’t know.

just for clarity:

• the issue is caused by layer blending, as stroke and fill are essentially two layers blended together, even if software hides this internally.
• some apps seem to cover the issue by silently adjusting size of shapes (I’m still on search for files proving this assumption to be correct or wrong)
• other apps provide special blend modes, overturning the usual alpha blend formula
• Affinity follows certain design choices of its developers to give users full control over aspects like layer dpi, layer size and position becoming non-integer. It lacks all safety belts and lets the user produce documents with hard to solve issues. 
• this design choices led to many frustrated users and heated forum threads about unexpected consequences, perceived as bugs

welcome as number 57631 in the chain.

 

[NotMyFault]

11 minutes ago, geometric said:

Please highlight the section of the SVG2 spec that states you have to have a little gap between the fill and stroke. I'll wait.

It is the consequence of „by the words implementation“, not a requirement.

Apps silently changing the size of layers may do a favor to users, but they don’t technically give the desired result.

do this in Figma and Affinity:

1. create 4 rectangles, directly facing (but not overlapping). Only fill, no stroke, solid contrasting colors
2. group them
3. rotate them by e.g. 22.5 degrees
4. export as svg
5. view the SVG file in pixel and vector mode in different apps, including browsers based on different rendering engines (Chrome, Safari, Firefox).

Anti-aliasing should be active.

some will show seams, some not.

The colors in pixel view mode may differ at aliased edges.

There is no single truth. 

[geometric]

3 minutes ago, NotMyFault said:

There is no single truth. 

it would be nice if affinity picked the truth that doesn't look like trash

[geometric]

I feel like Picard in the Cardassian brainwashing chamber right now. "The rendering is good! Admit the ugly gaps are correct and good!!"

[NotMyFault]

I just tried to explain what you found out yourself: this discussion is going since 9 years, all the best and good luck that you are able to finally convince Affinity developers to change their app.

I don’t like the current status, and filed numerous improvement request in the feedback section of the forum.

 

 

[Ldina]

@NotMyFault I just recreated your example, using four different colored rectangles with fill, no stroke, and aligned them perfectly with snapping turned on, and grouped them. I rotated the group (I didn't save as SVG), but just observed the effect of antialiasing in after rotating in AfPhoto. I set antialiasing to Force ON, then Force OFF on the rectangle group.

This illustrates the antialiased edge problem quite clearly. A fill layer in the background shows through along those edges with antialiasing turned ON (default), and if I change the background color, it is quite noticeable. Setting AA to Force OFF eliminates the bleed through, but of course, we have some jagged edges. Those jagged edges are rarely a problem for the type of work I do, but I know they are for others. I didn't see that changing the Blend Gamma or Coverage Map made much or any difference to antialiasing in this example. If there was any difference, I didn't see it, even zoomed in to 800 or 1600%.

Are those the only two choices? Is there a way to smooth those edges AND eliminate any contamination from underlying layers?

I know you have used Levels adjustments to the Alpha channel for some masking issues. 

Thanks.

[NotMyFault]

36 minutes ago, Ldina said:

I know you have used Levels adjustments to the Alpha channel for some masking issues

Yeah, that is the band-aid I recommend, but it leads to rasterization.

there is no general solution as far as I know.

see our older discussion

 

 

[Ldina]

Thanks...I forgot about that discussion! It was worth reviewing. 👍😀

[geometric]

After some fiddling in Photo 2, I've decided a very hacky work-around is to use layer effects outlines instead of inner and outer strokes. They're more of a pain to edit since you have to open up the layer effects panel, but at least they render correctly. I expect I'll find some cases where they won't work as well as a stroke, but for my purposes here, it's a better option.

[lepr]

On 4/22/2025 at 4:46 AM, geometric said:

when set to the outside, there is a gap between the fill and stroke through which you can see the background

A common workaround for the outside-aligned stroke gap problem is to use a double-width centre-aligned stroke with its order set  to 'draw stroke behind' instead of the default 'draw stroke in front'. (It is good when the fill is fully opaque, but a semi-opaque fill will be blended with the part of the stroke that lies behind it.)