SVG images shown blacked out in UWP application

Question

me and my team are trying to put some .svg icons in our UWP win10 application (target and min version are Windows 10 Fall Creators update).

In my resource file I defined my SvgImageSource as following:

<SvgImageSource x:Key="PencilIcon" UriSource="Images/DeviceMenu/Icon_EditMode_grey.svg" />

And I then proceed to use this image source in my component:

<Image Source="{StaticResource PencilIcon}" />

I tried few different svgs and they all render with the right shape, but are all black (first one is the pencil):

The original svg looks like this:

Here is the source code of the SVG

I tried adjusting Stretch, Width, Height and so on but I just can't seem to get this to work.

Answer 1

This is a known problem of Adobe Illustrator, try playing with its SVG export settings.