TSVGIconImage FMX Demo

Overview

The SVGIconImageDemoFMX demonstrates the TSVGIconImage component in a FireMonkey (FMX) application. This demo showcases single SVG image display with multi-resolution support, scale-factor responsiveness, and perfect rendering across all platforms and device DPIs.

Location: Demo\DXXX\SVGIconImageDemoFMX.dpr

Purpose

Unlike TSVGIconImageList which manages collections of icons, TSVGIconImage is designed for displaying individual SVG images such as:

• Company logos
• Splash screen graphics
• Large illustrations
• Dynamic single-image displays
• Responsive background images

Features Demonstrated

1. Scale-Factor Responsive Icons

The demo shows how TSVGIconImage can display different SVG images at different device scale factors:

• 1x Scale (Standard DPI): Shows one SVG image
• 1.5x Scale (Medium DPI): Shows alternate SVG image
• 2x Scale (Retina/High-DPI): Shows high-resolution optimized SVG
• 3x Scale (Ultra-high DPI): Shows ultra-high resolution SVG

This allows you to provide optimized artwork for different display densities.

procedure TMainForm.FormCreate(Sender: TObject);
begin
  // Component automatically selects appropriate image
  // based on current screen scale factor

  // Images are pre-configured in TSVGIconFixedMultiResBitmap
  SVGIconImage1.MultiResBitmap.ItemByScale(1.0, False).SVGText := LoadSVG('logo_1x.svg');
  SVGIconImage1.MultiResBitmap.ItemByScale(1.5, False).SVGText := LoadSVG('logo_1.5x.svg');
  SVGIconImage1.MultiResBitmap.ItemByScale(2.0, False).SVGText := LoadSVG('logo_2x.svg');
  SVGIconImage1.MultiResBitmap.ItemByScale(3.0, False).SVGText := LoadSVG('logo_3x.svg');
end;

2. Dynamic Scale Factor Changes

The demo allows you to change the application's scale factor at runtime to see how TSVGIconImage responds:

procedure TMainForm.ChangeScaleFactor(AScale: Single);
begin
  // Change form scale
  Self.Scale.X := AScale;
  Self.Scale.Y := AScale;

  // SVGIconImage automatically selects appropriate bitmap
  // No additional code needed!
end;

This demonstrates:

• Automatic bitmap selection based on scale
• Smooth transitions between scales
• No manual intervention required
• Perfect rendering at any DPI

3. Multi-Resolution Bitmap Architecture

The demo uses TSVGIconFixedMultiResBitmap which:

• Stores multiple SVG sources for different scales
• Automatically selects the best match for current DPI
• Generates bitmaps on-demand
• Ensures sharp rendering on all devices

// Structure of MultiResBitmap items
// Each item has:
// - Scale: 1.0, 1.5, 2.0, 3.0
// - SVGText: SVG XML content
// - Bitmap: Auto-generated bitmap (cached)
// - Size: Rendered size in pixels

4. Loading SVG Images

The demo shows multiple ways to load SVG content:

From File:

procedure TMainForm.LoadFromFile;
begin
  SVGIconImage1.LoadFromFile('logo.svg');
end;

From String (SVGText):

procedure TMainForm.LoadFromString;
const
  SVG_LOGO = '<svg width="100" height="100">...</svg>';
begin
  SVGIconImage1.SVGText := SVG_LOGO;
end;

From Stream:

procedure TMainForm.LoadFromStream(AStream: TStream);
begin
  SVGIconImage1.LoadFromStream(AStream);
end;

5. Image Scaling Options

Control how the image scales within the component:

Proportional Scaling:

SVGIconImage1.Proportional := True; // Maintain aspect ratio

Stretch to Fill:

SVGIconImage1.Align := TAlignLayout.Client; // Fill entire area
SVGIconImage1.Proportional := False; // Stretch to fill

Center:

SVGIconImage1.Center := True; // Center within bounds

6. Visual Effects

Apply effects to the displayed image:

Fixed Color:

SVGIconImage1.FixedColor := TAlphaColorRec.Navy;

GrayScale:

SVGIconImage1.GrayScale := True;

Opacity:

SVGIconImage1.Opacity := 0.75; // 75% opaque

Key Concepts

TSVGIconFixedMultiResBitmap

The component uses TSVGIconFixedMultiResBitmap (derived from TFixedMultiResBitmap):

Properties:

• Items: Collection of TSVGIconFixedBitmapItem objects
• Each item represents one scale factor (1x, 1.5x, 2x, 3x)
• Each item contains:
  • SVGText: The SVG XML content
  • Scale: The scale factor (1.0, 1.5, 2.0, 3.0)
  • Size: The rendered size in pixels
  • IconName: Optional name/identifier

Automatic Selection: The component automatically selects the best bitmap based on:

1. Current screen DPI
2. Component size
3. Available scale factors
4. Closest match algorithm

Single Image vs. Multiple Images

Option 1: Same SVG at All Scales Provide one SVG, let the component scale it:

// Single SVG for all scales
SVGIconImage1.SVGText := LoadSVG('logo.svg');
// Component auto-scales for all DPIs

Option 2: Different SVGs at Different Scales Provide optimized SVGs for each scale:

// Different SVGs optimized for each scale
with SVGIconImage1.MultiResBitmap do
begin
  ItemByScale(1.0, False).SVGText := LoadSVG('logo_simple.svg');
  ItemByScale(2.0, False).SVGText := LoadSVG('logo_detailed.svg');
  ItemByScale(3.0, False).SVGText := LoadSVG('logo_ultra.svg');
end;

When to Use Different SVGs:

• Simplified artwork for small sizes
• More detail for large sizes
• Different visual treatment per DPI
• Platform-specific optimizations

Difference from VCL Version

FMX TSVGIconImage:

• Uses TAlphaColor (ARGB)
• Opacity is Single (0.0-1.0)
• Multi-resolution bitmap support built-in
• Cross-platform (Windows, macOS, iOS, Android)
• Inherits from TImage (FMX)

VCL TSVGIconImage:

• Uses TColor (RGB)
• Opacity is Byte (0-255)
• DPI awareness via Windows messages
• Windows-only
• Inherits from TGraphicControl (VCL)

Running the Demo

Prerequisites

• Delphi 10.3 Rio or later
• SVGIconImageList FMX components installed

Steps to Run

1. Navigate to Demo\DXXX\ folder
2. Open SVGIconImageDemoFMX.dpr
3. Select target platform (Win32, Win64, macOS, iOS, Android)
4. Build and run (F9)

Testing the Scale Factor Feature

1. Run the demo on your platform
2. Use the scale controls in the demo to change scale factor
3. Observe the image change as scale factor changes
4. Note the smooth transitions between scale factors
5. Verify sharpness at each scale level

Expected Behavior:

• At 1.0x: Shows standard resolution image
• At 1.5x: Automatically selects 1.5x bitmap
• At 2.0x: Switches to 2x (Retina) bitmap
• At 3.0x: Uses ultra-high resolution bitmap

Cross-Platform Testing

Windows

Test on monitors with different DPI settings:

• 96 DPI (100% scaling) → 1x bitmap
• 120 DPI (125% scaling) → 1.5x bitmap
• 144 DPI (150% scaling) → 1.5x or 2x bitmap
• 192 DPI (200% scaling) → 2x bitmap

macOS

Test on Retina displays:

• Standard display → 1x bitmap
• Retina display → 2x bitmap automatically selected

iOS

Test on different device generations:

• Older devices (iPhone 3G) → 1x
• Retina devices (iPhone 4-8) → 2x
• Retina HD devices (iPhone 6+ and later) → 3x

Android

Test on different DPI categories:

• MDPI (~160 DPI) → 1x
• HDPI (~240 DPI) → 1.5x
• XHDPI (~320 DPI) → 2x
• XXHDPI (~480 DPI) → 3x

Use Cases

1. Company Logo

Display company logo that scales perfectly:

SVGIconImage_Logo.LoadFromFile('company_logo.svg');
SVGIconImage_Logo.Proportional := True;
SVGIconImage_Logo.Align := TAlignLayout.Top;

2. Splash Screen Graphics

Create responsive splash screen:

SVGIconImage_Splash.LoadFromFile('splash.svg');
SVGIconImage_Splash.Align := TAlignLayout.Client;
SVGIconImage_Splash.Proportional := True;
SVGIconImage_Splash.Center := True;

3. Dynamic Content

Load different images dynamically:

procedure TMainForm.ShowStatus(AStatus: TStatus);
begin
  case AStatus of
    stSuccess: SVGIconImage1.LoadFromFile('success.svg');
    stWarning: SVGIconImage1.LoadFromFile('warning.svg');
    stError: SVGIconImage1.LoadFromFile('error.svg');
  end;
end;

4. Themed Graphics

Change image based on theme:

procedure TMainForm.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;

Common Issues and Solutions

Image doesn't appear

Cause: SVG not loaded or invalid SVG content Solution:

// Check if SVG loaded
if SVGIconImage1.SVGText = '' then
  SVGIconImage1.LoadFromFile('image.svg');

// Verify SVG is valid XML
try
  SVGIconImage1.SVGText := SVGContent;
except
  on E: Exception do
    ShowMessage('Invalid SVG: ' + E.Message);
end;

Image appears at wrong size

Cause: Scale factor mismatch or wrong alignment Solution:

// Set proper alignment
SVGIconImage1.Align := TAlignLayout.Client;

// Enable proportional scaling
SVGIconImage1.Proportional := True;

// Or set specific size
SVGIconImage1.Width := 200;
SVGIconImage1.Height := 200;

Different images don't switch when scale changes

Cause: Only one multi-res item defined Solution:

// Define images for each scale
with SVGIconImage1.MultiResBitmap do
begin
  // Clear existing
  Clear;

  // Add for each scale
  ItemByScale(1.0, True).SVGText := SVG_1x;
  ItemByScale(2.0, True).SVGText := SVG_2x;
  ItemByScale(3.0, True).SVGText := SVG_3x;
end;

Image appears pixelated

Cause: Using bitmap source instead of SVG Solution:

// Always use SVG sources
SVGIconImage1.SVGText := SVGContent; // Good
// Not this:
// SVGIconImage1.Bitmap.LoadFromFile('image.png'); // Bad!

Source Code

Project Location: Demo\DXXX\SVGIconImageDemoFMX.dpr

Key Files:

• SVGIconImageDemoFMX.dpr - Project file
• MainForm.pas - Main form with scale switching logic
• MainForm.fmx - Form layout

Key Methods:

• FormCreate - Initialize component and load SVGs
• ChangeScale - Switch between scale factors
• LoadSVGForScale - Load appropriate SVG for scale

Related Documentation

• Overview (FMX) - FMX components overview
• FMX Reference - Complete FMX API reference
• Demo (FMX) - All FMX demos overview
• TSVGIconImageList FMX Demo - Icon collection demo
• Deploy FMX Application - Deployment guide
• Demos - Detailed - Comprehensive demo documentation