Modify the attributes of an SVG file and set it as a source for an image element in uwp using c#

Question

string svgFilePath = "ms-appx:///Assets/Chart.svg";
XNamespace svgNamespace = "http://www.w3.org/2000/svg";

StorageFile svgFile = await StorageFile.GetFileFromApplicationUriAsync(new Uri(svgFilePath));
XDocument svgDocument;

using (IRandomAccessStream fileStream = await svgFile.OpenAsync(FileAccessMode.Read))
{
    using (StreamReader reader = new StreamReader(fileStream.AsStream()))
    {
        string svgContent = await reader.ReadToEndAsync();
        svgDocument = XDocument.Parse(svgContent);

        // Modify the SVG content as needed
        foreach (var pathElement in svgDocument.Descendants(svgNamespace + "path"))
        {
            XAttribute nameAttribute = pathElement.Attribute("name");
            XAttribute fillAttribute = pathElement.Attribute("fill");

            string attributeName = nameAttribute.Value;

            if (svgColorMap.ContainsKey(attributeName) && fillAttribute != null)
            {
                fillAttribute.Value = svgColorMap[attributeName];

                XAttribute strokeAttribute = pathElement.Attribute("stroke");

                if (attributeName.Equals("Column4") && strokeAttribute != null)
                {
                    strokeAttribute.Value = svgColorMap[attributeName];
                }
            }
        }
    }

    // Convert the modified SVG content back to a stream
    using (MemoryStream memoryStream = new MemoryStream())
    {
        svgDocument.Save(memoryStream);
        memoryStream.Position = 0;

        SvgImageSource svgImage = new SvgImageSource();
            
        //svgImage.RasterizePixelWidth = (int)svgDocument.Root.Attribute("width");
        //svgImage.RasterizePixelHeight = (int)svgDocument.Root.Attribute("height");

        await svgImage.SetSourceAsync(memoryStream.AsRandomAccessStream());

        // Set the Image control directly as the content of your SVGImage2
        SVGImage2.Source = svgImage;
    }
}

I tried converting the modified SVG Document into memory stream and set it as the source for the image. But it is not showing unless I give rasterizepixel width and height which produces blurry images.

Answer 1

According to the document,

Since there is no height or width explicitly specified, the application layout will dictate the appropriate size for the SVG to decode at.

It is recommended that you set the width and height of SVG. If the image is blurry, you can first export and save the modified svg image to see if it is normal.