[Tutorial] SVG Image List usage

[lainz]

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

Requirements:
1) Install BGRABitmap
2) Install BGRAControls

(Hint: Use online package manager)

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

A) Create elements
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.

B) Create SVG Image List
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:

Code: Pascal  [Select][+][-]

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

Done!

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

Attached a demo.

Optional parameter:

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.

Code: Pascal  [Select][+][-]

1. 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!

[Handoko]

Thank you very much. I was thinking to use svg images in my program. This tutorial is very useful.

Maybe you should also write it on or copy/paste to the wiki page:
https://wiki.freepascal.org/BGRABitmap_tutorial

[lainz]

Done
https://wiki.freepascal.org/SVG_Image_List