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.

According to the document, 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. — Junjie Zhu
– Junjie Zhu, Commented Feb 5, 2024 at 8:32

Junjie Zhu · Accepted Answer · 2024-02-20 07:50:24Z

0

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.

answered Feb 20, 2024 at 7:50

Junjie Zhu

3,0991 gold badge5 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related