Why are SF Symbols not aligned correctly?

Question

I'm working with creating custom SF Symbols and I've come across a peculiar behavior: symbols get resized and centered vertically, but not horizontally.

For example, I would like to lay our four quarters of a circle in a ZStack, each with a different color, so they form a circle. Here you can see the expected result on the left and actual result on the right:

Here is the bare-bones project with the four custom SF Symbols attached: https://github.com/Cecile-Lebleu/Custom-SF-Symbols-issue

I've generated the SF Symbols from Figma using this plugin. When importing the symbols into the SF Symbols app or in XCode Assets, they are displayed in their correct positions:

Answer 1

I was able to get the desired result by adding a rectangle over the full size of the symbol. Then, using .foregroundStyle(.red, .clear) to make the rectangle transparent. I updated the repo: https://github.com/Cecile-Lebleu/Custom-SF-Symbols-issue

Answer 2

I noticed that you didn't include the source for the image, so I've created an example using a circle. The crucial aspect here is the use of negative padding. Essentially, this technique allows the child view to exceed its originally proposed size.

Below, you'll find the code and the corresponding image illustrating this concept:

VStack(spacing: 0) {
        HStack(spacing: 0) {
            ZStack(alignment: .topLeading) {
                Image(systemName: "circle")
                    .resizable()
                    .foregroundStyle(.green)
                    .padding(-10)
            }
            ZStack(alignment: .topTrailing) {
                Image(systemName: "circle")
                    .resizable()
                    .foregroundStyle(.red)
                    .padding(-10)
            }
        }
        HStack(spacing: 0) {
            ZStack(alignment: .bottomLeading) {
                Image(systemName: "circle")
                    .resizable()
                    .foregroundStyle(.yellow)
                
                    .padding(-10)
            }
            ZStack(alignment: .bottomTrailing) {
                Image(systemName: "circle")
                    .resizable()
                    .foregroundStyle(.orange)
                
                    .padding(-10)
            }
        }
    }
    .frame(width: 100, height: 100)