In update 4 of the package, new functionality is added to the SVG image list to increase the number of images that can be created and also more options for exporting and linking to controls.
The SVG image list extends the functionality of the normal TImageList, in that it can automatically create all the images needed out of a list of scalable vector graphics.
Nowadays applications must be able to support monitor DPI scaling, so images are needed in multiple resolutions and also, images are needed that reflect a state, for example a “disabled” state.
To support this, two dimensions are added to the SVG image list: a list of “styles” and a list of “resolutions”.
So the number of images that can now be created with an SVG image list is:
Image count = SVG count * Style count * Resolution count
In the component editor, that is shown in the image above, the SVG’s and Styles are laid out in a grid.
Resolutions
How the resolutions are managed depend for a large part on the base TImagelist for Delphi VCL, FMX or Lazarus, from which the SVG image list is derived:
- The VCL TImageList does not itself support multiple resolutions (but in Delphi 10.3 the TVirtualImageList and TImageCollection components where added that do).
- The FMX TImageList is introduced in Delphi XE8 and supports multiple resolutions through the multi-resolution bitmap.
- The Lazarus TImageList supports multiple resolutions from version 1.9 and above.
The SVG image list will render all images on all resolutions that are defined on the base TImageList. For VCL the resolutions can be defined with an extra list of resolutions or rendered “on demand”. See the online help for details.
Styles
The styles are created by modifying the original SVG. For modifying the SVG’s in the SVG image list the xml feature “Entities” is used. With an entity you can replace a piece of text in the body of an xml with something else. So you could replace an attribute, for example a color or a transformation, or you could replace an element, for example replace a rectangle for a circle.
The SVG image list has two means for modifying the SVG:
- Defining an “Outer SVG” that embeds the original SVG by using the entity &cur_svg;. This can be used to modify the original SVG as a whole, for example by applying opacity or a filter.
- Replacing parts of the original SVG with entities. These will show up in the “Style entity list”. In the Style entity list you can specify values for each entity.
On the Style page of the SVG image list, there are some default settings for “Outer SVG” available, for example a “Saturation” filter to apply a “Disabled” look, or a “Drop shadow” effect.
The other method requires a bit more work. For this you need to edit the original SVG. The image below shows some variations on a single SVG that can be created with this method. A example how to do this can be found in the online help.
Linking to controls
The SVG image list is derived from a normal TImageList, so controls that can link to a TImageList can also link to a SVG image list.
Some components and controls have several properties that can link to an image list depending on the state of the images, for example a TActionManager has four properties: Images, DisabledImages, LargeImages and LargeDisabledImages.
So we may want to have all the SVG’s and Styles in a central place but also link to these four separate properties of the TActionmanager. This can be done by using the “SVG Linked image list” as an intermediate.
The SVG linked image list has alle the functionality of a SVG image list except that it has no SVG or Style data of its own, it gets these from the parent SVG image list it is linked to. It also has a “ParentStyleIndex” property, with this we can select a Style from the parent SVG image list.
This is a bit like the TVirtualImageList and TImageCollection of Delphi 10.3 where SVG linked image list is a TVirtualImageList and the SVG image list is the TImageCollection.
An example is shown below. This is the VCL demo viewer application, it has a central SVG image list with two styles, one for normal images and one for disabled images.
Then there are two SVG linked image lists, one, “ilNormal” selects the normal images from the SVG image list and is connected to the “Images” property of the action manager, the other “ilDisabled” is connected to the “DisabledImages” property.
Exporting images
The SVG image list has the capability to create bitmap images from SVG’s. This only happens when SVG’s are added to the list or certain properties of the image list are changed, for example the “Width” or “Height”, otherwise it just behaves as a normal image list.
So it only makes sense to use a SVG image list, if you actually need to render images in runtime, otherwise you might as well use a normal TImageList in your application, because of course, the SVG rendering software is complex and if you don’t use it in your application it is basically dead weight.
So another use of the SVG image list is just to produce images that you export and subsequently import in a normal image list. The SVG image list has a number of properties to help with this for example for naming the exported files, so you can easily import them back in bulk.
The images of the SVG image list can be exported as Bmp, Png, JPeg or SVG files. The VCL and Lazarus versions also can export multi layered Windows Icons.
Upgrading the SVG control package
If you are already using an earlier version of the SVG control package, you will get some warnings about properties that are changed or maybe are removed. All the warnings should be accepted and all should be ok, but to be on the safe side, make a backup of your code including the previous version of the SVG control package before upgrading. See the change log for details.
The SVG icons used in the examples are from: https://github.com/icons8/flat-color-icons/tree/master/svg