TSVGIconImage

Unit: SVGIconImage

Inherits from: TGraphicControl

Description

TSVGIconImage is a VCL graphic control that displays a single SVG image at any size. It can load SVG content from files, streams, text, or reference an icon from a TSVGIconImageList. The component supports all rendering features including scaling, opacity, fixed colors, and grayscale effects with double-buffer support for flicker-free display.

Published Properties

Content Source

You can specify the SVG content using one of four mutually exclusive methods:

ImageList + ImageIndex

property ImageList: TCustomImageList;
property ImageIndex: TImageIndex;

Reference an icon from an ImageList by index.

Usage:

SVGIconImage1.ImageList := SVGIconImageList1;
SVGIconImage1.ImageIndex := 0;

ImageList + ImageName (Delphi 10.4+)

property ImageList: TCustomImageList;
property ImageName: TImageName;

Reference an icon from an ImageList by name.

Usage:

SVGIconImage1.ImageList := SVGIconImageList1;
SVGIconImage1.ImageName := 'home';

FileName

property FileName: TFileName;

Load SVG from a file path.

Usage:

SVGIconImage1.FileName := 'C:\Icons\home.svg';

SVGText

property SVGText: string;

Set SVG content directly as XML text.

Usage:

SVGIconImage1.SVGText := '<svg width="24" height="24"><path d="..."/></svg>';

Appearance

FixedColor

property FixedColor: TColor;

Override SVG colors with a fixed color. Use SVG_INHERIT_COLOR for original colors. Default: SVG_INHERIT_COLOR

Usage:

SVGIconImage1.FixedColor := clBlue;
SVGIconImage1.FixedColor := SVG_INHERIT_COLOR;  // Restore original

ApplyFixedColorToRootOnly

property ApplyFixedColorToRootOnly: Boolean;

Apply FixedColor only to the root SVG element, not to child elements. Default: False

Usage:

SVGIconImage1.FixedColor := clRed;
SVGIconImage1.ApplyFixedColorToRootOnly := True;  // Only root element is red

GrayScale

property GrayScale: Boolean;

Render the image in grayscale. Default: False

Usage:

SVGIconImage1.GrayScale := True;  // Disabled appearance

Opacity

property Opacity: Byte;

Opacity level (0-255). Default: 255

Usage:

SVGIconImage1.Opacity := 200;  // 78% opaque
SVGIconImage1.Opacity := 128;  // 50% opaque

Layout

AutoSize

property AutoSize: Boolean;

Automatically resize the control to fit the SVG's natural size. Default: False

Usage:

SVGIconImage1.AutoSize := True;

Center

property Center: Boolean;

Center the SVG image within the control bounds. Default: True

Usage:

SVGIconImage1.Center := True;

Proportional

property Proportional: Boolean;

Maintain SVG aspect ratio when scaling. Default: True

Usage:

SVGIconImage1.Proportional := True;   // Keep aspect ratio
SVGIconImage1.Proportional := False;  // Stretch to fill

Stretch

property Stretch: Boolean;

Stretch the image to fill the control. Default: True

Usage:

SVGIconImage1.Stretch := True;

Standard VCL Properties

property Align;
property Anchors;
property Constraints;
property DragCursor;
property DragKind;
property DragMode;
property Enabled;
property ParentShowHint;
property PopupMenu;
property ShowHint;
property Touch;
property Visible;

Public Properties

SVG

property SVG: ISVG;

Direct access to the underlying SVG interface object.

Usage:

if not SVGIconImage1.SVG.IsEmpty then
  ShowMessage(Format('SVG size: %.0f x %.0f',
    [SVGIconImage1.SVG.Width, SVGIconImage1.SVG.Height]));

Component References

SVGIconImageList

property SVGIconImageList: TSVGIconImageListBase;

Reference to the associated TSVGIconImageList (when using ImageList property).

SVGIconImageCollection

property SVGIconImageCollection: TSVGIconImageCollection;

Reference to the associated TSVGIconImageCollection (Delphi 10.3+).

SVGVirtualImageList

property SVGVirtualImageList: TVirtualImageList;

Reference to the associated VirtualImageList (Delphi 10.3+).

Public Methods

Create / Destroy

constructor Create(AOwner: TComponent);
destructor Destroy; override;

Content Management

Clear

procedure Clear;

Clears the current SVG content.

Usage:

SVGIconImage1.Clear;

Empty

function Empty: Boolean;

Returns True if no SVG content is loaded.

Usage:

if SVGIconImage1.Empty then
  ShowMessage('No icon loaded');

File Operations

LoadFromFile

procedure LoadFromFile(const FileName: string);

Loads SVG content from a file.

Usage:

SVGIconImage1.LoadFromFile('C:\Icons\home.svg');

LoadFromStream

procedure LoadFromStream(Stream: TStream);

Loads SVG content from a stream.

Usage:

var
  Stream: TFileStream;
begin
  Stream := TFileStream.Create('icon.svg', fmOpenRead);
  try
    SVGIconImage1.LoadFromStream(Stream);
  finally
    Stream.Free;
  end;
end;

SaveToFile

procedure SaveToFile(const FileName: string);

Saves SVG content to a file.

Usage:

SVGIconImage1.SaveToFile('C:\Export\icon.svg');

Miscellaneous

Assign

procedure Assign(Source: TPersistent); override;

Assigns content from another object.

Usage:

SVGIconImage2.Assign(SVGIconImage1);

SVGIconItem

function SVGIconItem: TSVGIconItem;

Returns the associated TSVGIconItem when using an ImageList.

Usage:

var
  Item: TSVGIconItem;
begin
  Item := SVGIconImage1.SVGIconItem;
  if Assigned(Item) then
    ShowMessage(Item.IconName);
end;

UpdateSVGFactory

procedure UpdateSVGFactory;

Updates the SVG rendering factory (useful after changing global factory settings).

Usage:

// Change global factory
SetGlobalSvgFactory(GetSkiaSVGFactory);

// Update component to use new factory
SVGIconImage1.UpdateSVGFactory;

Published Events

property OnClick: TNotifyEvent;
property OnContextPopup: TContextPopupEvent;
property OnDblClick: TNotifyEvent;
property OnDragDrop: TDragDropEvent;
property OnDragOver: TDragOverEvent;
property OnEndDock: TEndDragEvent;
property OnEndDrag: TEndDragEvent;
property OnGesture: TGestureEvent;
property OnMouseActivate: TMouseActivateEvent;
property OnMouseDown: TMouseEvent;
property OnMouseEnter: TNotifyEvent;
property OnMouseLeave: TNotifyEvent;
property OnMouseMove: TMouseMoveEvent;
property OnMouseUp: TMouseEvent;
property OnStartDock: TStartDockEvent;
property OnStartDrag: TStartDragEvent;

Examples

Display Icon from ImageList

procedure TForm1.FormCreate(Sender: TObject);
begin
  SVGIconImage1.ImageList := SVGIconImageList1;
  SVGIconImage1.ImageIndex := 0;
  SVGIconImage1.FixedColor := clBlue;
end;

Display Icon from File

procedure TForm1.Button1Click(Sender: TObject);
begin
  if OpenDialog1.Execute then
  begin
    SVGIconImage1.LoadFromFile(OpenDialog1.FileName);
    SVGIconImage1.Proportional := True;
    SVGIconImage1.Stretch := True;
  end;
end;

Display Icon from Text

procedure TForm1.CreateCustomIcon;
const
  HomeSVG = '<svg width="24" height="24" viewBox="0 0 24 24">' +
            '<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>' +
            '</svg>';
begin
  SVGIconImage1.SVGText := HomeSVG;
  SVGIconImage1.FixedColor := clWindowText;
end;

Responsive Image

procedure TForm1.FormCreate(Sender: TObject);
begin
  with SVGIconImage1 do
  begin
    Align := alClient;
    Proportional := True;
    Center := True;
    LoadFromFile('logo.svg');
  end;
end;

Animated Color Change

procedure TForm1.Timer1Timer(Sender: TObject);
begin
  // Cycle through colors
  case ColorIndex of
    0: SVGIconImage1.FixedColor := clRed;
    1: SVGIconImage1.FixedColor := clGreen;
    2: SVGIconImage1.FixedColor := clBlue;
  end;
  ColorIndex := (ColorIndex + 1) mod 3;
end;

Hover Effect

procedure TForm1.SVGIconImage1MouseEnter(Sender: TObject);
begin
  SVGIconImage1.FixedColor := clHighlight;
  SVGIconImage1.Opacity := 255;
end;

procedure TForm1.SVGIconImage1MouseLeave(Sender: TObject);
begin
  SVGIconImage1.FixedColor := SVG_INHERIT_COLOR;
  SVGIconImage1.Opacity := 200;
end;

Using with TPicture

procedure TForm1.LoadSVGToPicture;
var
  SVGGraphic: TSVGGraphic;
begin
  SVGGraphic := TSVGGraphic.Create;
  try
    SVGGraphic.LoadFromFile('icon.svg');
    SVGGraphic.Opacity := 200;
    Image1.Picture.Assign(SVGGraphic);
  finally
    SVGGraphic.Free;
  end;
end;

Export to Bitmap

procedure TForm1.ExportToBitmap;
var
  Bitmap: TBitmap;
begin
  Bitmap := TBitmap.Create;
  try
    Bitmap.SetSize(256, 256);
    Bitmap.Canvas.Brush.Color := clWhite;
    Bitmap.Canvas.FillRect(Rect(0, 0, 256, 256));

    // Render SVG to bitmap
    SVGIconImage1.SVG.PaintTo(Bitmap.Canvas.Handle,
      TRectF.Create(0, 0, 256, 256));

    Bitmap.SaveToFile('icon.bmp');
  finally
    Bitmap.Free;
  end;
end;

Dynamic Icon Switcher

procedure TForm1.ShowIcon(const AIconName: string);
begin
  SVGIconImage1.ImageList := SVGIconImageList1;
  SVGIconImage1.ImageName := AIconName;
end;

procedure TForm1.Button1Click(Sender: TObject);
begin
  ShowIcon('home');
end;

procedure TForm1.Button2Click(Sender: TObject);
begin
  ShowIcon('settings');
end;

Notes

Content Source Priority

When multiple content sources are set, they are evaluated in this order:

1. ImageList + ImageIndex/ImageName
2. FileName
3. SVGText

Setting a new source automatically clears the others.

Performance

For best performance:

• Use ImageList when displaying multiple icons from the same collection
• Use SVGText for inline icons that don't change
• Avoid calling LoadFromFile repeatedly with the same file
• Cache frequently used SVG objects

Double Buffering

The component uses double buffering automatically, providing flicker-free display during:

• Resizing
• Property changes
• Repainting

See Also

• TSVGIconImageList
• TSVGGraphic
• ISVG Interface
• VCL Reference Overview