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

UWP has no clue what css styles are. In my case there was this:

<style
     type="text/css"
     id="style2">
    .st0{fill:#996459;}
    .st1{fill:#FFFFFF;}
    .st2{fill:#B4B6BC;}
    .st3{fill:#5C546A;}
    .st4{fill:#868491;}
    .st5{fill:#0F4499;}
</style>

To fix this for UWP, find every class="..." and manually apply the style.