SVG control package v2.4

In version 2.4 of the SVG control package the following functionality is added:

  • Support for SVG and CSS animation using SMIL
  • Converting “text” elements to “path” elements
  • Support for different XML vendor implementations

Support for SVG and CSS animation using SMIL

SVG can be added to SVG images by the “animate”, “set”, “animateMotion” and “animateTransform” elements. In CSS animation can be defined by “animate…” properties and the style rule “@keyframes”. SMIL is used to synchronize the animation of SVG animated elements and CSS animations.

Depending on the complexity of the SVG image, animating SVG may require a lot of computing power. Especially if pixelwise operations are included in the animation, for example clippaths, masks and filters. To reduce the load on the system and therefore enable a higher frame rate, some optimizations where added to version 2.4:

  • A caching system was added to the rendering system, so some values that where calculated in a previous frame can be used in the next.
  • SVG is a tree structure, in many animated SVG images, not all branches of the SVG image contain animations. So these branches are static an can be rendered to a bitmap buffer and don’t have to be rerendered every frame. This functionality is controlled by the rendering option [sroPersistentBuffers]
  • For VCL and Freepascal a new control, TSVG2WinControl, was added. This control does not support transparency and therefore the SVG image does not have to be blended with the background on every frame. In combination with render context “SVGDirect2d3D11”, this control will use a DirectX swap chain and can make more use of the GPU.

For controlling animations a new component, TSVG2AnimationTimer, was added to the package. This component starts/stops or paused/un-pauses animations and calculates framerates. One or more of the SVG controls can link to this component.

A more detailed description of the animation functionality can be found in the online help.

Below is a demonstration of some SVG animations that are animated with the SVG control package v2.4.

The following SVG images are used in the demo:

Converting “text” elements to “path” elements

For rendering text, fonts are needed and these have to be available on the system where the SVG is rendered. If this is not the case, the renderer will use a default font, which means that the SVG image is not exactly rendered as how it was intended.

One way around this, is to embed an SVG font in the SVG file.

Another way which is now available in v2.4, is to convert text to paths. The way to do this involves the following steps:

  • Render an SVG image with render option [sroTextToPath]
  • Make a copy of the SVG root object
  • Save the XML strings of SVG XML document of the copied SVG Root object

Details of this functionality can be found in the online help.

Support for different XML vendor implementations

In Delphi TXMLDocument is used as a wrapper for vendor specific DOM implementations. In version 2.4 of the package, TXMLDocument and TXMLNode are used as the base classes for the “rendering tree”. The DOM implementation on the other hand, represents the “document tree”.

So now different vendors can be used for parsing the document tree, if this is required. The SVG control package also has a DOM implementation available that is used by default, that has vendor name “SVG control DOM”.

TXMLNode can also represent attributes, however, because this makes parsing SVG very slow, this is suppressed. The package makes use of its own implementation of SVG attributes, also because these have special requirements for interpolation of values for animation.

Because of the large number of changes it was decided to create a new version of the package, but version 2.4 is available for all license holders of version 2.3 with no extra cost.

If you don’t have a license you can try out the demo packages, these are without the source code and only for Windows 32bit, but fully functional.

SVG control package v2.3 update 9

This update contains bug fixes and some functional changes to the SVG image list and the SVG controls.

Changes to the SVG image list

The rows in the grid can now be moved to change the order of SVG images.

The following bugs in the image list editor are fixed:

  • There was a problem that the images of any connected “Linked SVG image lists” where lost after making changes to the parent image list, and had to be manually recreated.
  • The “Scaled” property setting was lost after pressing “Cancel” on the SVG image list editor.

Changes to TSVG2Control and TSVG2Image

These controls are used to host a single SVG image.

The SVG image that is hosted can be specified by reference, in that case you would use the “Filename” property and you would supply the SVG files separately with your application. Or the SVG image can be loaded in the “SVG” (TStrings) property, in that case the SVG image is stored in the form file and will be part of the executable of your application.

The Delphi IDE sets a limit on the number of lines you can load in a TStrings property at design time. It this update a component editor is added to these controls, to allow loading of large SVG images.

The SVG data will be stored in the form file and in the executable. Another change is that this SVG data will now be compressed to save space.

Other bug fixes

  • To support mousepointer events, the SVG rendering engine can calculate the bounds of visual elements, paths, rectangles etc. When the parent form or control contains a transform on the canvas, these calculated bounds where not always correct, which resulted in mousepointer events not being fired.
  • When both GDI+ and Direct2D render contexts are enabled, the resulting application would not start on a Windows system that does not support DirectX. This would be Windows XP for example. This is fixed by adding “delayed” to the external procedures targeting DirectX.

Future updates

A new version of the package, v2.4 is in progress and will be available in a couple of weeks. This version of the package will add CSS animation and SMIL animation functionality among other things.

Because of the large number of changes needed to support animation, the package version will increase to allow a controlled transition from version 2.3 to version 2.4.

However, I would like to mention here that v2.4 will be available to all v2.3 license holders without extra costs, when this version comes available.

New functionality for SVG image list

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.


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.


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:

SVG Control Package Version 2.3

This is a complete rewrite of the package partly to remove some limitations in the previous version but also to make it ready for future improvements and extensions.

Among the changes are:

  • Support for FPC Lazarus
  • Added interfaces for more graphic libraries
  • Improved text rendering
  • Faster integrated parser
  • New licensing terms

Support for FPC Lazarus

The package will now also compile for FPC Lazarus, Windows, MacOS and Linux.

You need at least FPC 3.0.4 and Lazarus 1.8.4. Also needed is the ” rtl-generics” package.

For Delphi you need at least XE2.

Added interfaces for more graphic libraries

For Windows next to the Direct2D “WIC” render context there is also a render context based on the DirectX 11 “Device Context”. This last one supports hardware accelerated effects. You can use theses render contexts with Delphi and FPC Lazarus.

All the header files needed to render with DirectX are translated and included in the package.

For Mac OS there is a dedicated render context based on “Quartz”, can be used with Delphi FMX and FPC Lazarus.

There is now also a render context based on the “Graphics32” library

For FPC Lazarus there is a render context based on “BGRA bitmap“.

See the “Technical design” page for an overview of the available render contexts.

Or take a look at the “Rendering examples” how these render contexts compare.

Improved text rendering

Similar to the “Render context” interface, an interface is added to the package that gives access to font and text formatting libraries, called a “text layout”.

For Windows there is a text layout based on “DirectWrite” and legacy “GDI fonts” with “Uniscribe”. Again all header files needed are included in the package.

For MacOS there is a text layout based on “Core text”.

These text formatting libraries support complex text formatting, for example bi-directionality and ligatures.

There is also a text layout based on “Freetype” but this one has only limited text formatting capabilities but is available for every operating system.

The text layout is independent from the render context, so you can for example choose “Graphics32” render context and “DirectWrite” as a text layout.

See the “Technical design” page for an overview of the available text layouts or the “Rendering examples” for comparison.

Faster integrated parser

The parser is integrated, this means that you can set attributes by text, for example to change the “style” attribute for an element you can simply code it like so:

Node.Attributes['style'] := 'font-family: "times"; font-size: 24; fill: red;';

You can also add fragments to create child elements, for example:

procedure TForm1.SVG2Image1Click(Sender: TObject);
  Element: ISVGElement;
  Element := SVG2Image1.SVGRoot.Element['text'];
  if assigned(Element) then
    Element.AddFragment('<tspan fill="yellow">Button <tspan fill="red" font-weight="bold" text-decoration="underline">clicked!</tspan></tspan>');

The help file contains a number of examples how to create animations or interact with SVG graphics.

New licensing terms

The new license is based on a subscription. There is a one time fee to buy the source code and a yearly subscription fee for receiving fixes and updates.

If you have a v2.2 license you can upgrade to v2.3 for the amount of the subscription fee.

For details see the “Order page“.

Or check out the free demo package or the demo viewer apps here.

Drawing outlines around SVG elements

The SVG control package offers a number of controls to display SVG graphics. But if you want more control over how SVG graphics are rendered or if you want to post process graphics, you can also use the lower level classes, interfaces and functions of the package.

Two of these interfaces are




ISVGRenderContext is a high quality canvas, very much like the Delphi Firemonkey canvas, but it has the advantage that you can use it in Delphi VCL also. It always draws to a bitmap which you have to supply.

It has most of the drawing functions that the Firemonkey canvas has. Functions like DrawCircle, DrawRect, FillRect, FillPath, ApplyFill, ApplyStroke, MultiplyMatrix BeginScene, EndScene and so on.

You can use the render context (RC) for example to add drawings before or after you render an SVG graphic, or you could just use it for high quality drawings, also supporting transparency, something Delphi VCL does not excel in.

ISVGRoot is the root of the tree of SVG elements of the SVG graphic, equivalent to the Document Object Model (DOM)  in an internet browser. This is created after parsing the SVG xml text and allows you to manipulate elements and parameters before actually rendering the graphic. You can also use it to measure element dimensions.

I’ll give an example here how you can use both to render an SVG graphic an then to post process the graphic to draw some outlines around some of the elements in the SVG graphic.

We use the following simple SVG graphic and we will draw outlines around the text, star group an rotated ellipse.

This SVG graphic looks like this

Now for the code.

In a new Delphi VCL application, using one form with a standard TButton and TImage control, on the OnClick of the button we do the following:

  1. First we will create an SVGRoot object and parse the SVG text
  2. Then we will calculate the size of the entire SVG and set the bitmap size accordingly
  3. Then we will render the SVG to the bitmap
  4. Then we will draw rectangles around the three elements
  5. Last we assign the bitmap to the TImage control

Step 1, create SVGRoot object and parse the SVG text.

Step 2, calculate the size of the entire SVG and set the bitmap size accordingly

Next we want to know the dimensions of the SVG graphic. In this case it is not very difficult because the svg element has a with (480) and a height(320) defined. But for this example I’ll show how to calculate the size of an arbitrary SVG graphic.

The ISVGRoot interface has a method “CalcIntrinsicSize”  for calculating the outer dimensions of an SVG graphic.

This method is defined as follows:

So it needs a render context and the bounds of a parent object, this is the outer container. The function returns a rectangle with the dimensions of the SVG graphic.

Why does it need a render context? Because the SVG graphic may contain text and it needs a render context to have access to the font system.

The aParentBounds is used in cases where the SVG size is a percentage of it’s parent or container object.

So to use this we need to create a render context first. Since we don’t have to actually render the SVG yet, we can create a render context based on an arbitrary sized bitmap, so we take a bitmap of size 1 by 1.

Step 3, render the SVG to the bitmap

Now we are going to render the SVG to the bitmap using ISVGRoot and ISVGRenderContext.

So just as with drawing on a Firemonkey canvas, we need to enclose any drawing with BeginScene and EndScene commands. We could also modify the matrix of the render context to scale or rotate or translate the SVG graphic.

The global procedure “SVGRenderToRenderContext” is used to draw the SVG contained in “SVGRoot” to the render context “RC”.

This procedure is defined as follows:

The parameter “aRenderOptions” can have a combination of the following settings:

  • sroFilters: SVG filters will be rendered if these are defined in the SVG graphic
  • sroClippath: clippaths will be rendered if these are defined in the SVG graphic
  • sroEvents: mouse pointer events will be enabled for the SVG graphic, for this a Object state tree will be generated

Because filters, clippaths en events need extra, in some cases a lot of resources, they are made optional.

The last option “sroEvents” is interesting if we want to have measurements of individual elements in the SVG graphic. If we want to enable mouse pointer events, we need to know the dimensions of each visible element. The renderer will in that case create a so called “ObjectState” tree , while rendering the SVG graphic.

The “ObjectState” tree will contain a ScreenBBox (bounding box in screen dimensions) of every element visible on the screen. Note that sometimes an element can be drawn multiple times on the screen, if it is referenced by a “use” element. In that case it will be present more than once in the Object State tree.

So we will use the “ObjectState” tree to draw outlines around elements on the rendered SVG.

Step 4, draw rectangles around the three elements and step 5, assign bitmap to TImage control

This produces the following output on the VCL form.

Sources can be found on github. To compile the examples, you need the demo or the full version of the SVG control package.

SVG package v2.20 update 13 for Delphi Rio

In update 13 of the SVG control package, functionality is added to support DPI aware applications.

Scaling, without loss of quality, is of course one of the major benefits of SVG graphics, so they lend themselves well for this kind of application


Delphi VCL

The VCL controls in the SVG Package: TSVG2Control, TSVG2Image and TSVG2LinkedImage will now scale the containing SVG graphic if your application is DPI aware en the DPI settings change.

Here is a bit of technical background how scaling in TSVG2Control is implemented, this is more or less the same for TSVGImage and TSVGLinkedImage:

  • A “Scale” property is added to the control
  • The “ChangeScale” method from TControl is overridden and will set a new value for “Scale”
  • Following a change in size of the control, the embedded “render context” of the control is also resized (this was already the case in previous versions).
  • If the SVG renderer draws on the render context, the coordinates are multiplied by “Scale”
  • If the SVG renderer needs to find the element on a particular coordinate of the render context, the coordinates are divided by “Scale”


What about the SVG image list?

The TSVG2ImageList, TSVG2LinkedImageList and TSVG2Graphic are not derived from TControl but are just components. These have no parent control and will not scale automatically when DPI settings change (this is the same as with Delphi’s standard TImageList).

To respond to DPI changes, you could write a procedure that updates the size of the images in the SVG image list when this is required. This is something you would have to put into your application yourself, since I can’t implement it in the TSVG2ImageList component.

This procedure could look like this:

This procedure must be called, one time when the application starts…

… and every time the monitor dpi setting changes.

If you do this with a normal TImageList, the bitmaps will be stretched, witch degrades the quality of the image. The difference with the SVG image list is that a change in bitmap size will trigger a re-render of the image, which will keep the quality unchanged.

There is of course a performance penalty for the re-render, this will depend on the amount of images in the image list and the complexity of the svg graphics.

An alternative solution is to use multiple image lists with pre-rendered images and then switch between these image lists by updating the image list property of the linked controls.

I updated the VCL version of the SVG viewer demo application so it is DPI aware. So the images in the SVG image list and any SVG graphics that are loaded or added will be scaled according to the monitor settings.


Delphi FMX

The controls in FMX already support scaling, so no extra functionality is added to the FMX SVG controls to support DPI awareness.

The image list in FMX also supports scaling, it isn’t based on fixed sized bitmaps as in VCL but allows for different sized bitmaps, here also nothing had to be changed.

So on the control/component level, there seems to be nothing extra that has to be done.

The only thing we can do, is just check how the application behaves if we declare it DPI aware.

So I checked the “Per Monitor V2” setting in the manifest of the FMX viewer application and gave it a run.

What didn’t work:

  • Any controls that have the “ControlType” property on “Platform” won’t scale right, these I had to change to “Styled”
  • The application did not respond to change in monitor DPI settings while running.

What did work:

  • Starting the application, after changing the monitor scale settings, seems to work o.k.

(Image is from “blue-butterfly”)



  • The VCL components in the SVG control package will scale automatically in response to any scaling of there parent control
  • The VCL components, TSVG2ImageList, TSVG2LinkedImageList, TSVG2Graphic will not scale automatically, you have to deal with that in your application.
  • The FMX controls in the SVG control package already support scaling, but although you can declare an FMX application DPI aware, it seems that change in DPI settings while running is not yet supported.

Apart from these changes in update 13, a number of bugs are fixed and the performance for SVG mouse events is much improved, see the change log for a full list.


v2.20 update 11

Here are a couple of things that are new or improved in update 11. For a full list, see the change log.

Added “AspectRatioAlign” and “AspectRatioMeetOrSlice” to SVG controls

It was already possible to automatically add a viebox to SVG graphics that don’t have one defined with the property “AutoViewbox”.

I have now added the properties “AspectRatioAlign” and “AspectRatioMeetOrSlice”. These properties give you further control how the SVG graphic is aligned within the control bounds.

Below you see the effect of setting the “AutoViewbox” property.

If “AutoViewbox” = FALSE, the SVG graphic will be rendered exactly as defined in the SVG graphic itself, if it is bigger than the SVG control, it will be clipped.

If “AutoViewbox” = TRUE, the SVG graphic will be aligned within the control according to the “AspectRatioAlign’ and “AsectRatioMeetOrSlice” settings, the default setting is “xMid yMid Meet”.


Here you see different settings for “AspectRatioAlign” and “AspectRatioMeetOrSlice”, these are equivalent to the settings of the SVG “preserveAspectRatio” attribute.


Improved rendering quality for rotated SVG graphics

On FMX you can rotate and scale controls. The SVG renderer in update 11 contains a new algorithm for calculating internal bitmap buffers, for things like filters and masks. This gives much better results for transformed controls.

Below you see de difference between the graphic rendered with update 10 left, and update 11 right.

This also works on VCL, although in Delphi, you don’t have properties on the VCL controls to scale or rotate, you might have SVG graphics that have a transformation defined on the outer SVG element.


Support for “fill-rule” and “clip-rule” attributes

These attributes give you control over how an path element is filled.

This attribute is not supported for all platforms, see table below.

SVG Render context VCL FMX
Direct2D Yes n.a.
GDI+ No n.a.
Aggpas Yes Yes
FMX canvas n.a. No

The standard SVG render context for VCL is “Direct2D”, for FMX the standard is “FMX canvas”. You can overrule the stanard render context in the SVG control package by setting compiler directives in the “” file.


Improved parsing speed for pathdata

For testing the parsing speed I use an SVG graphic with a very large amount of path elements: the Rose-Breasted-Groesbeck.svg. This SVG graphic has 36832 path elements.

Update 10 Update 11
Parsing time in ms 8703 5766


Version 2.2 of SVG control package released

The SVG control package offers a set of controls and tools to use Scalable Vector Graphics (SVG) in your Delphi projects.

It is a commercial package but there is also a demo package available and a number of demo applications.

There are many improvements made in rendering quality and speed, also new features are added:

The image shows examples of SVG filters. The SVG graphic was made with Inkscape using the filter templates “Enamel Jewelry”, “Pressed Steel” and “Rough and Dilate” on the upper image. This was then rendered with the SVG control package on a VCL form. The filters in the package are all hand coded.

Inkscape has many wonderful filter templates to experiment with. These will often need quite a lot of resources to render, because SVG filters operate on pixel level.

With SVG pointer events you can build interactivity in SVG graphics, these will then be available in your Delphi application. An example of this is the “About” form in de demo viewer application, which is just a TSVG2Image control, but with pointer events build in for the “W3C SVG” link and the “” link.

The VCL demo viewer is also upgraded. SVG content can be copied and pasted using the clipboard and selections of rendered images can be exported as png files.

Source code of the demo applications is also included in the package.

Save bitmap with transparency as .png in VCL

Here is an example how to save a bitmap containing an alpha channel as a .png image using Delphi VCL.

In Delphi VCL you can use the TPngImage component to work with .png images. The only problem is that if you assign a bitmap to a TPngImage using PngImage.Assign(Bitmap) the alpha channel is lost.

I found the following solution thanks to this discussion on a German forum. So in stead of assigning the bitmap to the TPngImage object, you create a new blank TPngImage with alpha channel enabled and draw the bitmap on the TPngImage canvas.

After that you copy the alpha channel of the bitmap to the TPngImage in a separate step.

So in this example I render an SVG image to a bitmap and save the bitmap as a .png image (thanks to Thomas Wassermann).

unit Unit1;


  Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants, System.Classes, Vcl.Graphics,
  Vcl.Controls, Vcl.Forms, Vcl.Dialogs, Vcl.StdCtrls;

  TForm1 = class(TForm)
    Button1: TButton;
    OpenDialog1: TOpenDialog;
    procedure Button1Click(Sender: TObject);
    { Private declarations }
    { Public declarations }

  Form1: TForm1;


{$R *.dfm}

// Source:,0.html

  TRGB = packed record B, G, R: byte end;
  TRGBA = packed record B, G, R, A: byte end;
  TRGBAArray = array[0..0] of TRGBA;

function PNG4TransparentBitMap(aBitmap:TBitmap): TPNGImage;
  X, Y: integer;
  BmpRGBA: ^TRGBAArray;
  PngRGB: ^TRGB;
  //201011 Thomas Wassermann

  Result := TPNGImage.CreateBlank(COLOR_RGBALPHA, 8, aBitmap.Width , aBitmap.Height);

  Result.Canvas.CopyMode:= cmSrcCopy;
  Result.Canvas.Draw(0, 0, aBitmap);

  for Y := 0 to Pred(aBitmap.Height) do
    BmpRGBA := aBitmap.ScanLine[Y];
    PngRGB:= Result.Scanline[Y];

    for X := 0 to Pred(aBitmap.width) do
      Result.AlphaScanline[Y][X] :=  BmpRGBA[X].A;
      if aBitmap.AlphaFormat in [afDefined, afPremultiplied] then
        if BmpRGBA[X].A <> 0 then
          PngRGB^.B := Round(BmpRGBA[X].B / BmpRGBA[X].A * 255);
          PngRGB^.R := Round(BmpRGBA[X].R / BmpRGBA[X].A * 255);
          PngRGB^.G := Round(BmpRGBA[X].G / BmpRGBA[X].A * 255);
        end else begin
          PngRGB^.B := Round(BmpRGBA[X].B * 255);
          PngRGB^.R := Round(BmpRGBA[X].R * 255);
          PngRGB^.G := Round(BmpRGBA[X].G * 255);

procedure TForm1.Button1Click(Sender: TObject);
  FileName: string;
  SVGParser: TSVGSaxParser;
  SVGRoot: ISVGRoot;
  Bitmap: TBitmap;
  Png : TPngImage;
  if OpenDialog1.Execute then
    FileName := OpenDialog1.FileName;

    // Create a root to store the SVG rendering tree

    SVGRoot := TSVGRootVCL.Create;

    // Create a SAX parser instance

    SVGParser := TSVGSaxParser.Create(nil);

      // Parse SVG document and build the rendering tree

      SVGParser.Parse('', FileName, SVGRoot);

      // Create a bitmap

      Bitmap := TBitmap.Create;
        Bitmap.PixelFormat := TPixelFormat.pf32bit;   // 32bit bitmap
        Bitmap.AlphaFormat := TAlphaFormat.afDefined; // Enable alpha channel

        Bitmap.SetSize(480, 320);            // Set desired size
        Bitmap.Canvas.Brush.Color := clNone; // Fill background with transparent
        Bitmap.Canvas.FillRect(Rect(0, 0, 480, 320));

        // Render the SVG onto the bitmap

          SVGRoot, // The root containing the rendering tree
          Bitmap   // The destination bitmap

        // Create the png component

        Png := PNG4TransparentBitMap(Bitmap);
          FileName := ChangeFileExt(FileName, '.png');







Random SVG star

Here is small application that morphs between star shapes.

The VCL project looks like this: The form color is set to “black” and it contains an TSVG2Image aligned “alClient” and a TTimer.

Also, the “DoubleBuffered” property of the form is set to “True”, otherwise we’ll end up with a lot of unwanted flicker.


Then the following code in the unit:

Sources can be found on github. To compile the examples, you need the demo or the full version of the SVG control package.