TSVGIconImage (FMX)

Unit: FMX.SVGIconImage

Inherits from: TImage

Description

TSVGIconImage is a FireMonkey (FMX) component that extends TImage to display single SVG images with automatic multi-resolution bitmap generation. It's designed for displaying standalone SVG graphics such as logos, illustrations, or large images across all FMX platforms.

The component uses TSVGIconFixedMultiResBitmap to store and manage bitmaps at multiple scale factors (1x, 1.5x, 2x, 3x), ensuring sharp rendering on any device from standard displays to Retina screens and mobile devices.

Properties

SVG Content

SVGText: String

property SVGText: string read GetSVGText write SetSVGText;

The SVG XML content as a string. Set this property to display an SVG image.

Example:

SVGIconImage1.SVGText := '<svg width="100" height="100">...</svg>';

Rendering

FixedColor: TAlphaColor

property FixedColor: TAlphaColor read GetFixedColor write SetFixedColor default TAlphaColorRec.Null;

Override all colors in the SVG with this fixed color. Use TAlphaColorRec.Null to preserve original colors.

Example:

// Apply blue color
SVGIconImage1.FixedColor := TAlphaColorRec.Blue;

// Restore original colors
SVGIconImage1.FixedColor := TAlphaColorRec.Null;

GrayScale: Boolean

property GrayScale: Boolean read GetGrayScale write SetGrayScale default False;

Renders the image in grayscale. Default: False.

Example:

SVGIconImage1.GrayScale := True;

BitmapZoom: Integer

property BitmapZoom: Integer read FZoom write SetBitmapZoom default 100;

Zoom percentage for rendering (10-100). Default: 100.

Example:

SVGIconImage1.BitmapZoom := 90; // 90% of original size

Inherited from TImage

The component inherits all properties from TImage:

• Bitmap: Access to the underlying bitmap
• MultiResBitmap: Multi-resolution bitmap collection
• Align: Alignment within parent
• Margins: Layout margins
• Padding: Internal padding
• Width, Height: Component dimensions
• Visible, Enabled: Display and interaction state

Methods

File Operations

LoadFromFile

procedure LoadFromFile(const AFileName: string);

Loads SVG content from a file.

Parameters:

• AFileName: Path to SVG file

Example:

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

Cross-Platform Example:

var
  FilePath: string;
begin
  {$IFDEF MSWINDOWS}
  FilePath := 'C:\Icons\logo.svg';
  {$ENDIF}
  {$IFDEF MACOS}
  FilePath := TPath.Combine(TPath.GetHomePath, 'logo.svg');
  {$ENDIF}
  {$IFDEF ANDROID}
  FilePath := TPath.Combine(TPath.GetDocumentsPath, 'logo.svg');
  {$ENDIF}
  {$IFDEF IOS}
  FilePath := TPath.Combine(TPath.GetDocumentsPath, 'logo.svg');
  {$ENDIF}

  SVGIconImage1.LoadFromFile(FilePath);
end;

SaveToFile

procedure SaveToFile(const AFileName: string);

Saves current SVG content to a file.

Parameters:

• AFileName: Path for output file

Example:

SVGIconImage1.SaveToFile('C:\Output\logo.svg');

Multi-Resolution Bitmap Access

GetFixedBitmap

function GetFixedBitmap: TSVGIconFixedBitmapItem;

Gets the current multi-resolution bitmap item for the current scale factor.

Returns: TSVGIconFixedBitmapItem for current scale

Example:

var
  BitmapItem: TSVGIconFixedBitmapItem;
begin
  BitmapItem := SVGIconImage1.GetFixedBitmap;
  if Assigned(BitmapItem) then
    ShowMessage(Format('Current scale: %f', [BitmapItem.Scale]));
end;

Inherited from TImage

The component inherits all methods from TImage:

• SetBounds: Set position and size
• BringToFront, SendToBack: Z-order management
• Repaint: Force redraw

Usage Examples

Basic Display

procedure TForm1.FormCreate(Sender: TObject);
begin
  // Load SVG
  SVGIconImage1.LoadFromFile('logo.svg');

  // Configure display
  SVGIconImage1.Align := TAlignLayout.Client;
  SVGIconImage1.WrapMode := TImageWrapMode.Fit;
end;

Company Logo

procedure TForm1.ShowLogo;
begin
  SVGIconImage_Logo.LoadFromFile('company_logo.svg');
  SVGIconImage_Logo.Align := TAlignLayout.Top;
  SVGIconImage_Logo.Height := 100;
  SVGIconImage_Logo.WrapMode := TImageWrapMode.Fit;
end;

Splash Screen

procedure TForm1.ShowSplash;
begin
  SVGIconImage_Splash.LoadFromFile('splash.svg');
  SVGIconImage_Splash.Align := TAlignLayout.Client;
  SVGIconImage_Splash.WrapMode := TImageWrapMode.Fit;
end;

Dynamic Content

procedure TForm1.ShowStatus(AStatus: TStatusType);
begin
  case AStatus of
    stSuccess:
      begin
        SVGIconImage1.LoadFromFile('success.svg');
        SVGIconImage1.FixedColor := TAlphaColorRec.Green;
      end;
    stWarning:
      begin
        SVGIconImage1.LoadFromFile('warning.svg');
        SVGIconImage1.FixedColor := TAlphaColorRec.Orange;
      end;
    stError:
      begin
        SVGIconImage1.LoadFromFile('error.svg');
        SVGIconImage1.FixedColor := TAlphaColorRec.Red;
      end;
  end;
end;

Theme Support

procedure TForm1.ApplyTheme(ADark: Boolean);
begin
  if ADark then
  begin
    SVGIconImage1.LoadFromFile('logo_dark.svg');
    SVGIconImage1.FixedColor := TAlphaColorRec.White;
  end
  else
  begin
    SVGIconImage1.LoadFromFile('logo_light.svg');
    SVGIconImage1.FixedColor := TAlphaColorRec.Black;
  end;
end;

Multi-Resolution Setup

procedure TForm1.SetupMultiResImage;
begin
  // The component automatically creates bitmaps for different scales
  // You can access the multi-res bitmap collection:
  with SVGIconImage1.MultiResBitmap do
  begin
    // Add different SVG sources for different scales
    ItemByScale(1.0, True).SVGText := LoadSVG('logo_1x.svg');
    ItemByScale(2.0, True).SVGText := LoadSVG('logo_2x.svg');
    ItemByScale(3.0, True).SVGText := LoadSVG('logo_3x.svg');
  end;
end;

Responsive Layout

procedure TForm1.SetupResponsive;
begin
  SVGIconImage1.LoadFromFile('illustration.svg');

  // Use anchors for responsive behavior
  SVGIconImage1.Anchors := [TAnchorKind.akLeft, TAnchorKind.akTop,
                             TAnchorKind.akRight, TAnchorKind.akBottom];

  // Or use align
  SVGIconImage1.Align := TAlignLayout.Client;
  SVGIconImage1.WrapMode := TImageWrapMode.Fit;
end;

From String

procedure TForm1.LoadFromString;
const
  SVG_ICON = '<svg width="100" height="100" viewBox="0 0 100 100">' +
             '<circle cx="50" cy="50" r="40" fill="blue"/>' +
             '</svg>';
begin
  SVGIconImage1.SVGText := SVG_ICON;
end;

Color Animation

procedure TForm1.AnimateColor;
var
  Animation: TColorAnimation;
begin
  Animation := TColorAnimation.Create(Self);
  Animation.Parent := SVGIconImage1;
  Animation.PropertyName := 'FixedColor';
  Animation.StartValue := TAlphaColorRec.Blue;
  Animation.StopValue := TAlphaColorRec.Red;
  Animation.Duration := 2;
  Animation.Loop := True;
  Animation.AutoReverse := True;
  Animation.Start;
end;

Multi-Resolution Behavior

The component automatically manages multiple bitmap resolutions:

Device Scale	Bitmap Generated	Example Devices
1.0x	Standard DPI	Desktop monitors (96 DPI)
1.5x	Medium DPI	Some Windows laptops (144 DPI)
2.0x	Retina/High-DPI	MacBook Retina, iPhone Retina
3.0x	Ultra-high DPI	iPhone Plus, modern Android

The component selects the appropriate bitmap automatically based on the screen's scale factor.

Key Differences from VCL Version

Feature	VCL TSVGIconImage	FMX TSVGIconImage
Base Class	TGraphicControl	TImage
Color Type	TColor (RGB)	TAlphaColor (ARGB)
Opacity	Byte (0-255)	Single (0.0-1.0)
Multi-Resolution	DPI messages	Built-in MultiResBitmap
Platforms	Windows only	Cross-platform
Layout	Manual positioning	FMX layout system

Platform-Specific Notes

Windows

• Test at different DPI settings (100%, 125%, 150%, 200%)
• Verify bitmap sharpness at all scales

macOS

• Test on Retina displays (2x scaling)
• Verify on both Intel and Apple Silicon Macs

iOS

• Test on different device scales (1x, 2x, 3x)
• Verify in both portrait and landscape orientations
• Test on iPhone and iPad

Android

• Test on different DPI categories (MDPI, HDPI, XHDPI, XXHDPI)
• Verify on various screen sizes
• Test on different Android versions

See Also

• TSVGIconImageList - Icon collection component
• TSVGIconFixedMultiResBitmap - Multi-resolution bitmap manager
• TFmxImageSVG - Base SVG rendering class
• Overview (FMX) - FMX components overview
• Demo (FMX) - Demo applications
• TSVGIconImage FMX Demo - Specific demo for this component