Detailed Demo Applications Guide

This document provides comprehensive information about all demo applications included with the SVGIconImageList library.

Overview

The library includes several demo applications that showcase different features and usage patterns:

VCL Demos

1. Main Demo - Comprehensive demonstration of all VCL components
2. SVG Viewer - Multi-engine SVG rendering comparison tool
3. SVG Explorer - File browser and icon management tool
4. Benchmark - Performance comparison between rendering engines
5. Virtual ImageList Demo - Modern ImageCollection/VirtualImageList usage
6. TControlList Demo - Integration with TControlList component

FMX Demos

1. FMX Main Demo - Cross-platform FireMonkey demonstration
2. TSVGIconImage FMX Demo - Standalone image component demo
3. TSVGIconImageList FMX Demo - ImageList component demo

VCL Demo Applications

1. Main Demo (Source\UMain.pas)

Purpose: Comprehensive demonstration of all TSVGIconImageList features

Location: Demo\Source\UMain.pas, UMain.dfm

Key Features Demonstrated:

Icon Management

// Add icons programmatically
procedure TMainForm.AddIconsClick(Sender: TObject);
var
  SVG: ISVG;
begin
  SVG := GlobalSVGFactory.NewSvg;
  SVG.LoadFromFile(IconFile);
  SVGIconImageList.Add(SVG, IconName);
end;

// Load from directory
procedure TMainForm.LoadDirectoryClick(Sender: TObject);
var
  Files: TStringList;
begin
  Files := TStringList.Create;
  try
    CollectSVGFiles(SelectedPath, Files);
    SVGIconImageList.LoadFromFiles(Files);
  finally
    Files.Free;
  end;
end;

Dynamic Resizing

procedure TMainForm.SizeTrackBarChange(Sender: TObject);
begin
  // Dynamically resize all icons
  SVGIconImageList.Size := SizeTrackBar.Position;
  UpdateStatusBar;
end;

Color Customization

procedure TMainForm.ColorComboBoxChange(Sender: TObject);
begin
  SVGIconImageList.FixedColor := ColorComboBox.Selected;
  SVGIconImageList.RecreateBitmaps;
end;

procedure TMainForm.GrayScaleCheckBoxClick(Sender: TObject);
begin
  SVGIconImageList.GrayScale := GrayScaleCheckBox.Checked;
end;

Opacity Control

procedure TMainForm.OpacityTrackBarChange(Sender: TObject);
begin
  SVGIconImageList.Opacity := OpacityTrackBar.Position;
end;

Component Integration

// ListView
ListView1.SmallImages := SVGIconImageList;
ListView1.LargeImages := SVGIconImageListLarge;

// TreeView
TreeView1.Images := SVGIconImageList;

// Toolbar
ToolBar1.Images := SVGIconImageList;

// Menu
MainMenu1.Images := SVGIconImageList;

// Buttons
Button1.ImageIndex := 0;
Button1.Images := SVGIconImageList;

How to Run:

1. Open project in Demo\D<version>\SVGIconImageList.dproj
2. Build and run
3. Click "Select Directory" to load SVG icons
4. Experiment with size, color, opacity controls
5. Observe icons in all integrated components

---

2. SVG Viewer (Demo\SvgViewer)

Purpose: Compare rendering quality and features across all four SVG engines

Location: Demo\SvgViewer\SvgViewerUnit.pas

Key Features:

Multi-Engine Display

procedure TSVGViewerForm.FormCreate(Sender: TObject);
begin
  // Initialize four rendering engines
  FrameViewerD2D.InitViewer('Native Direct2D', GetD2DSVGFactory);
  FrameViewSkia.InitViewer('Skia SVG', GetSkiaSVGFactory);
  FrameViewImage32.InitViewer('Delphi Image32', GetImage32SVGFactory);
  FrameViewSVGMagic.InitViewer('SVGMagic', GetSVGMagicFactory);
end;

Synchronized Rendering

procedure TSVGViewerForm.DrawImage(const AFileName: string);
begin
  // All four engines render the same SVG simultaneously
  FrameViewerD2D.DrawFile(AFileName);
  FrameViewSkia.DrawFile(AFileName);
  FrameViewImage32.DrawFile(AFileName);
  FrameViewSVGMagic.DrawFile(AFileName);
end;

Unified Controls

// All engines respond to same controls
procedure TSVGViewerForm.FixedColorComboBoxChange(Sender: TObject);
begin
  FrameViewerD2D.FixedColor := FixedColorComboBox.Selected;
  FrameViewSkia.FixedColor := FixedColorComboBox.Selected;
  FrameViewImage32.FixedColor := FixedColorComboBox.Selected;
  FrameViewSVGMagic.FixedColor := FixedColorComboBox.Selected;
end;

procedure TSVGViewerForm.OpacityTrackBarChange(Sender: TObject);
var
  OpacityValue: Single;
begin
  OpacityValue := OpacityTrackBar.Position / 100;
  FrameViewerD2D.Opacity := OpacityValue;
  FrameViewSkia.Opacity := OpacityValue;
  FrameViewImage32.Opacity := OpacityValue;
  FrameViewSVGMagic.Opacity := OpacityValue;
end;

Use Cases:

• Evaluate rendering quality differences
• Test SVG compatibility across engines
• Choose the best engine for your needs
• Debug rendering issues
• Visual quality comparison

How to Run:

1. Open Demo\SvgViewer\SvgViewer.dproj
2. Build and run
3. Click "Set Path" to select SVG directory
4. Select SVG files from list
5. Observe rendering in all four panels
6. Adjust opacity, colors, grayscale, aspect ratio
7. Compare visual results

---

3. SVG Explorer (Demo\SVGExplorer)

Purpose: Browse, manage, and edit SVG icon collections

Location: Demo\SVGExplorer\FExplorerSVG.pas

Key Features:

Directory Browser

procedure TfmExplorerSVG.DirSelectionChange(Sender: TObject);
begin
  SearchBox.Text := '';
  LoadFilesDir(DirSelection.Directory);
end;

procedure TfmExplorerSVG.LoadFilesDir(const APath: string; const AFilter: string = '');
var
  SR: TSearchRec;
  LFiles: TStringList;
  LStart, LStop: Cardinal;
begin
  LFiles := TStringList.Create;
  try
    LFilter := Format('%s*%s*.svg', [IncludeTrailingPathDelimiter(APath), AFilter]);
    if FindFirst(LFilter, faArchive, SR) = 0 then
    begin
      repeat
        LFiles.Add(SR.Name);
      until FindNext(SR) <> 0;
      FindClose(SR);
    end;

    LStart := GetTickCount;
    SVGIconImageList.LoadFromFiles(LFiles, False);
    UpdateListView;
    LStop := GetTickCount;

    PerformanceStatusBar.SimpleText :=
      Format('Load %d Images in %d msec.', [LFiles.Count, LStop - LStart]);
  finally
    LFiles.Free;
  end;
end;

Icon Search

procedure TfmExplorerSVG.SearchBoxInvokeSearch(Sender: TObject);
begin
  LoadFilesDir(DirSelection.Directory, SearchBox.Text);
end;

Icon Operations

// Delete icon
procedure TfmExplorerSVG.DeleteActionExecute(Sender: TObject);
var
  LFileName: string;
begin
  LFileName := IncludeTrailingPathDelimiter(DirSelection.Directory) +
    SVGIconImageList.Names[ImageView.Selected.ImageIndex] + '.svg';

  if MessageDlg(Format(CONFIRM_DELETE_FILE, [LFileName]),
    mtWarning, [mbNo, mbYes], 0, mbNo) = mrYes then
  begin
    DeleteFile(LFileName);
    SVGIconImageList.Delete(ImageView.Selected.ImageIndex);
    LoadFilesDir(DirSelection.Directory, SearchBox.Text);
  end;
end;

// Rename icon
procedure TfmExplorerSVG.RenameActionExecute(Sender: TObject);
var
  LIndex: Integer;
  LFileName, LPath, LNewFileName: string;
begin
  LIndex := ImageView.Selected.ImageIndex;
  LFileName := SVGIconImageList.Names[LIndex];
  LNewFileName := InputBox('Rename icon', 'New filename:', LFileName);

  if (LNewFileName <> '') and (LNewFileName <> LFileName) then
  begin
    LPath := IncludeTrailingPathDelimiter(DirSelection.Directory);
    if FileExists(LPath + LNewFileName + '.svg') then
      raise Exception.CreateFmt('File "%s" already exists!',
        [LPath + LNewFileName + '.svg'])
    else
      RenameFile(LPath + LFileName + '.svg', LPath + LNewFileName + '.svg');

    SVGIconImageList.Names[LIndex] := LNewFileName;
    UpdateListView;
  end;
end;

Engine Selection

procedure TfmExplorerSVG.SetFactory(AFactory: TSVGFactory);
begin
  case AFactory of
    svgDirect2D:
      SetGlobalSvgFactory(GetD2DSVGFactory);
    svgImage32:
      SetGlobalSvgFactory(GetImage32SVGFactory);
    svgSkia:
      SetGlobalSvgFactory(GetSkiaSVGFactory);
    svgSVGMagic:
      SetGlobalSvgFactory(GetSVGMagicFactory);
  end;

  grpFactory.ItemIndex := Ord(AFactory);
  Caption := Application.Title + ' - ' + ASVGFactoryNames[AFactory];
  LoadFilesDir(DirSelection.Directory);
end;

Dynamic Icon Sizing

procedure TfmExplorerSVG.TrackBarChange(Sender: TObject);
begin
  // Resize all icons in ListView
  SVGIconImageList.Size := TrackBar.Position;
end;

Use Cases:

• Browse large SVG icon collections
• Test icon loading performance
• Manage icon files (rename, delete)
• Search for specific icons
• Preview icons at different sizes
• Compare rendering engines

How to Run:

1. Open Demo\SVGExplorer\SVGIconExplorer.dproj
2. Build and run
3. Navigate to folder with SVG files
4. Icons load automatically
5. Use search box to filter
6. Select icon to view large preview
7. Use trackbar to resize icons
8. Right-click for rename/delete options

---

4. Benchmark (Demo\Benchmark)

Purpose: Measure and compare performance of all rendering engines

Location: Demo\Benchmark\UBenchmark.pas

Key Features:

Performance Tests

procedure TfrmBenchmark.RunBenchmark(AFactory: TSVGFactory);
begin
  SetFactory(AFactory);
  PrepareBenchmark('');

  // Test 1: Load SVG icons
  Benchmark(BenchmarkLoad);
  Benchmark(BenchmarkDraw);

  // Test 2: GrayScale conversion
  if chkGrayScale.Checked then
  begin
    Benchmark(BenchmarkGrayScale);
    Benchmark(BenchmarkDraw);
  end;

  // Test 3: FixedColor application
  if chkFixedColor.Checked then
  begin
    Benchmark(BenchmarkFixedColor);
    Benchmark(BenchmarkDraw);
  end;

  LogTicks(FLine, FStartTick);  // Total time
end;

Load Benchmark

procedure TfrmBenchmark.BenchmarkLoad;
var
  I: Integer;
  LSvg: ISvg;
begin
  SVGIconImageCollection.SVGIconItems.BeginUpdate;
  try
    SVGIconImageCollection.SVGIconItems.Clear;
    SVGIconImageCollection.FixedColor := clDefault;
    SVGIconImageCollection.GrayScale := False;

    for I := 1 to speLoops.Value do
    begin
      LSvg := GlobalSvgFactory.NewSvg;
      LSvg.Source := FSvgSource;
      SVGIconImageCollection.Add(LSvg, '');
    end;
  finally
    SVGIconImageCollection.SVGIconItems.EndUpdate;
  end;
end;

Draw Benchmark

procedure TfrmBenchmark.BenchmarkDraw;
var
  LBitmap: TBitmap;
  I: Integer;
  LStep, LSize: Real;
  LRect: TRect;
begin
  if chkDrawVisible.Checked then
  begin
    // Draw visible (to component canvas)
    DrawOnCanvas(TCanvasImage(BenchMarkImage).Canvas);
    BenchMarkImage.Repaint;
  end
  else
  begin
    // Draw to memory bitmap
    LBitmap := TBitmap.Create;
    try
      LBitmap.SetSize(SvgIconImage.Width, SvgIconImage.Height);
      DrawOnCanvas(LBitmap.Canvas);
    finally
      LBitmap.Free;
    end;
  end;
end;

Measured Metrics:

• SVG parsing and loading time
• Bitmap rendering time
• GrayScale conversion time
• FixedColor application time
• Total processing time
• Memory usage (optional)

Output Example:

Benchmark: Repeat 100 times. Draw invisible.
Factory         |  Load  |  Draw  |  Gray  |  Draw  |  Fixed |  Draw  | Total
Native Image32  |    245 |    156 |     12 |    145 |     18 |    152 |   728
Skia4Delphi     |    189 |    142 |      8 |    138 |     15 |    140 |   632
Direct2D        |    198 |    135 |     10 |    132 |     16 |    134 |   625
SVGMagic        |    267 |    178 |     14 |    172 |     20 |    175 |   826

How to Run:

1. Open Demo\Benchmark\Benchmark.dproj
2. Build and run
3. Click "Load" to select an SVG file
4. Set number of loops (iterations)
5. Choose options (GrayScale, FixedColor, Draw Visible)
6. Click "Run Benchmark"
7. Compare results across engines
8. Test with different SVG files for comprehensive results

---

5. Virtual ImageList Demo (Demo\Source\UMainVirtual.pas)

Purpose: Demonstrate modern ImageCollection/VirtualImageList pattern

Location: Demo\Source\UMainVirtual.pas, UMainVirtual.dfm

Key Features:

Collection Setup

procedure TFormVirtual.FormCreate(Sender: TObject);
begin
  // Single collection for all icons
  SVGIconImageCollection.LoadFromFiles(GetIconFiles);

  // Small icons (16x16) for toolbar
  SVGIconVirtualImageListSmall.ImageCollection := SVGIconImageCollection;
  SVGIconVirtualImageListSmall.Size := 16;
  ToolBar1.Images := SVGIconVirtualImageListSmall;

  // Medium icons (24x24) for TreeView
  SVGIconVirtualImageListMedium.ImageCollection := SVGIconImageCollection;
  SVGIconVirtualImageListMedium.Size := 24;
  TreeView1.Images := SVGIconVirtualImageListMedium;

  // Large icons (48x48) for ListView
  SVGIconVirtualImageListLarge.ImageCollection := SVGIconImageCollection;
  SVGIconVirtualImageListLarge.Size := 48;
  ListView1.LargeImages := SVGIconVirtualImageListLarge;
end;

Efficient Memory Usage

// Same icons, multiple sizes, minimal memory overhead
procedure TFormVirtual.ShowMemoryUsage;
var
  MemUsed: Integer;
begin
  MemUsed := SVGIconImageCollection.SVGIconItems.Count * 3;  // ~3KB per icon source

  // Each virtual list adds only rendered bitmaps for its size
  MemUsed := MemUsed + (SVGIconVirtualImageListSmall.Count * 1);    // 1KB per 16x16
  MemUsed := MemUsed + (SVGIconVirtualImageListMedium.Count * 2);   // 2KB per 24x24
  MemUsed := MemUsed + (SVGIconVirtualImageListLarge.Count * 9);    // 9KB per 48x48

  StatusBar1.SimpleText := Format('Approximate memory: %d KB', [MemUsed]);
end;

Centralized Theme Management

procedure TFormVirtual.ApplyTheme(AIsDark: Boolean);
begin
  // Change collection properties once
  if AIsDark then
  begin
    SVGIconImageCollection.FixedColor := clWhite;
    SVGIconImageCollection.AntiAliasColor := $202020;
  end
  else
  begin
    SVGIconImageCollection.FixedColor := clBlack;
    SVGIconImageCollection.AntiAliasColor := clWhite;
  end;

  // All virtual lists automatically update!
  // No need to update each list individually
end;

Benefits Demonstrated:

• Single source for multiple sizes
• Efficient memory usage
• Centralized icon management
• Easy theme changes
• Standard VCL integration

How to Run:

1. Open appropriate demo project for your Delphi version (10.3+)
2. Build and run
3. Observe same icons at different sizes
4. Try theme switching
5. Check memory usage differences

---

6. TControlList Demo (Demo\Source\UControlListMain.pas)

Purpose: Demonstrate SVG icon integration with TControlList (Delphi 10.3+)

Location: Demo\Source\UControlListMain.pas

Key Features:

ControlList Integration

procedure TFormControlList.ControlList1BeforeDrawItem(AIndex: Integer;
  ACanvas: TCanvas; ARect: TRect; AState: TOwnerDrawState);
var
  SVGIconItem: TSVGIconItem;
  LBitmap: TBitmap;
begin
  SVGIconItem := SVGIconImageCollection.SVGIconItems[AIndex];

  // Draw icon
  LBitmap := SVGIconItem.GetBitmap(64, 64,
    SVGIconImageCollection.FixedColor,
    False,
    SVGIconImageCollection.Opacity,
    SVGIconImageCollection.GrayScale
  );
  try
    ACanvas.Draw(ARect.Left + 8, ARect.Top + 8, LBitmap);
  finally
    LBitmap.Free;
  end;

  // Draw text
  ACanvas.TextOut(ARect.Left + 80, ARect.Top + 8, SVGIconItem.IconName);
end;

Use Cases:

• Custom icon list displays
• Modern list interfaces
• Icon galleries
• Icon selection dialogs

---

FMX Demo Applications

1. FMX Main Demo (Demo\Source\UMainFMX.pas)

Purpose: Cross-platform FireMonkey demonstration

Location: Demo\Source\UMainFMX.pas, UMainFMX.fmx

Key Features:

Cross-Platform Icon Loading

procedure TFormMain.FormCreate(Sender: TObject);
var
  IconPath: string;
begin
  {$IFDEF MSWINDOWS}
  IconPath := 'C:\Icons\';
  {$ENDIF}
  {$IFDEF MACOS}
  IconPath := '/Users/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;

FMX-Specific Features

// FMX uses TAlphaColor
SVGIconImageList1.FixedColor := TAlphaColorRec.Blue;

// Opacity is Single (0.0-1.0)
SVGIconImageList1.Opacity := 0.8;

// Zoom property
SVGIconImageList1.Zoom := 120;  // 120% zoom

// AutoSizeBitmaps
SVGIconImageList1.AutoSizeBitmaps := True;

Platforms Tested:

• Windows 32/64-bit
• macOS
• iOS (Simulator and Device)
• Android (ARM 32/64-bit)

---

2. TSVGIconImage FMX Demo (Demo\Source\USVGIconImageFMX.pas)

Purpose: Demonstrate standalone FMX image component

Location: Demo\Source\USVGIconImageFMX.pas, USVGIconImageFMX.fmx

Key Features:

procedure TFormSVGIconImage.FormCreate(Sender: TObject);
begin
  // Load from file
  SVGIconImage1.LoadFromFile('logo.svg');

  // Set properties
  SVGIconImage1.FixedColor := TAlphaColorRec.Blue;
  SVGIconImage1.BitmapZoom := 100;
  SVGIconImage1.GrayScale := False;

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

---

Running the Demos

System Requirements

• Delphi XE6 or later for VCL demos
• Delphi 10.3 or later for FMX demos
• Delphi 10.3+ for Virtual ImageList demos
• Windows 7+ for Direct2D demos

Build Instructions

1. Open Project: Navigate to Demo\D<version>\ folder and open the appropriate .dproj file

2. Configure Build:

   • Select platform (Win32/Win64)
   • Choose configuration (Debug/Release)

3. Build:

   Project → Build <ProjectName>

4. Run:

   Run → Run (F9)

Troubleshooting

Icons don't load:

• Check file paths in demo
• Verify SVG files are in Demo\svg_examples\
• Check Delphi version compatibility

Compilation errors:

• Ensure packages are installed
• Check library paths in Project Options
• Verify Delphi version matches project

Runtime errors:

• Ensure SVG rendering libraries are available
• For Skia: Check Skia4Delphi installation
• For Direct2D: Verify Windows 7+ with Platform Update

Learning Path

Beginners:

1. Start with Main Demo (UMain.pas)
2. Experiment with size, color, opacity controls
3. Try loading your own SVG files

Intermediate:

1. Explore Virtual ImageList Demo
2. Study SVG Viewer for engine comparison
3. Try SVG Explorer for file management

Advanced:

1. Analyze Benchmark results
2. Study source code implementation
3. Create custom demos based on examples

See Also

• VCL Demo Overview
• FMX Demo Overview
• Component Editor
• Usage Guide