SVG Image List

Hi, this is a simple tutorial on how to use SVG Images in our Lazarus applications.

Requirements

1) Install BGRABitmap

(Hint: Use online package manager)

In this tutorial we will add an SVG Icon to a TMainMenu.

1) Drop a TMainMenu, add some entries like 'File' and a sub entry 'Open'.

2) Drop a regular TImageList, assign it to the MainMenu1 we previously created.

3) Assign the ImageIndex in the entries, for example in the File > Open add index 0.

That is not different as you need to do it anyways with a regular image list, so nothing changes here. The next step shows the SVG stuff.

1) Add a TBGRASVGImageList from BGRA Themes pallete.

2) Double click the SVG Image List component and add some SVG's, just load them from file.

3) Add this code, the glue between our two image lists:

procedure TForm1.FormCreate(Sender: TObject);
begin
  BGRASVGImageList1.PopulateImageList(ImageList1, [24]);
end;

Done!

Now you have SVG Icons in your application, repeat for buttons and any component that supports a regular image list.

The second parameter is array of resolutions, 24px is the default on Windows. You can add more like 48px for retina on macOS or High DPI on Windows.

BGRASVGImageList1.PopulateImageList(ImageList1, [24, 48]);

Important: You need to enable 'Scaled' property on the regular image list in order to the extra resolutions work fine.

Enjoy!