Delphi 12 Skia组件渲染特定SVG源失败问题求助

问题场景 #

在Windows 10环境下使用Delphi 12自带的Vcl.Skia库，通过以下代码从TMemo获取SVG源并渲染：

procedure TForm1.ButtonShowSVGClick(Sender: TObject);
begin
  SkSvg1.Svg.Source := Memo.Lines.Text;
  SkSvg1.Update;
end;

该代码可正常渲染部分SVG，但某一特定SVG无法显示。项目完整代码如下：

DFM文件 #

object Form1: TForm1
  Left = 0
  Top = 0
  Caption = 'Form1'
  ClientHeight = 441
  ClientWidth = 1014
  Color = clBtnFace
  Font.Charset = DEFAULT_CHARSET
  Font.Color = clWindowText
  Font.Height = -12
  Font.Name = 'Segoe UI'
  Font.Style = []
  Position = poScreenCenter
  TextHeight = 15
  object MemoPanel: TPanel
    Left = 0
    Top = 0
    Width = 1014
    Height = 416
    Align = alClient
    BevelOuter = bvNone
    Caption = ' '
    TabOrder = 0
    ExplicitLeft = -370
    ExplicitWidth = 994
    ExplicitHeight = 249
    object SkSvg1: TSkSvg
      Left = 764
      Top = 0
      Width = 250
      Height = 416
      Align = alRight
      ExplicitLeft = 684
      ExplicitHeight = 441
    end
    object Memo: TMemo
      Left = 0
      Top = 0
      Width = 764
      Height = 416
      Align = alClient
      BorderStyle = bsNone
      Ctl3D = False
      Lines.Strings = (
        '<?xml version="1.0" encoding="UTF-8"?>'
        
          '<svg version="1.1"xmlns="http://www.w3.org/2000/svg" xmlns:xlink' +
          '="http://www.w3.org/1999/xlink" viewBox="0 0 12 12" width="12" h' +
          'eight="12">'
        #9'<style type="text/css">'
        #9#9'.Blue{fill:#1177D7;}'
        #9#9'.White{fill:#ffffff;}'
        #9'</style>'
        
          '  <path class="Blue" d="M 5.966 0.715 C 3.079 0.715 0.716 3.078 ' +
          '0.716 5.965 C 0.716 8.853 3.079 11.215 5.966 11.215 C 8.854 11.2' +
          '15 11.216 8.853 11.216 5.965 C 11.216 3.078 8.854 0.715 5.966 0.' +
          '715 Z"></path>'
        
          '  <path class="White" d="M 5.966 2.215 C 6.379 2.215 6.716 2.553' +
          ' 6.716 2.965 C 6.716 3.378 6.379 3.715 5.966 3.715 C 5.553 3.715' +
          ' 5.216 3.378 5.216 2.965 C 5.216 2.553 5.554 2.215 5.966 2.215 Z' +
          ' M 7.466 8.965 L 4.466 8.965 L 4.466 8.215 L 5.216 8.215 L 5.216' +
          ' 5.215 L 4.466 5.215 L 4.466 4.465 L 5.216 4.465 L 6.716 4.465 L' +
          ' 6.716 8.215 L 7.466 8.215 L 7.466 8.965 Z"></path>'
        '</svg>')
      ParentCtl3D = False
      ScrollBars = ssBoth
      TabOrder = 0
      WordWrap = False
      ExplicitWidth = 794
      ExplicitHeight = 249
    end
  end
  object ButtonShowSVG: TButton
    Left = 0
    Top = 416
    Width = 1014
    Height = 25
    Align = alBottom
    Caption = 'Show SVG'
    TabOrder = 1
    OnClick = ButtonShowSVGClick
    ExplicitLeft = 480
    ExplicitTop = 232
    ExplicitWidth = 75
  end
end

PAS文件 #

unit Unit1;

interface

uses
  Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants, System.Classes, Vcl.Graphics,
  Vcl.Controls, Vcl.Forms, Vcl.Dialogs, System.Skia, Vcl.StdCtrls,
  Vcl.Skia, Vcl.ExtCtrls;

type
  TForm1 = class(TForm)
    MemoPanel: TPanel;
    SkSvg1: TSkSvg;
    Memo: TMemo;
    ButtonShowSVG: TButton;
    procedure ButtonShowSVGClick(Sender: TObject);
  private
    { Private declarations }
  public
    { Public declarations }
  end;

var
  Form1: TForm1;

implementation

{$R *.dfm}

procedure TForm1.ButtonShowSVGClick(Sender: TObject);
begin
  SkSvg1.Svg.Source := Memo.Lines.Text;
  SkSvg1.Update;
end;

end.

DPR文件 #

program SkiaShowSVGFromSource;

uses
  Vcl.Forms,
  Unit1 in 'Unit1.pas' {Form1};

{$R *.res}

begin
  Application.Initialize;
  Application.MainFormOnTaskbar := True;
  Application.CreateForm(TForm1, Form1);
  Application.Run;
end.

问题原因 #

无法渲染的核心原因是SVG语法错误：在<svg>标签中，version="1.1"和xmlns="http://www.w3.org/2000/svg"两个属性之间缺少空格，被连写成了version="1.1"xmlns="..."。Skia的SVG解析器对语法合规性要求严格，这种连写会导致解析失败，无法渲染整个SVG。

此外，TMemo中SVG内容被拆分成多行并包含制表符（#9），虽然这一般不会引发解析问题，但也可能增加潜在的格式风险。

解决方法 #

方法1：直接修正SVG内容 #

修改TMemo中的SVG代码，在version="1.1"后添加空格，修正后的<svg>标签应为：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 12 12" width="12" height="12">

方法2：在代码中动态修复语法错误 #

如果无法直接修改Memo中的内容，可以在赋值前通过代码修正语法问题：

procedure TForm1.ButtonShowSVGClick(Sender: TObject);
var
  SVGText: string;
begin
  SVGText := Memo.Lines.Text;
  // 修复version与xmlns属性连写的问题
  SVGText := StringReplace(SVGText, 'version="1.1"xmlns', 'version="1.1" xmlns', [rfReplaceAll]);
  SkSvg1.Svg.Source := SVGText;
  SkSvg1.Update;
end;

执行上述任一方法后，TSkSvg即可正常渲染目标SVG。

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