Exporting SVG with inner borders is incorrect

Share an issue
1

Hey there,

I’m having a problem with SVG exporting. It seems like Sketch exports SVGs with inner borders incorrectly. Can I fix this myself, or should I wait for Sketch to fix it? Please help, thank you!

Here is what I designed:

What I designed
What I designed100×100 878 Bytes

and here is what I exported:

What I exported
What I exported200×200 1.92 KB

Sample.sketch (5.2 KB)

3

Hi @timmi, welcome to our Community Forum!

I’m afraid you’ve run into a limitation with how the SVG output format handles certain effects. Your design looks fine on the Canvas because Sketch can blend the semi-transparent inner border with the fill color underneath it. However, our SVG output export doesn’t properly support inner borders with transparency, so the export looks different. We’re aware of these limitations, but I can’t say when we might have this sorted out on our side, sorry :person_bowing:

Your idea of creating a “new color” is the right workaround for this situation. Here’s a quick step-by-step guide:

  1. Select the shape with the semi-transparent inner border and select the border fill on the Inspector.

  2. Press ⌃ C to bring up the Eyedropper tool.

  3. Click on the inner border area on your Canvas. This will pick up the final, displayed color. I mean, the one that mixes your border and the fill beneath it.

  4. In the Inspector, you’ll see that this new color has been applied to your border. When you do that, see that its Opacity is automatically set to 100%.

  5. Now, try exporting to SVG again. It should look the same.

See a video we’ve made showing the process in action:

I’m perfectly aware this is not a bullet-proof solution, though. If the border is over some effects like blurs, or on top of a bitmap, the steps above won’t make it.

This makes me wonder… Is exporting to SVG essential in your current workflow? Could you use a different output format in these cases?

2 Likes
4

Thank @JorgeF so much!
Currently, I use the PNG format, but I might switch to the SVG format for better customization. Using colors without an alpha is inconvenient for me. I’ve also tried Figma, and it can handle this, so it would be great if Sketch could do it too!

5

Sometimes this small online tool can also fix various weird issues in SVG’s:

1 Like