Overview of the VCL components

These Components are available on the "Ethea" palette page, after installing the design-time Package located in \Packages\D<version>\dclSVGIconImageList.dpk

Supported Delphi Versions: XE6 to Delphi 13 Florence

Supported Rendering Engines:

• Image32 (default) - No dependencies
• Skia4Delphi - Requires Skia4Delphi installation
• Direct2D - Windows 10+ native support
• SVGMagic - Requires SVGMagic library

For detailed component API documentation, see the VCL Reference section.

TSVGIconImageCollection

TSVGImageCollection is a VCL component for Delphi that contains a list of TSVGIconItem, a set of SVG (Scalable Vector Graphics) images.

Properties

Component Level:

• SVGIconItems: Collection of TSVGIconItem objects (the SVG images)
• FixedColor: Default fixed color for all icons (default: SVG_INHERIT_COLOR)
• ApplyFixedColorToRootOnly: Apply color only to root SVG element (default: False)
• GrayScale: Render all icons in grayscale (default: False)
• Opacity: Default opacity for all icons (0-255, default: 255)
• AntiAliasColor: Background color for anti-aliasing (default: clBtnFace)

Per-Icon Properties (TSVGIconItem):

• IconName: Full name with optional category (e.g., "Navigation\home")
• SVGText: SVG XML content
• FixedColor: Override color for this icon (default: SVG_INHERIT_COLOR)
• ApplyFixedColorToRootOnly: Apply color only to root (default: False)
• GrayScale: Grayscale effect for this icon (default: False)
• AntiAliasColor: Anti-alias background (default: clBtnFace)

Methods

• Add(SVG, IconName, ...): Integer - Add a new icon, returns index
• Delete(Index): Delete icon at index
• Delete(Category, StartIndex, EndIndex): Delete range with optional category filter
• Remove(Name): Remove icon by name
• IndexOf(Name): Integer - Find icon index by name
• ClearIcons - Remove all icons
• LoadFromFile(FileName, out ImageName): TSVGIconItem - Load from file
• LoadFromFiles(FileNames, Append): Integer - Load multiple files
• SaveToFile(FileName, ImageName): Boolean - Save icon to file
• LoadFromResource(hInstance, ResourceName, IconName): Integer - Load from resource
• LoadFromString(Source, IconName): Integer - Load from XML string
• Draw(Canvas, Rect, Index, Proportional) - Draw icon to canvas
• GetBitmap(Index, Width, Height): TBitmap - Get rendered bitmap (Delphi 10.3+)
• UpdateAttributes(FixedColor, ApplyToRootOnly, GrayScale, AntiAliasColor, Opacity) - Update all rendering attributes

Property Access Methods (Delphi 10.3+):

• IsIndexAvailable(Index): Boolean
• GetIndexByName(Name): Integer
• GetNameByIndex(Index): String

Advanced Component Editor

At design time is very easy to build the collection Icons using The Advanced Component Editor supplied with the component.

TSVGIconVirtualImageList

Minimum Delphi Version: 10.3 Rio

TSVGIconVirtualImageList is a VCL component that references a TSVGIconImageCollection to provide a standard VCL ImageList interface with SVG icons rendered at a specific size. Multiple virtual image lists can share the same collection, each rendering icons at different sizes without duplicating storage.

Properties

Required:

• ImageCollection: Reference to TSVGIconImageCollection (source of icons)

Size Configuration:

• Size: Uniform size for square icons (default: 16)
• Width: Icon width in pixels (default: 16)
• Height: Icon height in pixels (default: 16)

Rendering Attributes (override collection defaults):

• FixedColor: Override color (default: SVG_INHERIT_COLOR)
• ApplyFixedColorToRootOnly: Apply color to root only (default: False)
• GrayScale: Grayscale rendering (default: False)
• Opacity: Transparency level 0-255 (default: 255)
• AntiAliasColor: Anti-alias background (default: clBtnFace)

Disabled State:

• DisabledGrayScale: Use grayscale for disabled icons (default: True)
• DisabledOpacity: Opacity for disabled icons (default: 125)

DPI Support:

• Scaled: Enable automatic DPI scaling (default: True)

Methods

• DPIChanged(Sender, OldDPI, NewDPI) - Handle DPI changes automatically

Inherited from TVirtualImageList:

• Add(Name, ImageName) - Add reference to collection icon
• Clear - Clear all references
• Standard ImageList methods (Draw, GetIcon, etc.)

TSVGIconImageList

Minimum Delphi Version: XE6

TSVGIconImageList is a VCL component derived from TDragImageList that provides an all-in-one solution for SVG icon management. It contains both storage (TSVGIconItems collection) and rendering in a single component, making it simpler to use than the ImageCollection/VirtualImageList approach, but less memory-efficient when icons are needed at multiple sizes.

Properties

Component Level:

• Size: Uniform size for square icons (default: 16)
• Width / Height: Individual dimensions (default: 16 each)
• SVGIconItems: Embedded collection of TSVGIconItem objects
• Opacity: Global opacity 0-255 (default: 255)
• FixedColor: Global fixed color (default: SVG_INHERIT_COLOR)
• ApplyFixedColorToRootOnly: Apply to root only (default: False)
• GrayScale: Global grayscale effect (default: False)
• AntiAliasColor: Anti-alias background (default: clBtnFace)
• DisabledGrayScale: Grayscale for disabled (default: True)
• DisabledOpacity: Opacity for disabled (default: 125)
• Scaled: Automatic DPI scaling (default: True, Delphi 10.3+)

Per-Icon Level (TSVGIconItem):

• IconName: Full icon name (may include category: "Category\IconName")
• SVGText: SVG XML content
• FixedColor: Per-icon color override (default: SVG_INHERIT_COLOR)
• ApplyFixedColorToRootOnly: Per-icon root-only flag (default: False)
• GrayScale: Per-icon grayscale (default: False)
• AntiAliasColor: Per-icon anti-alias color (default: clBtnFace)

Additional Icon Properties:

• Name: Icon name without category (read/write)
• Category: Icon category (read/write)
• SVG: Direct access to ISVG interface (read-only)

Methods

Single Icon Operations:

• Add(SVG, IconName, [Category], GrayScale, FixedColor, AntiAliasColor): Integer - Add icon, returns index
• Delete(Index) - Delete icon at index
• Remove(Name) - Remove icon by name
• PaintTo(Canvas, Index, X, Y, Width, Height, Enabled) - Paint icon to canvas

Multiple Icon Operations:

• LoadFromFiles(FileNames, Append): Integer - Load multiple SVG files
• ClearIcons - Remove all icons
• RecreateBitmaps - Regenerate all cached bitmaps
• SaveToFile(FileName) - Save as bitmap strip

Access Methods (Delphi 10.4+):

• GetIndexByName(Name): TImageIndex - Find by name
• GetNameByIndex(Index): TImageName - Get name by index
• IsImageNameAvailable: Boolean - Always returns True

Property Access:

• Images[Index]: ISVG - Direct SVG interface access
• Names[Index]: string - Icon name access
• Count: Integer - Number of icons

Advanced Component Editor

At design time is very easy to build the Icons using The Advanced Component Editor supplied with the component.

TSVGIconImage

Minimum Delphi Version: XE6

TSVGIconImage is a VCL graphic control (derived from TGraphicControl) that displays a single SVG image. It can load SVG content from files, streams, text, or reference an icon from a TSVGIconImageList. The component uses double-buffering for flicker-free display and supports all rendering features including scaling, opacity, fixed colors, and grayscale effects.

Properties

Content Source (mutually exclusive):

• ImageList + ImageIndex: Reference icon from TSVGIconImageList by index
• ImageList + ImageName: Reference icon by name (Delphi 10.4+)
• FileName: Load SVG from file path
• SVGText: SVG XML content as string

Rendering:

• FixedColor: Override color (default: SVG_INHERIT_COLOR)
• ApplyFixedColorToRootOnly: Apply to root only (default: False)
• GrayScale: Grayscale effect (default: False)
• Opacity: Transparency 0-255 (default: 255)

Layout:

• AutoSize: Size control to SVG dimensions (default: False)
• Center: Center SVG in control (default: True)
• Proportional: Maintain aspect ratio (default: True)
• Stretch: Stretch to fill control (default: True)

Access:

• SVG: Direct ISVG interface access (read-only)
• SVGIconImageList: Reference to linked TSVGIconImageList (read-only)
• SVGIconImageCollection: Reference to collection (Delphi 10.3+, read-only)

Standard VCL:

• Align, Anchors, Constraints, Visible, Enabled, PopupMenu, ShowHint, etc.

Methods

Content Management:

• LoadFromFile(FileName) - Load SVG from file
• LoadFromStream(Stream) - Load SVG from stream
• SaveToFile(FileName) - Save SVG to file
• Clear - Clear current SVG content
• Empty: Boolean - Returns True if no content loaded

Miscellaneous:

• Assign(Source) - Copy from another component
• SVGIconItem: TSVGIconItem - Get linked icon item (when using ImageList)
• UpdateSVGFactory - Update to current global SVG factory

Standard VCL Events:

• OnClick, OnDblClick, OnMouseDown, OnMouseUp, OnMouseMove, OnMouseEnter, OnMouseLeave
• OnDragDrop, OnDragOver, OnEndDrag, OnStartDrag, OnGesture, etc.

Design-Time Support

Property Editor: At design-time you can use the SVGText Property Editor to visually edit SVG content with syntax highlighting and preview.

Component Editor: Double-click the component to open the SVGText editor.

Choosing Between Components

Use TSVGIconImageCollection + TSVGIconVirtualImageList when:

• ✅ Using Delphi 10.3 or later
• ✅ Need same icons at multiple sizes (memory efficient)
• ✅ Want centralized icon management
• ✅ Building modern applications with VCL Styles

Use TSVGIconImageList when:

• ✅ Supporting Delphi XE6-10.2
• ✅ Need simple, self-contained solution
• ✅ Icons used at single size only
• ✅ Quick migration from standard TImageList

Use TSVGIconImage when:

• ✅ Displaying individual SVG images (logos, graphics)
• ✅ Need responsive image scaling
• ✅ Want direct file/stream loading
• ✅ Building custom SVG viewers

Quick Start Examples

Example 1: Classic ImageList Approach

procedure TForm1.FormCreate(Sender: TObject);
begin
  // Load icons
  SVGIconImageList1.LoadFromFiles(GetSVGFiles);

  // Configure size and appearance
  SVGIconImageList1.Size := 32;
  SVGIconImageList1.FixedColor := clWindowText;

  // Use with controls
  ToolBar1.Images := SVGIconImageList1;
  ListView1.SmallImages := SVGIconImageList1;
end;

Example 2: Modern Virtual ImageList Approach (Delphi 10.3+)

procedure TForm1.FormCreate(Sender: TObject);
begin
  // Load once into collection
  SVGIconImageCollection1.LoadFromFiles(GetSVGFiles);

  // Create multiple virtual lists at different sizes
  VirtualImageList16.ImageCollection := SVGIconImageCollection1;
  VirtualImageList16.Size := 16;
  ToolBar1.Images := VirtualImageList16;

  VirtualImageList32.ImageCollection := SVGIconImageCollection1;
  VirtualImageList32.Size := 32;
  ListView1.SmallImages := VirtualImageList32;

  VirtualImageList48.ImageCollection := SVGIconImageCollection1;
  VirtualImageList48.Size := 48;
  ListView1.LargeImages := VirtualImageList48;

  // Same icons, different sizes, shared storage!
end;

Example 3: Display SVG Image

procedure TForm1.ShowLogo;
begin
  SVGIconImage1.LoadFromFile('logo.svg');
  SVGIconImage1.Proportional := True;
  SVGIconImage1.Center := True;
end;

See Also

• Detailed API Reference: VCL Components Reference
• Usage Guide: Usage of VCL Components
• Component Editor: The Component Editor
• SVGText Editor: The SVGText Editor
• Virtual ImageList Guide: Use as Virtual Image Collection
• Demo Projects: VCL Demo Project
• Advanced Topics: Library Architecture
• Engine Selection: Choice of Factories