Search code examples
xamlsvgwinui-3

SVG used in WinUI 3 is always blank

According to everything I have read, in WinUI3, I should just be able to use a path to an SVG-Image in an Image element. But even though that works fine for .pngs, it only gives me blank images for .svg files.

My XAML:

<NavigationViewItem Tag="Clients">
    <NavigationViewItem.Content>
        <StackPanel Orientation="Horizontal">
            <Image Source="ms-appx:///Assets/Vector/Client.png" Width="30" Height="30"/>
            <Image Source="ms-appx:///Assets/Vector/Client.svg" Width="30" Height="30"/>
            <Image Source="/Assets/Vector/Client.svg" Width="30" Height="30"/>
            <Image Source="Client.svg" Width="30" Height="30"/>
            <Image Source="ms-appx:///Assets/Vector/ClientX.svg" Width="30" Height="30"/>
            <Image Width="30" Height="30">
                <Image.Source>
                    <SvgImageSource RasterizePixelHeight="30" RasterizePixelWidth="30" UriSource="ms-appx:///Assets/Vector/Client.svg"/>
                </Image.Source>
            </Image>
            <TextBlock Text="Betreiber" Margin="10,0,0,0"/>
        </StackPanel>
    </NavigationViewItem.Content>
</NavigationViewItem>

The result:

Screenshot

The Client.png and Client.svg both have the Build Action "Content" with "Copy if newer".

I'm also getting no error when referencing a file that definitely does not exist, like ClientX.svg, I have no idea what I'm doing wrong here.

Solution

  • I have solved my problem, and it turned out it had little to do with WinUI: My SVG-file had a strange viewBox set.

    This is what the <svg>-tag looked like before:

    <svg id="Icons" height="512" viewBox="0 0 60 60" width="512" xmlns="http://www.w3.org/2000/svg">

    And when I removed the height and width:

    <svg id="Icons" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">

    The image became visible.

    What was apparently happening was that the image was much bigger than the viewbox, so WinUI showed my image and made the 60-by-60 viewbox into a 30-by-30-pixel square, as I requested, but the actual visible content was somewhere to the right, outside the visible area of the control.