Search code examples
delphisvgskiaskia4delphidelphi-12-athens

Rendering a specific SVG source in Delphi 12 Skia does not work


In Delphi 12, I am trying to programmatically render a specific SVG in a TSkSvgcomponent from a TMemo source:

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

It does work with some SVG sources, but it does not work with the following code:

DFM file:

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 file:

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 file:

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.

Please note: The project uses Vcl.Skia, i.e. the Skia VCL provided by Delphi 12.

Delphi 12 in Windows 10.


Solution

  • While this is not an exact answer to my question, I solved the problem using a TSVGIconImage component instead of a TSkSvg component. The TSVGIconImage component works perfectly and renders all SVG sources without a problem. (TSVGIconImage is a part of the SVGIconImageList component library from ETHEA).