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.
| Library | Supported OS | Quality | Limitations |
|---|---|---|---|
| Direct 2D | Windows | Very good | Almost none |
| GDI+ | Windows | Good | Radial gradients are not rendered correctly |
| Quartz | Mac OS | Good | Redial gradient spreadMethod not supported |
| Aggpas | Windows, Mac OS | Very good | Almost none |
| Graphics32 | Windows, Mac OS, Linux | Good | Almost none |
| BGRA bitmap | Windows, Mac OS, Linux | Good | Redial gradient spreadMethod not supported. Some problems with stroke dash and stroke width |
| FMX canvas | Windows, Mac OS, Linux, Android | This 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.
| Library | Platform | Operating system | Quality | Limitations |
|---|---|---|---|---|
| DirectWrite | Delphi VCL, FMX, FPC Lazarus | Windows | Very good | Almost none |
| GDI+ and Uniscribe | Delphi VCL, FMX | Windows | Good | Some problems with font selection |
| Core text | Delphi FMX, FPC Lazarus | Mac OS | Good | Some limitations with style selection |
| Freetype | Delphi VCL, FMX, FPC Lazarus | All operating systems | Font good, formatting reasonable | Text formatting is done with the basic text formatter provided by the package *. |
| FMX canvas | Delphi FMX | Windows, Mac OS, Android Linux | Depends 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 fonts | Delphi VCL, FMX, FPC Lazarus | Indepent of the OS | Font good, formatting reasonable | Text 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
- TSVG2AnimationTimer
- TSVG2Control
- TSVG2WinControl
- TSVG2Graphic
- TSVG2Image
- TSVG2ImageList
- TSVG2LinkedImageList
- TSVG2LinkedImage
For the Delphi FMX platform:
- TSVG2Doc
- TSVG2AnimationTimer
- TSVG2Control
- TSVG2Image
- TSVG2ImageList
- TSVG2LinkedImage
TSVG2Doc is derived from TXMLDocument and extends its functionality to better support of SVG XML files.
TSVG2AnimationTimer is a used to control animated SVG images that are hosted in the controls.
TSVG2Control is derived from TGraphicControl and renders an SVG graphic within the bounds of the control. It supports transparency. It is the same as TSVG2Image, apart from some default settings for some properties.
TSVG2Graphic is derived from TGraphic and can be used to register the SVG graphic format within the VCL framework.
TSVG2Image is derived from TGraphicControl and supports transparency. It has the same functionality as TSVG2Control except for some default settings for some properties.
TSVG2WinControl is a windowed control, it does not support transparency but is more efficient in rendering animated SVG images.
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.