Overview of the FMX components (Cross-Platform: Windows, macOS, Android, iOS)

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

Supported Delphi Versions: 10.3 Rio to Delphi 13 Florence (minimum recommended)

Supported Platforms:

• Windows 32-bit and 64-bit
• macOS 32-bit and 64-bit (Intel and Apple Silicon)
• iOS Simulator and Device (32-bit and 64-bit)
• Android ARM 32-bit and 64-bit

Supported Rendering Engines:

• Image32 (default) - Cross-platform, no dependencies
• Skia4Delphi - Best rendering quality, requires Skia4Delphi installation

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

TSVGIconImageList component

Minimum Delphi Version: 10.3 Rio

TSVGIconImageList is an FMX component for Delphi derived from TCustomImageList component that automatically builds multi-resolution bitmaps from SVG sources. It uses a collection of TSVGIconSourceItem (derived from TCustomSourceItem) with TSVGIconMultiResBitmap (derived from TMultiResBitmap) to generate bitmaps at multiple scales for different device DPIs.

The Component is available at "Ethea" page, after installing the run-time and design-time Packages located in \Packages\DXXX\SVGIconImageListFMX.dpk and \Packages\DXXX\dclSVGIconImageListFMX.dpk

Properties

Component Level (TSVGIconImageList):

Size Configuration:

• AutoSizeBitmaps: (default: True) Generate "dynamic" bitmaps scaled for requesting components. When False, build "static" bitmaps with predefined scale factors like traditional ImageList
• Size: Uniform size for square icons (default: 32 pixels)
• Width / Height: Individual dimensions for non-square icons
• Zoom: Zoom percentage for rendering (10-100, default: 100)

Rendering Attributes:

• FixedColor: Default color for all icons (TAlphaColor, default: TAlphaColors.Null = inherit)
• ApplyFixedColorToRootOnly: Apply color only to root element (default: False)
• GrayScale: Grayscale effect for all icons (default: False)
• Opacity: Default opacity for all icons (0.0-1.0, default: 1.0)

Per-Icon Level (TSVGIconSourceItem):

Each source item in the collection can define:

• IconName: Required unique identifier for the icon
• SVGText: SVG XML content in text format
• FixedColor: Override color for this icon (default: TAlphaColors.Null = inherit from ImageList)
• ApplyFixedColorToRootOnly: Per-icon root-only flag (default: False)
• GrayScale: Per-icon grayscale (default: False)
• Opacity: Per-icon opacity (default: -1 = inherit from ImageList)
• MultiResBitmap: TSVGIconMultiResBitmap - Automatically generated multi-scale bitmaps

Multi-Resolution Support: The component automatically generates bitmaps at multiple scales (1x, 1.5x, 2x, 3x) to support different device DPIs, ensuring sharp icons on all displays.

Methods

Single Icon Operations:

• AddIcon(SVGText, IconName): TSVGIconSourceItem - Add new icon from SVG text, returns source item
• InsertIcon(Index, SVGText, IconName): TSVGIconSourceItem - Insert icon at specific position
• CloneIcon(Index, InsertIndex): TSVGIconSourceItem - Duplicate existing icon
• DeleteIcon(Index) - Remove icon at index
• GetIcon(Index): TSVGIconSourceItem - Retrieve source item by index
• GetIconByName(Name): TSVGIconSourceItem - Retrieve source item by name

Multiple Icon Operations:

• AddIcons(FileNames) - Add multiple icons from files
• ClearIcons - Remove all icons from Source and Destination
• LoadFromFiles(FileNames, Append): Integer - Load multiple SVG files, returns count
• RefreshAllIcons - Regenerate all bitmaps (useful after property changes)

Extraction Methods:

• ExtractSVG(Index): TFmxImageSVG - Create new SVG instance from icon
• ExtractSVGByName(Name): TFmxImageSVG - Create new SVG instance by name

Update Methods:

• UpdateIconAttributes(Size, Opacity) - Batch update size and opacity for all icons

Automatic Updates (Implicit Methods):

• Setting Opacity updates all source items without specific values
• Setting Size (or Width/Height) resizes all icons (ignored when AutoSizeBitmaps = True)
• Setting Zoom applies zoom factor (10-100%) to all icons
• Setting FixedColor or GrayScale automatically regenerates bitmaps

Advanced Component Editor

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

TSVGIconImage component

Minimum Delphi Version: 10.3 Rio

TSVGIconImage is an FMX component derived from TImage that displays a single SVG image with automatic multi-resolution bitmap generation. It uses TSVGIconFixedMultiResBitmap (derived from TFixedMultiResBitmap) to create bitmaps at different scales for optimal display on various device DPIs.

At TSVGIconImageFMX component level you can set:

• SVGText
• Opacity

Proerty Editor

At design time you can change SVGText using The Property Editor supplied with the component.

At TSVGIconFixedBitmapItem level you can define, for each Scale factor:

• SVGText
• Opacity
• Size
• IconName (optional)

If you resize the image the MultiResBitmap rebuild the bitmap to show a perfect icon at any resolution.

You need more than one bitmap only if you want to have different aspect icon for different Device scale-factor: if you need only to resize your icon you must define only one MultiResBitmapItem with 16x16 bitmap size: at run-time the icon is built at the correct resolution needed by the Image at any scale factor.

TSVGIconImage Implicit Methods:

Component Editor

Actually there isn't a specific component editor: to define the SVGIconImage properties: you must use the object inspector and the Structure Editor to define the TSVGIconFixedMultiResBitmap and the TSVGIconFixedBitmapItem items. Don't use MultiResBitmap editor to create your bitmap, because your icons are not loaded from files but generated by font.

Choosing Between FMX Components

Use TSVGIconImageList when:

• ✅ Need multiple icons for ListView, buttons, toolbars
• ✅ Want centralized icon management
• ✅ Building cross-platform applications
• ✅ Need automatic multi-resolution bitmap generation
• ✅ Using icons with UI controls (Glyph, Images property)

Use TSVGIconImage when:

• ✅ Displaying single large images (logos, graphics)
• ✅ Need responsive image scaling
• ✅ Want standalone image component
• ✅ Building splash screens or image viewers

Quick Start Examples

Example 1: Using TSVGIconImageList

procedure TForm1.FormCreate(Sender: TObject);
begin
  // Configure ImageList
  SVGIconImageList1.Size := 32;
  SVGIconImageList1.FixedColor := TAlphaColorRec.Black;
  SVGIconImageList1.AutoSizeBitmaps := True;

  // Add icons
  SVGIconImageList1.AddIcon('<svg>...</svg>', 'home');
  SVGIconImageList1.LoadFromFiles(GetIconFiles);

  // Use with ListView
  ListView1.ItemAppearance.ItemAppearance := 'ImageListItemRightButton';
  ListView1.Images := SVGIconImageList1;

  // Add item with icon
  var Item := ListView1.Items.Add;
  Item.Text := 'Home';
  Item.ImageIndex := 0;
end;

Example 2: Using TSVGIconImage

procedure TForm1.FormCreate(Sender: TObject);
begin
  // Load and display SVG
  SVGIconImage1.LoadFromFile('logo.svg');
  SVGIconImage1.FixedColor := TAlphaColorRec.Blue;
  SVGIconImage1.BitmapZoom := 100;

  // Responsive layout
  SVGIconImage1.Align := TAlignLayout.Client;
end;

Example 3: Cross-Platform Icon Loading

procedure TForm1.LoadPlatformIcons;
var
  IconPath: string;
begin
  {$IFDEF MSWINDOWS}
  IconPath := 'C:\Icons\';
  {$ENDIF}
  {$IFDEF MACOS}
  IconPath := TPath.Combine(TPath.GetHomePath, 'Icons');
  {$ENDIF}
  {$IFDEF ANDROID}
  IconPath := TPath.Combine(TPath.GetDocumentsPath, 'icons');
  {$ENDIF}
  {$IFDEF IOS}
  IconPath := TPath.Combine(TPath.GetDocumentsPath, 'icons');
  {$ENDIF}

  SVGIconImageList1.LoadFromFiles(GetFilesInPath(IconPath));
end;

Example 4: Dynamic Icon Updates

procedure TForm1.UpdateIconAppearance;
begin
  // Change all icons
  SVGIconImageList1.FixedColor := TAlphaColorRec.White;
  SVGIconImageList1.Opacity := 0.9;
  SVGIconImageList1.RefreshAllIcons;  // Regenerate bitmaps

  // Change specific icon
  var Icon := SVGIconImageList1.GetIconByName('settings');
  if Assigned(Icon) then
  begin
    Icon.FixedColor := TAlphaColorRec.Red;
    Icon.GrayScale := True;
  end;
end;

Key Differences from VCL Version

Feature	VCL	FMX
Color Type	TColor	TAlphaColor
Opacity Type	Byte (0-255)	Single (0.0-1.0)
Base Classes	TDragImageList, TGraphicControl	TCustomImageList, TImage
Multi-Resolution	DPI Messages	Multi-scale bitmaps
Platform Support	Windows only	Windows, macOS, iOS, Android
Engines	4 (Image32, Skia, D2D, SVGMagic)	2 (Image32, Skia)
AutoSizeBitmaps	N/A	Available in FMX
Zoom Property	N/A	Available in FMX

Platform-Specific Considerations

Windows

• Full support for all features
• Hardware acceleration available with Skia4Delphi
• Standard file paths work as expected

macOS

• Use TPath.Combine for path construction
• Test on both Intel and Apple Silicon
• Consider retina display scaling

Android

• Use TPath.GetDocumentsPath for writable storage
• Test on devices with different DPIs (mdpi, hdpi, xhdpi, xxhdpi)
• Consider Android resource system integration

iOS

• Use TPath.GetDocumentsPath for documents
• Test on different device scales (1x, 2x, 3x)
• Consider iOS asset catalog integration

Performance Tips for FMX

1. Use AutoSizeBitmaps = True for dynamic layouts
2. Preload icons at application startup
3. Use appropriate Zoom levels (avoid unnecessary large bitmaps)
4. Leverage multi-resolution - let FMX choose optimal bitmap
5. Test on target devices - performance varies by platform

See Also

• Detailed API Reference: FMX Components Reference
• Component Editor: The Component Editor (FMX)
• SVGText Editor: The SVGText Editor (FMX)
• Demo Projects: FMX Demo Projects
• Deployment: Deploy FMX Application
• Engine Selection: Choice of Factories
• Advanced Topics: Library Architecture