SVG support for Delphi and C++ builder VCL
SVGMagic adds support for SVG and animated SVG graphics files to Embarcadero® RAD
Studio Delphi® and C++ builder® Visual Component Library (VCL).
Why use SVGMagic?
- Integrates with native IDE components
Once installed, any SVG image can be displayed using the native IDE components just as with the bitmap-based formats (.bmp, png,
.jpg,…). All components using TGraphic support SVGs, among which: TImage, TPicture, TCanvas.
- Superior image quality
Always get the best image quality whatever the dimensions / resolution.
You don’t need to edit the image if it needs to be resized.
- High DPI aware
When an SVG is used to display an image, its quality does not change, even
when the image is stretched. This feature offers a certain advantage when the application has to support the
high dpi, because the resizing of the images naturally accompanies the interface.
SVGs fully support transparency. No more anti-aliasing issues experienced with bitmap based images.
The SVG standard natively supports complex animations and SVGMagic fully supports them.
- Smaller size
SVGs are incredibly smaller than bitmap based images, even when compressed.
Furthermore SVGs also support compression.
- Widely available
SVGs are widely used for internet graphics, and several well known and powerful creation tools are available,
like Inkscape or Adobe® Illustrator.
In addition, you don’t need to create SVGs yourself as there are plenty of vector image libraries available online
such as SVG Repo, Flaticon and many others.
SVGs can easily be expanded to other components such as buttons, checkboxes, radiobuttons, popupmenus and many more.
- Proven track record
SVGMagic is used on a daily base in commercial software like CopyTrans.
The SVG standard allows to obtain spectacular effects including animations, then to change them completely without modifying one line of code.
- TWSVGGraphic component adds native TPicture, TImage, TCanvas SVG support
- TWSVGImageList DPI aware SVG image list
- TWSVGCheckBoxStyle to style any check box
- TWSVGRadioButtonStyle to style any radio button
To fully experience the library's capabilities, test it now. Follow the quick guide to install the SVGMagic library.
- Download the SVGMagic RAD Studio package
- Unzip the archive in your Embarcadero RAD Studio common directory:
Open your Embarcadero RAD Studio IDE, then from menu “Component” -> “Install Packages”, click “Add…”
button, and browse to c:\Users\Public\Documents\Embarcadero\Studio\[Product Version]\Bpl\WSVGD.bpl file, then
confirm twice with “OK”.
[Product Version] for your IDE version is:
“9.0” = XE2
“15.0” = XE7
“16.0” = XE8
“17.0” = 10.0 Seattle
“18.0” = 10.1 Berlin
“19.0” = 10.2 Tokyo
“20.0” = 10.3 Rio
- Download the SVGMagic demo source code
- Unzip the demo project
- Open the demo in RAD Studio and build it
- In C++ Builder project, you may need to include #pragma comment(lib, “usp10”) in your main form .cpp
- In case of flickering, verify that DoubleBuffered property is set to true on the component
SVGMagic works on Windows 10, 8, 7 and is available for RAD Studio XE2, XE3,
XE4, XE5, XE6, XE7, XE8, 10 Seattle, 10.1 Berlin, 10.2 Tokyo, 10.3 Rio.
Single developer (no source code) US$ 99 -
Small team up to 8 developers (includes source code repository access) US$ 299 -
All licenses come with 2 years of free updates and support.
For other licensing options, please email us at email@example.com.
All purchases come with 2 years of free updates and support.
For all requests email us at firstname.lastname@example.org.
There are two ways to use the SVG graphic component. You can either use it natively, through the VCL TImage
component. In this case, simply put a TImage on your form, then open the Picture property to load a file, and select
the SVG file to open as any other image.
Or you can use it in your code exactly the same way as any TGraphic descendents, like a TPngImage or a TJpgImage. For
example, here is a sample code that illustrates how to paint a SVG onto a canvas:
pSVG := TWSVGGraphic.Create;
pSVG.Width := ClientWidth;
pSVG.Height := ClientHeight;
Canvas.Draw(0, 0, pSVG);
TWSVGGraphic* pSVG = new TWSVGGraphic();
pSVG->Width = ClientWidth;
pSVG->Height = ClientHeight;
Canvas->Draw(0, 0, pSVG);
How to manually change the SVG animation position of the SVG loaded in TImage?
pSVG := pPicture.Graphic as TWSVGGraphic;
pSVG.AnimationPosition := 0.5; // in percent, between 0.0 and 1.0
pSVG = dynamic_cast<TWSVGGraphic*>(pPicture.Graphic);
pSVG->AnimationPosition = 0.5; // in percent, between 0.0 and 1.0
How to manually change the animation position of the TWSVGImage?
pImage.Animation.Position := 50; // in percent, between 0 and 100
pImage->Animation->Position = 50; // in percent, between 0 and 100
SVG Magic - 1.006 Jan 14, 2020
fixed: animation of different types were not supported if defined in the same group
fixed: matrix animation was never applied to groups, switches and actions
fixed: array of values was not supported in animated transform matrices
fixed: a rounding error could cause jerks in several animations
fixed: a possible buffer overflow, which could happen in rare occurrences
fixed: several SVG files could no longer be loaded with 10.3.3 Rio (perhaps also with 10.3.2 Rio)
SVG Magic - 1.005 Sep 21, 2019
improved: unified all the animation properties to share the same engine
fixed: an issue in checkbox and radio button styles could cause the target content to be drawn incorrectly on high dpi
fixed: the animation could run too quickly in TWSVGGraphic because the interpolation was applied twice
fixed: in XE2, the component icons didn't appear on the designer
fixed: in XE2, a stream corruption could break several images, which appeared with a fuchsia halo around them
SVG Magic - 1.004 Jun 29, 2019
improved: high dpi support
fixed: issue with graphical cache, which prevented several brushes to be cached correctly
fixed: several SVG images could be lost in design time the first time the project was reopened (since XE8)
SVG Magic - 1.003 Mar 25, 2019
fixed: library raised an exception while opening SVG files if decimal separator was not configured to "." in computer locale
fixed: high DPI issues with component styles
fixed: trial library could not be tested in 64 bit due to a memory error
fixed: c++ demo project could not be compiled under 64 bit
fixed: several configuration issues in 10.2.3 Tokyo and 10.3 Rio demo projects
added: RAD Studio XE2, XE8, 10.0 Seattle and 10.1 Berlin support
SVG Magic - 1.002 Feb 27, 2019
fixed: incorrect BkColor default value in TWSVGImageList
fixed: users no longer have to link the Uniscribe library (usp10.dll) explicitly
added: new property (DPIScale) to allow image list content to be auto-scaled on DPI changes
added: drag&drop support in TWSVGImageList design time editor
changed: now TWSCGImageList design time editor is shown as a grid instead of a list
SVG Magic - 1.001 Feb 13, 2019
added: library version number property is now exposed in components
fixed: now TWSVGImageList no longer clears its content when the size is changed
fixed: Delphi demos for 10.2 Tokyo and 10.3 Rio contained several graphical glitches and path to DCU was missing for 64 bit compilation
SVG Magic - 1.000 Feb 6, 2019
First public release
The story behind SVGMagic
SVGMagic was designed for our own project needs. With around 50’000 line of Delphi code, and after
more than 2 years of intensive work, SVGMagic significantly shortens our development time and
allows our applications to provide a cleaner user experience. It’s the reason why applications like the CopyTrans
are using it.
What is SVG?
According to Wikipedia:
Scalable Vector Graphics (SVG) is an
XML-based vector image format for two-dimensional graphics with support for interactivity and animation. The SVG
specification is an open standard developed by the World Wide Web Consortium (W3C) since 1999.
SVG is a graphic standard based on vectorial rendering, that allows to draw images without loss of
quality, regardless of the size and resolution, and with considerably smaller
image file size. The format is widely used for graphics on the internet and all recent browsers support it.
In addition SVGs natively support animations.