Skip to content
Carlo Barazzetta edited this page May 5, 2024 · 90 revisions

Welcome to the SVGIconFontImageList guide (VCL+FMX)

Actual official version 4.1.4 (VCL+FMX)

Component Description
https://github.com/EtheaDev/SVGIconImageList/blob/master/Packages/SVGIconImageCollectionComponentIcon.png TSVGIconImageCollection is collection of SVG Images for Delphi to provide a centralized list of images for SVGIconVirtualImageLists (only for VCL)
https://github.com/EtheaDev/SVGIconImageList/blob/master/Packages/SVGIconVirtualImageListComponentIcon.png TSVGIconVirtualImageList is a special "virtual" ImageList for Delphi linked to an SVGIconImageCollection (only for VCL) to simplify use of SVG Icons (resize, opacity, grayscale and more...)
https://github.com/EtheaDev/SVGIconImageList/blob/master/Packages/SVGIconImageComponentIcon.png TSVGIconImage is an extended Image component for Delphi (VCL+FMX) to show any SVG image directly or included into a an SVGIconImageList with all functionality (stretch, opacity, grayscale and more...)
https://github.com/EtheaDev/SVGIconImageList/blob/master/Packages/SVGIconImageListComponentIcon.png TSVGIconImageList is an extended ImageList for Delphi (VCL+FMX) with an embedded SVG image collection: the VCL component is deprecated, we recommend to use SVGIconImageCollection + SVGIconVirtualImageList also for older Delphi versions!

You can read more details here.

Installation

You can install a copy of this project from GetIt Package manager, but if you want to use the latest version, clone this repository into a {DevDirectory} (for example C:\Dev\SVGIconImageList).

Open your package group from \svgIconImageList\Packages\DelphiVersion folder, (for example SVGIconImageListGroupPackages.groupproj), then buil all run-time packages and install design-time packages.

Remember to add those folders to Search Path:

{DevDirectory}\Source

{DevDirectory}\Image32\Source

or if you want to use dcu units:

_{DevDirectory}\Lib\D12$(Platform)$(Config)

(if you need 64 bit dcu files, rebuild packages with 64Bit platform).

Very important notice

WARNING: From version 4.0, TSVGIconVirtualImageList inherits from TVirtualImageList (using Delphi 10.3 to latest). For previous Delphi versions TSVGIconVirtualImageList inherits from TSVGIconImageListBase.

An important difference is that a TVirtualImageList may use and create only a subset of the images in the collection.

Although, the standard TVirtualImageList does not have the FixedColor, GrayScale, ApplyToRootOnly and Opacity properties, these properties exist at the TSVGIconImageCollection and they would be reflected on the linked TVirtualImageList, but if you change those properties at collection level, all the VirtualImageList linked changes!

For this reasons, now TSVGIconVirtualImageList have also FixedColor, GrayScale, ApplyToRootOnly and Opacity properties, so you can setup those properties only at VirtualImageList level, and you can share the same TSVGIconImageCollection from many VirtualImageList with different poperties, as you can see in the new SVGIconVirtualImageListDemo.

So, if you are using those components from Delphi 10.3, the recommended combination should be TSVGIconImageCollection + TSVGIconVirtualImageList.

Don't forget also the importance of PreserveItems when you have a large ImageCollection with many linked Actions. Without setting this property to "True", everytime you add or remove an icon in the collection, you have to check and change the ImageIndex of all the Actions.

Another feature available from Delphi 10.4 version, is that TSVGIconImageCollection inherits from TCustomImageCollection, so you can also use it with the TVirtualImage component and place SVG icons into the TControlList component, as explained here...

Choose your preferred SVG engine!

There are three implementation:

  • Native Delphi Image32 (default), uses Image32 library by Angus Johnson

  • Using Skia4Delphi library, a cross-platform 2D graphics API based on Google's Skia Graphics Library

  • A wrapper to the native Windows Direct2D implementation

Index help guide

Go to the Index of the guide form complete support!

Performance comparison

This table shows the performance of the three rendering engines tested with SVGExplorer, using a significant amount of icons from different sets, rendered at 128x128 pixels.

Count Icon set Image32 D2D Skia4Delphi
997 Font-Awesome 1265ms 1453ms 1172ms
654 Papirus 2750ms(1) 937ms 1266ms(1)
5366 Material-Design 11015ms 12001ms 10688ms

As you can see, the three engines perform differently depending on the icons and their complexity.

(1)Notice that Image32 and Skia4Delphi are the only engines capable of rendering blur effect (that is always slow to calculate): this is the reason of "slow" performance to render Papirus icons that contains blur effect.

Delphi versions supported

The VCL components are compatible with Delphi versions starting from Delphi XE6 to actual version.

The FMX components are compatible with Delphi versions starting from Delphi 10.2 to actual version. Now the only platform supported is Windows!

In this repository you can find all the sources of components and some demos.

Preview

This image shows the component editor and the Demo (VCL version)

https://github.com/EtheaDev/SVGIconImageList/blob/master/Demo/Images/Sample.jpg

This image shows the VCL SVGText-property editor (into a Dark styled Delphi IDE)

https://github.com/EtheaDev/SVGIconImageList/blob/master/Demo/Images/SVGTextPropertyEditorDark.jpg

This image shows the FMX SVGText-property editor

https://github.com/EtheaDev/SVGIconImageList/blob/master/Demo/Images/SVGTextPropertyEditorFMX.jpg

This image shows the component editor and the Demo (FMX version)

https://github.com/EtheaDev/SVGIconImageList/blob/master/Demo/Images/SampleFMX.jpg

Quick overview of SVGIconImageList VCL Version

Use the advanced Component Editor (VCL) to easily create your SVG Icons, loading from files or settings SVGText property. You can also define categories for icons.

https://github.com/EtheaDev/SVGIconImageList/blob/master/Demo/Images/ComponentEditor.jpg

Resize Icons at any pixel size settings Size (or Width and Height) of the ImageList.

From D10.3: use TSVGIconImageCollection with native TVirtualImageList

https://github.com/EtheaDev/SVGIconImageList/blob/master/Demo/Images/NativeVirtualImageList.jpg

UTILITIES

The SVG Viewer Demo is useful to check the rendering quality of the engines available.

The SVG Icon Explorer utility is useful to explore and preview your svg image collections.

You can use SVG Shell Extensions if you want to see your icons directly into Windows Explorer or you want to edit them using a powerful SVG Text Editor.

Integration into Windows Shell

You can use SVG Shell Extensions if you want to see your icons directly into Windows Explorer or you want to edit them using a powerful SVG Text Editor.

SVG Shell Extensions Preview

Demos

The VCL Demo is located into specific Delphi version folder: Demo\DXXX\SVGIconImageListDemo.dpr

https://github.com/EtheaDev/SVGIconImageList/blob/master/Demo/Images/Demo.jpg

With the demo you can resize icons at any dimension, change VCL style to check visibility on different colors, apply GrayScale effect or Fixed Color effect and resize SVGIconImage to se a perfect rescaling of icons.

The FMX Demo is located into specific Delphi version folder: Demo\DXXX\SVGIconImageListDemoFMX.dpr

https://github.com/EtheaDev/SVGIconImageList/blob/master/Demo/Images/DemoFMX.jpg

With the demo you can see the icons at different dimension, into ListBoxitems, and into different TGliph with perfect rescaling of icons. You can apply GrayScale effect or Fixed Color Effect.

Those Demos uses a sample of free SVG Icons from "Icons8", stored into Demo/flat-color-icons folder.

License

Licensed under the Apache License, Version 2.0, (the "License")

THANKS TO

These components uses the followin libraries:

Many thanks to Vincent Parrett and Kiriakos Vlahos for their great contibution.