For a detailed description of the SVG Control Package functionality see the help file.
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.
|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. Take a look at the rendering examples for a comparison.
|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.
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:
For the Delphi FMX platform:
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.