CODEWITHSUNDEEP
c#.netxamlsvguwp
gruby907
gruby907

Reputation: 13

Rendering text marker in SvgImageSource

I'm working now with UWP app and I need to convert SVG image from web address. I created new SvgImageSource with new Uri, but image doesn't render correct. In SVG document I have 2 markers: rect and text. Rect is rendering correctly, but text cannot render. Anyone know how to fix that problem?
C# code:

public async Task<ImageSource> GetAvatar(string address)
        {
            using(var client = new HttpClient())
            {
                var response = await client.GetAsync(address);
                string content = await response.Content.ReadAsStringAsync();
                if(content.Substring(0, 4).Equals("<svg"))
                {
                    var svg = new SvgImageSource(new Uri(address));
                    return svg;
                }
                return new BitmapImage();
            }
        }

SVG:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<rect width="100%" height="100%" fill="#FF5722"/>
<text x="50%" y="50%" dy="0.36em" text-anchor="middle" pointer-events="none" fill="#ffffff" font-family="'Helvetica', 'Arial', 'Lucida Grande', 'sans-serif'" font-size="125">
M
</text>
</svg>

Upvotes: 1

Views: 299

Answers (2)

jdweng
jdweng

Reputation: 34429

Look at code below :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Xml;
using System.Xml.Linq;

namespace ConsoleApplication1
{
    class Program
    {
        const string URL = "https://raw.githubusercontent.com/RocketChat/Rocket.Chat.Artwork/master/Logos/logo-dark.svg";
        static void Main(string[] args)
        {
            XDocument doc = XDocument.Load(URL);
            string text = doc.ToString();
            Console.WriteLine(text);
            Console.ReadLine();
        }
    }
}

Upvotes: 0

Nico Zhu
Nico Zhu

Reputation: 32775

I'm afraid text svg element is not supported in UWP platform. Please check SVG Support the text element is not in the support list. currently there is a workaround is convert the text to path element, and it will work.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<rect width="100%" height="100%" fill="#FF5722"/>
<path  d="M 81.055 101.5 L 81.055 17.545 L 53.94 78.59 L 40.31 78.59 L 13.05 17.545 L 13.05 101.5 L 0 101.5 L 0 0 L 19.285 0 L 47.415 64.235 L 75.11 0 L 94.83 0 L 94.83 101.5 L 81.055 101.5 Z" vector-effect="non-scaling-stroke"/>
</svg>

Upvotes: 1

Related Questions