.NET MAUI中<Image>控件无法显示远程SVG图片的问题求助

你的操作没有问题，.NET MAUI 6的<Image>控件默认不支持直接加载远程SVG资源——这是框架原生限制导致的：Windows和Android平台的基础Image组件本身没有内置远程SVG的解析加载能力，仅能处理本地SVG（需嵌入为项目资源）和JPG/PNG等位图格式。

以下是几种可行的解决办法：

方案一：使用第三方SVG解析库（推荐） #

借助SkiaSharp.Svg这类成熟的SVG处理库，实现远程SVG的加载与渲染：

1. 安装NuGet包：

   Install-Package SkiaSharp.Views.Maui.Controls
   Install-Package SkiaSharp.Svg
   

2. 在MauiProgram.cs中注册SkiaSharp服务：

   builder.UseSkiaSharp();
   

3. 在XAML中使用SKCanvasView，并通过后台代码加载远程SVG：
   XAML代码：

   <skia:SKCanvasView x:Name="SvgCanvas" PaintSurface="OnSvgCanvasPaintSurface" />
   

   后台C#代码：

   using SkiaSharp;
   using SkiaSharp.Svg;
   using System.Text;
   
   private SKSvg _svg;
   
   protected override async void OnAppearing()
   {
       base.OnAppearing();
       await LoadRemoteSvg();
   }
   
   private async Task LoadRemoteSvg()
   {
       var httpClient = new HttpClient();
       // 替换为你的远程SVG直接URL（注意避免带页面锚点的URL）
       var svgContent = await httpClient.GetStringAsync("https://www.meteosuisse.admin.ch/static/product/resources/weather-symbols/120.svg");
       
       _svg = new SKSvg();
       _svg.Load(new MemoryStream(Encoding.UTF8.GetBytes(svgContent)));
       SvgCanvas.InvalidateSurface();
   }
   
   private void OnSvgCanvasPaintSurface(object sender, SKPaintSurfaceEventArgs e)
   {
       var canvas = e.Surface.Canvas;
       canvas.Clear();
       
       if (_svg?.Picture == null) return;
       
       // 按控件尺寸缩放SVG
       var scale = Math.Min(e.Info.Width / _svg.Picture.CullRect.Width, e.Info.Height / _svg.Picture.CullRect.Height);
       canvas.Scale(scale);
       canvas.DrawPicture(_svg.Picture);
   }
   

方案二：将远程SVG转换为位图后加载 #

通过后台下载SVG并转换为PNG/JPG等位图格式，再赋值给Image控件：

using SkiaSharp;
using SkiaSharp.Svg;

private async Task LoadSvgAsBitmap()
{
    var httpClient = new HttpClient();
    var svgStream = await httpClient.GetStreamAsync("你的远程SVG URL");
    
    var svg = new SKSvg();
    svg.Load(svgStream);
    
    // 转换为指定尺寸的PNG
    using var image = SKImage.FromPicture(svg.Picture, new SKSize(120, 120));
    using var data = image.Encode(SKEncodedImageFormat.Png, 100);
    
    YourImageControl.Source = ImageSource.FromStream(() => new MemoryStream(data.ToArray()));
}

方案三：升级到.NET MAUI 7及以上版本 #

.NET MAUI 7对SVG支持进行了优化，部分场景下已支持直接加载远程SVG（需注意平台兼容性：Android需确保系统版本支持，Windows依赖WinUI的SVG处理能力），升级后可尝试直接使用原代码测试。

额外注意点 #

如果你的SVG链接是带页面锚点（如#/media/xxx）的URL，实际指向的是网页而非直接的SVG文件，需要复制原始SVG文件的直接URL，否则下载的是HTML页面，自然无法解析为SVG。

内容的提问来源于stack exchange，提问作者piferrari