SVG images shown blacked out in UWP application

4
votes

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):

enter image description here

The original svg looks like this:

enter image description here

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.

5
xamlsvguwpwindows-10-universal

5 Answers

5
votes

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.

2
votes

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

2
votes

If illustrator Use Styling: "Presentation Attributes"enter image description here

0
votes

If you use illustrator then try to change styling. It should be something like Style Attributes. enter image description here

-1
votes

UWP just partially supports SVG Ver 1.1 specification (see SVG Support)

And it doesn't support css-like styles.

See image

If you used Adobe Illustrator for export image, you can play with export settings: AI export Settings

Or make it manually: See image

Or with my tool:

This tool just inlines css styles directly to the svg elements.