Bind string based SVGs to a UWP application

Question

I am new in UWP app development and looking for a way to bind string based SVG to a UWP (Universal Windows Platform) page. And I wanted to show that string based SVG by using Image tag of UWP page (XAML layout). The SVG will be represented in SVG markup language like:

dataBindedModel.svg = “<svg xmlns="http://www.w3.org/2000/svg"; width="500" height="500">
<circle cx="250" cy="250" r="210" fill="#fff" stroke="#000" stroke-width="8"/>
</svg>”;

For that I need to use {x:Bind} in the XAML, but not sure how to bind this. Potential XAML Code will be like:

<Image x:Name="MyImageView" Source="{x:Bind ...required area...”}>

Update:

My MainPage.xaml.cs:

 public sealed partial class MainPage : Page
    {
        SVGModel dataBindedModel = new SVGModel();
        public MainPage()
        {
            this.InitializeComponent();
            dataBindedModel.SVGString = File.ReadAllText("test.xml");
            this.DataContext = dataBindedModel;
        }
    }
    public class SVGModel
    {
        public SVGModel() { }
        public SVGModel(string svg)
        {
            SVGString = svg;
        }
        public string SVGString { get; set; }

    }

My MainPage.xaml:

<Grid>
        <Grid.Resources>
            <local:SVGImageConverter x:Key="MyConvert" />
        </Grid.Resources>
        <Image x:Name="MyImageView" Source="{x:Bind dataBindedModel.SVGString,Mode=OneWay,Converter={StaticResource MyConvert }}" />
    </Grid>

My test.xml:

<?xml version="1.0" encoding="utf-8" ?>
<svg  width="500" height="500">
    <circle cx="250" cy="250" r="210" fill="#fff" stroke="#000" stroke-width="8"/>
</svg>

What you have is just text, not an image. Assigning some text to an Image property won't render it. <Image Source="Assets/mysvg.svg"/> works because the runtime will use the SvgImageSource to convert between what's recognized as a path to an svg file and the Image property — Panagiotis Kanavos
Where does the SVG come from? A text file? Resource? In that case you can just pass the correct path to Source. If it's a string generated at runtime, you can bind to an SvgImageSource and load the data with SetSourceAsync — Panagiotis Kanavos
@PanagiotisKanavos - My SVG is in the XML format (test.xml see above). I have created a xml file paste my SVG xml into it. And I am reading this xml in SVGString property of SVGModel class in the constructor of MainPage.xaml.cs. (see above) But getting some exception in order to run the code. — Hassan Iftikhar
My SVG is in the XML format given that SVG is XML that doesn't say anything. Have you tried saving the file with an svg extension and using it the way the linked docs show? Besides, where is that test.xml file? The path is relative which means the application will try to find it in tis executable folder, wherever that is. Windows Apps are sandboxed which means the current directory isn't where you think it is, and the app can't read anything it wants either — Panagiotis Kanavos
@PanagiotisKanavos - How I can set SVGString property directly with XML in the ctor of MainPage.xaml.cs. What if I try with: dataBindedModel.SVGString = "<svg></svg>"; Any idea? — Hassan Iftikhar

Nico Zhu - MSFT Nico Zhu - MSFT · Accepted Answer · 2021-05-28T01:30:57

UWP does not allow binding SVG string directly, it only contains SvgImageSource class, please save as svg file and set it to image control like the following.

<Image Source="Assets/mysvg.svg"/>

And the other way is use value converter to convert string to SvgImageSource for example

public class SVGImageConverter : IValueConverter
{
    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        throw new NotImplementedException();
    }

    public  object Convert(object value, Type targetType, object parameter, string language)
    {
        var svg = new SvgImageSource();
        try
        {
            var svgBuffer = CryptographicBuffer.ConvertStringToBinary(value.ToString(), BinaryStringEncoding.Utf8);
       
            using (var stream = svgBuffer.AsStream())
            {
                 svg.SetSourceAsync(stream.AsRandomAccessStream()).AsTask().ConfigureAwait(false);                    
            }
        }
        catch (Exception ex)
        {

        }

        return svg;
    }
}

Usage

<Image x:Name="MyImageView" Source="{x:Bind dataBindedModel.svg,Mode=OneWay,Converter={StaticResource MyConvert }}" />

Please note: please make sure your svg string is correct svg type.

Bind string based SVGs to a UWP application

1 Answers