Technical design and online help

The online help can be found here.

Process flow

SVG graphics are stored in xml files.

Rendering SVG graphics involves parsing the xml files, building a in memory data structure called DOM, then applying the SVG rendering rules translating in lower level drawing instructions.

The drawing instructions are then passed to a render context that creates a bitmap. This process is called rasterization.

The bitmap in turn can be compressed to create a png or jpg image.

The following figure shows how this is done in the package.

The package uses external graphics rendering libraries for the rasterization stage. Several interfaces to well known libraries are provided from which you can choose. In the SVG control package you select a particular library by setting a global define in one of the include files.

The advantage for using external graphic libraries it is easier to create a multi platform solution and it is easier to integrate SVG functionality in projects that are already based on any of these libraries.

The external graphic libraries each have strengths and weaknesses in regard to the SVG rendering requirements. This is most obvious in the rendering of the radial gradient. The limitations of each render context are listed in the help file. Also you can take a look at the rendering examples for comparison.

LibrarySupported OSQualityLimitations
Direct 2DWindowsVery goodAlmost none
GDI+WindowsGoodRadial gradients are not rendered correctly
QuartzMac OSGoodRedial gradient spreadMethod not supported
AggpasWindows, Mac OSVery goodAlmost none
Graphics32Windows, Mac OS, LinuxGoodAlmost none
BGRA bitmapWindows, Mac OS, LinuxGoodRedial gradient spreadMethod not supported. Some problems with stroke dash and stroke width
FMX canvasWindows, Mac OS, Linux, AndroidThis is a rendercontext based on Delphi's FMX canvas. Quality depends very much on the OS * Windows good, gradients and stroking not fully supported
* OSX good, gradients and stroking not fully supported
* Android not very good
* iOS also not good

As with render contexts, the package also provides different options for rendering text.

Text rendering for SVG involves several stages: loading and selecting fonts, formatting text, this includes selecting glyphs, BIDI reordering and other language specific formatting then applying SVG styling and glyph placement.

The figure below shows how text is rendered in the package:

Depending on the operating system, there are several text layout implementations from which you can choose. This is also done by setting a global define in the include file.

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

The table below shows the different implementations for the text layout. Again each has its strengths and weaknesses. Take a look at the rendering examples for a comparison.

LibraryPlatformOperating systemQualityLimitations
DirectWriteDelphi VCL, FMX, FPC LazarusWindowsVery goodAlmost none
GDI+ and UniscribeDelphi VCL, FMXWindowsGoodSome problems with font selection
Core textDelphi FMX, FPC LazarusMac OSGoodSome limitations with style selection
FreetypeDelphi VCL, FMX, FPC LazarusAll operating systemsFont good, formatting reasonableText formatting is done with the basic text formatter provided by the package *.
FMX canvasDelphi FMXWindows, Mac OS, Android LinuxDepends on the OS. On Mac OS, Android the glyph layout is not very precise.Text formatting is done with the basic text formatter provided by the package *.
SVG fontsDelphi VCL, FMX, FPC LazarusIndepent of the OSFont good, formatting reasonableText formatting is done with the basic text formatter provided by the package *.

The basic formatter provided by the package has some BIDI capabilities but lacks many language specific formatting functionality, that is needed for Arabic for example.

SVG Controls

The help file contains a number of examples how to render SVG programmatically and create interactivity or animations. But for most applications it is easier to just use the controls. These encapsulate most of the functionality and hide the complexities.

The package provides the following components and controls:

For the Delphi VCL platform and FPC Lazarus:

  • TSVG2Doc
  • TSVG2Control
  • TSVG2Graphic
  • TSVG2Image
  • TSVG2ImageList
  • TSVG2LinkedImageList
  • TSVG2LinkedImage

For the Delphi FMX platform:

  • TSVG2Doc
  • TSVG2Control
  • TSVG2Image
  • TSVG2ImageList
  • TSVG2LinkedImage

TSVG2Doc is basically a TXMLDocument but with settings that suppress some errors when loading SVG content.

TSVG2Control renders an SVG graphic within the bounds of the control. It differs from TSVG2Image that it can clip the image to prevent the internal bitmap buffers from overflowing memory.

TSVG2Graphic is derived from TGraphic and can be used to register the SVG graphic format within the VCL framework.

TSVG2Image renders an SVG graphic within the bounds of the control.

TSVG2ImageList holds a list of SVG graphics and bitmaps. The SVG graphics are automatically rendered to the corresponding bitmap. Delphi components that can be linked to an TImageList can also be linked to a TSVG2ImageList.

TSVG2LinkedImageList links to a parent TSVG2ImageList. This component can be used when you need a set of bitmap images with different dimensions than those in the parent TSVG2ImageList

TSVG2LinkedImage is a TSVG2Image control that can be linked to a TSVG2ImageList.

For more detailed information about the controls and the package, see the help file.