Skip to content
Carlo Barazzetta edited this page Jan 24, 2022 · 94 revisions

Welcome to the SVGIconFontImageList guide (VCL+FMX)

Actual official version 3.3.0 (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!

Installation

Clone repository into a {DevDirectory} (for example C:\Dev\SVGIconImageList).

From Delphi IDE, open Package Group "SVGIconImageGroupPackages.groupproj" of your Delphi version located in: SVGIconImageList\Packages\DXXX (for example for Delphi 10.4 open C:\Dev\SVGIconImageList\Packages\D10_4\SVGIconImageListGroupPackages.groupproj

Build RunTime package: SVGIconImageList_DXXX

Install DesignTime package: dclSVGIconImageList_DXXX

Remember to add those folders to Search Path:

{DevDirectory}\Source

{DevDirectory}\Image32\Source

Very important notice:

The correct use of these components are in "virtual" mode: TVirtualImageList (available from D10.3) and TSVGIconVirtualImageList both use images from TSVGIconImageCollection as explained here...

We advise that TSVGIconVirtualImageList should be used only for versions of Delphi before 10.3.

The TSVGIconImageCollection inherits from TCustomImageCollection, so you can also use it with the TVirtualImage component and place SVG icons into the new TControlList component (available from Delphi 10.4.2), as explained here...

Index help guide

Go to the Index of the guide form complete support!

New in version 2.3: four SVG engines available and Android+iOS support!

There are four "SVG engines" implementation:

  • Delphi Image32 (default): the new implementation, using Image32 library by Angus Johnson

  • Delphi TSVG: the first native Delphi code, based on Martin's work which is using GDI+

  • A wrapper to the native Windows Direct2D implementation

  • A wrapper to the "Cairo" library (written in C)

You can read more details here.

Performance comparison

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

Count Icon set TSVG Image32 D2D Cairo
997 Font-Awesome 453ms 453ms 672ms 516ms
654 Papirus 547ms 781ms(1) 547ms 891ms(1)
5366 Material-Design 5031ms 5094ms 6531ms 5828ms

As you can see, the four engines perform differently depending on the icons and their complexity, but the two native Delphi implementation are the best.

(1)Notice that Image32 and Cairo 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.

Available from Delphi XE3 to Delphi 10.4 (32bit and 64bit platforms)

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

https://github.com/EtheaDev/SVGIconImageList/blob/master/Demo/Images/SVGTextPropertyEditor.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 (VLC) 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

For recent versions of Delphi the recommended combination should be TSVGIconImageCollection + TVirtualImageList. 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.

SVG Icon Explorer Utility

The SVG Icon Explorer utility is located into SVGExplorer folder

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

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 use the followin libraries:

  • SVG library by Martin Walter (Original version (c) 2005, 2008) with license:
    Use of this file is permitted for commercial and non-commercial. Use, as long as the author is credited.
    home page: http://www.mwcs.de email: [email protected]
    This library is included in the svg folder of this project.
  • Cairo Delphi headers by Henri Gourvest These files are included in the cairo folder of this project.
  • Cairo librsvg dlls by DJMaster These files are included in the cairo/dlls folder of this project.
  • Image32 library by Angus Johnson These files are included in the Image32/Source and Image32/source/Image32_SVG folders

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

TSVGIconImageList and TSVGIconImage are similar to TSVGImageList and TSVGImage included into project: https://github.com/ekot1/DelphiSVG.git but those versions are more efficient in performances, with many fixes added, plus some features like SVGText property, store icons in Text format into dfm, GrayScale and FixedColor, VirtualImageList support and more...

TSVGIconImageListFMX and TSVGIconImageFMX are similar to TIconFontsImageListFMX and TIconFontsImage included into similar project made by Ethea for Icon Fonts: https://github.com/EtheaDev/IconFontsImageList

Clone this wiki locally