A key difference between Sketch and Adobe XD or Photoshop is how they save path elements (e.g. SVG) under the hood. Path elements and path icons are displayed differently depending if the winding rule / fill rule is set. The fill rule / winding rule defines the behavior of path elements enclosed in other path elements. In particular this means if the enclosed path should be filled or not filled (see also: https://en.wikipedia.org/wiki/Nonzero-rule). The Fill-Rule is an SVG and path property that basically defines how to determine what shapes are filled or subtracted from the entire icon.

Let's look at an example:

Here we've opened a Sketch file containing a path element shaped like the letter "B". The B encloses two areas that are filled with white.

This looks perfectly fine if the fill-rule is set to "non-zero". In Sketch, there’s a cog icon next to the fill inspector. You will see this when you select any path element.

This allows you to switch between the fill rules. "Non-zero" and "even-odd". Non-zero will fill the whole shape. Even-odd will preserve the holes in the overlapping path.

Why is the fill rule not maintained after conversion to Adobe XD or Photoshop (PSD)?

The path element in the screenshot above has a non-zero fill rule. When converted to Adobe XD or PSD, they will appear filled up because that's what this fill rule does. The Sketch app clarifies this when you click the cog icon:

After converting such a shape to Adobe XD, this is how the icon looks:

It's totally filled up. It did not keep the holes in the shape.

To correct this, all the paths elements in your Sketch file need to be switched to the "even-odd" fill rule. When this is done, the resulting Adobe XD file will have the shape with all the holes maintained. If you noticed this after converting your file don't worry. We can assist with reconverting the file at no extra cost. Send us an email at support@magicul.io

You can also easily fix this in Adobe XD. Simply select the SVG icon and click subtract.

This is currently the known solution to have SVG icons converting as expected. Our converter is already able to handle some cases but it really depends on the complexity of the SVG icon. We continue to discover and fix a lot more edge cases by the day.

Did this answer your question?