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?

Components

Downloads

SVGMagic demo application SVGMagic demo source code SVGMagic Delphi/C++ Builder package

Install SVGMagic

To fully experience the library's capabilities, test it now. Follow the quick guide to install the SVGMagic library.

  1. Download the SVGMagic RAD Studio package
  2. Unzip the archive in your Embarcadero RAD Studio common directory: C:\Users\Public\Documents\Embarcadero\Studio\
  3. 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
    “21.0” = 10.4 Sydney
    “22.0” = 11.0 Alexandria

  4. Download the SVGMagic demo source code
  5. Unzip the demo project
  6. Open the demo in RAD Studio and build it

Common issues:

Compatibility

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, 10.4 Sydney, 11.0 Alexandria.

Buy SVGMagic

All licenses come with 2 years of free updates and support.

For other licensing options, please email us at hello@svgmagic.io.

Support

All purchases come with 2 years of free updates and support.

For all requests email us at hello@svgmagic.io.

Examples

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:

Delphi
pSVG := TWSVGGraphic.Create;
pSVG.LoadFromFile('MyFile.svg');
pSVG.Width  := ClientWidth;
pSVG.Height := ClientHeight;
Canvas.Draw(0, 0, pSVG);
C++
TWSVGGraphic* pSVG = new TWSVGGraphic();
pSVG->LoadFromFile(L"MyFile.svg");
pSVG->Width  = ClientWidth;
pSVG->Height = ClientHeight;
Canvas->Draw(0, 0, pSVG);

How to change the animation position in TImage?

Delphi
pSVG          := pImage.Picture.Graphic as TWSVGGraphic;
pSVG.Position := 0.5;  // in percent, between 0.0 and 1.0
C++
pSVG           = dynamic_cast<TWSVGGraphic*>(pImage->Picture->Graphic);
pSVG->Position = 0.5;  // in percent, between 0.0 and 1.0

How to change the animation position of TWSVGImage?

Delphi
pImage.Animation.Position := 50; // in percent, between 0 and 100
C++
pImage->Animation->Position = 50; // in percent, between 0 and 100

Releases

If you bought the single developer license, email us at hello@svgmagic.io to get your update.

SVG Magic - 1.009a Sep 23, 2021

added: SVGMagic package for Embarcadero 11.0 Alexandria (new release)

SVG Magic - 1.009 Mar 10, 2021

added: Several new recognized color key codes from https://www.w3.org/TR/SVG11/types.html#ColorKeywords added: Demo application x64 version changed: Default text font size to match the standards, which is defined to medium (i.e ~16px) improved: Images which contain a big amount of references may be loaded and drawn quicker fixed: Trying to load an image with a big amount of references may raise an out of memory exception fixed: Svg containing utf8 chars in their text may be broken after be saved fixed: Colored animations doesn't work unless animateColor tag is used instead of the animate one fixed: Colored animations based on values and key frames were not supported fixed: Colored animation did not work if fill or stroke value was missing, even if animated values were defined fixed: Embedded jpeg images were detected as svg, and thus couldn't be opened fixed: Memory leaks in rasterizer fixed: Documentation issues

SVG Magic - 1.008a Nov 11, 2020

updated: SVGMagic package for Embarcadero 10.2 Tokyo (maintenance update)

SVG Magic - 1.008 Jun 30, 2020

added: Embarcadero RAD Studio 10.4 Sydney support added: SVG symbol elements are now supported added: SVG embedded images are now supported, also supports embedded SVG added: enumerators can now be animated using key frames added: animation discrete mode is now supported added: LoadFromStr() function in TWSVGGraphic to allow SVG files to be loaded from a text fixed: several matrices based animations did not work properly, and may raise exceptions fixed: some properties could be lost from the source of an use element fixed: an incorrect pointer assignation could cause access violation during draw process fixed: documentation issues

SVG Magic - 1.007 Mar 27, 2020

fixed: clip path didn't work, now they are supported as expected added: missing .bpi files in package

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

Frequently Asked Questions

General considerations

Is SVGMagic compatible with FireMonkey?

No. SVGMagic only targets the VCL.

Is SVGMagic available for compiler versions earlier than XE2?

No. However the whole library source code is provided with the purchase of a Small Team license ($299), and compile it with an earlier compiler may be tried. But be aware that we no guarantee that this will be succesfully possible, and the following points should be considered before taking a such decision :

  • Generic types are used, and the System.Generics.Collections unit is included in at least 19 files.
  • Anonymous functions are used, at least one time for a smart pointer class, which is declared this way:
    IWSmartPointer<T> = reference to function: T; 
  • The RTTI is also used, as well as generic containers (e.g. TList<T> or TObjectList<T>) and we wrote several classes independent of data type, e.g. a class to provide generic numbers, which uses instructions like:
    
    TWGenericNumber<T> = record
    ...
    class operator TWGenericNumber<T>.Add(a, b: TWGenericNumber<T>):
    TWGenericNumber<T>;
    var
    left, right, resVal: TValue;
    begin
    ...
    left := TValue.From<T>(a.Value);
    right := TValue.From<T>(b.Value);
    ...
    case (left.Kind) of
    tkInteger,
    tkInt64:
    ...
    resVal := left.AsInt64 + right.AsInt64;
    ...
    tkFloat:
    ...
    resVal := left.AsExtended + right.AsExtended;
    ...
    ...
    end;
    ...
    Result.Value := resVal.AsType<T>;
    end;
                    
Is it possible to convert another format like a Bitmap, a Png, ... to a SVG image using SVGMagic ?

No. However it is possible to convert a SVG in any other format supported by the VCL.

Installation issues

I installed SVGMagic but it doesn't work. I get the following error message :
SVGMagic installation error

The most likely causes for this issue are:

  • You unpacked the SVG Magic package inside an incorrect folder, like e.g. the C:\Users\Public\Documents\Embarcadero\Studio\[Installed version]\ folder instead of the C:\Users\Public\Documents\Embarcadero\Studio\ one.
  • You have changed the BDSCOMMONDIR path in your environment variables to point to another folder. To solve it, please apply the following procedure:
    1. Open your IDE, and under Component->Install packages... select your installed package, then click on Remove.
    2. Close your IDE and delete all the files you previously installed from your SVGMagic package.
    3. Open the folder matching with your BDSCOMMONDIR environment variable, by default it's the
      C:\Users\Public\Documents\Embarcadero\Studio\ folder.
      NOTE If you're unsure about that path, you may open Tools->Options... in your IDE, then under Environment Options->Environment variables, check if the BDSCOMMONDIR has an override, and if yes on which path it's pointing to.
    4. Unpack the SVGMagic package in a temporary folder.
    5. Copy the content of the folder matching with your installed RAD Studio version number from the temporary dir in which you just unpacked the zip file to the folder pointed by your BDSCOMMONDIR.
      NOTE If you're in the right folder, you should see at least the following sub-folders: Bpl, Dcp and Hpp.
    6. While copying the files, you may receive messages asking if you accept to merge folders, accept them (click yes).
    7. Follow again the point nb 2 in the Readme.txt file. This should resolve your issue.

Compilation issues

A “Xml.VerySimple.pas” file is missing and prevents me to compile the library. Where can I find it?

The VerySimpleXml library is a third party library required to compile the SVGMagic source code. It is linked as a submodule to the main repository. For that reason you need to initialize and/or update your local copy using one or several of the following Git commands:


# initialize the submodules to get from the repository in the local copy
git submodule init

# get a working copy of the submodules in the local dir, and/or update them
# NOTE must be executed after a submodule init
git submodule update

# initialize and update the submodules in the local dir (same as the 2 commands above)
# NOTE if the recursive option is added, all the children submodules will also be included
git submodule update --init (--recursive)

# pull all changes in the repo including changes in the submodules
git pull --recurse-submodules

# pull all changes for the submodules
git submodule update –remote
        

Why I get a "F1026 File not found UTWSVGGraphic.dcu" error (or any error saying that a .dcu file is missing) when I try to compile my first project using SVGMagic? Why this error didn't happen when I tested the demo projects?

This error happens because the compiler needs to know the path where the compiled .dcu files belonging to the SVGMagic library are located. It's why you have to define them in order to compile your project.

The reason why the demo projects can be compiled and are working directly is because this path was already defined and is pointing to the path where the library is installed by default, as you can see if you open the project properties, under Delphi Compiler -> Search Path.

NOTE the Target field must be set to All configurations - 32-bit Windows platform or All configurations - 64-bit Windows platform in order to show the path.

Common issues and questions

I get a DFM error when I open a project.
SVGMagic error reading property ColorDepth does not exist

This error may happen when the project is updated from a previous RAD Studio version to a newer. It may be ignored, and should no longer appear after the project is saved.

My animations are flickering. What's happening?

Such issues may come from the component used in the background. The most classic case is e.g. if a TPanel is set as a background for the animated image, and its ParentBackground property is configured to True, while its DoubleBuffered property is set to False. Inverting these properties should remove the flickering. This issue may also happen if the image is put directly above a tab control. In this case, introducing a TPanel between the tab control and the image may resolve it.

How may the content of a SVG image be modified dynamically, e.g. changing the background color of a particular item in runtime?

SVGMagic doesn't provide such functionality. However the SVG content is accessible at any time and may be modified dynamically before being read by the graphic component. You just need to write the code modifying the content.

Can a SVG be read partially?

No. However, as mentioned previously, the SVG content is accessible at any time, and you may write the code required to select and extract the part of the SVG you want to draw.

Is it possible to create a TBitmap directly from a TWSVGGraphic?

Yes. Below is a sample code showing how to do that:


pBitmap := TBitmap.Create;
pBitmap.SetSize(pSvgGraphic.Width, pSvgGraphic.Height);
pBitmap.Canvas.Draw(0, 0, pSvgGraphic);
pBitmap.SaveToFile('MyImage.bmp');
pBitmap.Free;
        
Is it possible to create a PNG image (TPngImage) from a TWSVGGraphic?

Yes. You may use e.g. the following function:


function SvgToPng(pSvgGraphic: TWSvgGraphic): TPngImage;
const
    colorKey = $010101;
var
    pBitmap: TBitmap;
    rect:    TRect;
begin
    if (not Assigned(pSvgGraphic)) then
        Exit(nil);

    // create a RGBA bitmap compatible with SVG to convert
    pBitmap                  := TBitmap.Create;
    pBitmap.PixelFormat      := pf32bit;
    pBitmap.AlphaFormat      := afDefined;
    pBitmap.Transparent      := True;
    pBitmap.TransparentColor := colorKey;
    pBitmap.SetSize(pSvgGraphic.Width, pSvgGraphic.Height);

    // create a rect matching the svg size
    rect.Left   := 0;
    rect.Top    := 0;
    rect.Right  := pSvgGraphic.Width;
    rect.Bottom := pSvgGraphic.Height;

    // clear bitmap canvas
    pBitmap.Canvas.Brush.Color := colorKey;
    pBitmap.Canvas.Brush.Style := bsSolid;
    pBitmap.Canvas.FillRect(rect);

    // convert svg to transparent RGBA bitmap
    pBitmap.Canvas.Draw(0, 0, pSvgGraphic);

    // now convert bitmap to png
    Result := TPngImage.Create;
    Result.Assign(pBitmap);

    pBitmap.Free;
end;
        

You can then use it in the following manner:


pSvgImage := TWSvgGraphic.Create;
pSvgImage.LoadFromFile('C:\Projects\Images\Tiger.svg');

pPngImage := SvgToPng(pSvgImage);

if (Assigned(pPngImage)) then
    pPngImage.SaveToFile('C:\Projects\Images\Tiger.png');

pSvgImage.Free;
pPngImage.Free;
        

NOTE the above function supports the transparency, and the color key may be adapted depending on the SVG images you need to convert. But normally the default color key should work with the majority of SVG images to convert.

The SVG files seem to have an inherent size! But shouldn't SVGs be scalable by definition? So how can the resulting Bitmaps be scaled to a uniform (proportional) size without quality loss?

The SVG files are resizable without loss of quality. The inherent size provided by the graphic is the one defined in the file itself (e.g. by the width and height properties, and/or viewBox property). But contrary to the other graphic formats, the width and height of a TWSVGGraphic component may be changed after the image was loaded, without clearing its content. For that reason the code below is valid:


pGraphic := TWSVGGraphic.Create;
pGraphic.LoadFromFile('W:\SVGParser\trunk\Demo\cursor-selected.svg');
pGraphic.SetSize(512, 512);
        
NOTE the TWSVGImageList behaves the same way, and their size may be changed dynamically without losing their content, for the same reasons. A more standard solution may also be preferred, e.g. if a generic source code compatible with all graphic formats should be created, by using the StretchDraw() function instead of Draw(). Below is an example:

pGraphic := TWSVGGraphic.Create;
pGraphic.LoadFromFile('C:\cursor-selected.svg');
rect := TRect.Create(0, 0, 512, 512);
pBitmap := TBitmap.Create;
pBitmap.SetSize(rect.Width, rect.Height);
pBitmap.Canvas.StretchDraw(rect, pGraphic);
pBitmap.SaveToFile('c:\cursor-selected.bmp');
pBitmap.Free;
pGraphic.Free;
        
In case proportional thumbnails are required, the code may be modified as follows:

...
pGraphic.LoadFromFile('C:\cursor-selected.svg');
W := pGraphic.Width;
H := pGraphic.Height;
pGraphic.SetSize((W * 512) div H, 512);
pBitmap.SetSize(pGraphic.Width, pGraphic.Height);
pBitmap.Canvas.Draw(0, 0, pGraphic);
...
        

About SMIL animations and third-party SVG creators

Can SVGMagic read CSS animations?

No. Only the SMIL based animations which are part of the SVG standards, are supported. All the other script languages are not supported by SVGMagic.

Does SVGMagic support the animated SVG exported by third-party creation tools?

It depends on the exporter. If the SMIL based animations are supported by the exporter, SVGMagic will be able to draw and animate the resulting SVG. On the other hand, if the SVG contains CSS, or any other script language, after the export, it will not be the case.

What is the SMIL standard on which SVG animations are based?

SMIL is a standard describing how a media may change its properties over time. More information may be found here:
https://www.w3.org/TR/SVG11/animate.html.

And here are typical SMIL-based animated SVG, well supported by SVGMagic :
https://github.com/SamHerbert/SVG-Loaders/tree/master/svg-loaders.

Known limitations

What are the known SVGMagic library limitations?
  • The SVGMagic library isn't compatible with FireMonkey, and there is no plan actually to make it compatible.
  • The CSS instructions aren't supported, only SVG instructions following the SVG1.1 (SMIL) standards are supported.
  • The SVGMagic library isn't compatible with Embarcadero versions prior to XE2.
  • Some SVG patterns instructions may not work.
  • Effects (e.g blur) are not supported for now.
  • Several very complex animations (e.g which use paths) may not work.
  • The font weights are not supported for now, due to a GDI/GDI+ limitation.

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.