Recent

Author Topic: [Tutorial] SVG Image List usage  (Read 460 times)

lainz

  • Hero Member
  • *****
  • Posts: 4025
  • Leandro Diaz
[Tutorial] SVG Image List usage
« on: December 13, 2020, 04:16:09 pm »
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!
« Last Edit: December 13, 2020, 04:48:00 pm by lainz »
https://lainz.github.io/ - My Website :)
https://lazpaint.github.io/ -  Download LazPaint

Handoko

  • Hero Member
  • *****
  • Posts: 4180
  • My goal: build my own game engine using Lazarus
Re: [Tutorial] SVG Image List usage
« Reply #1 on: December 13, 2020, 04:40:57 pm »
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

  • Hero Member
  • *****
  • Posts: 4025
  • Leandro Diaz
Re: [Tutorial] SVG Image List usage
« Reply #2 on: December 13, 2020, 04:55:39 pm »
https://lainz.github.io/ - My Website :)
https://lazpaint.github.io/ -  Download LazPaint

 

TinyPortal © 2005-2018