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. When the image shows an icon of an ImageList, the icon inside the ImageList is left untouched (it is shared with every other user of the list).

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