Technical design

Process flow

The following figure shows how in this implementation, a raster image is produced from an SVG document:


The SVG document can be a file, a stream, a string or a TSVG2Doc object.

The TSVG2Parser converts the SVG document to a tree of rendering objects. The root of the rendering tree is ISVGRoot.

The interface ISVGRenderContext is an interface to a rendering implementation (TCanvas, Direct2D, GDI+, Aggpas), this object can convert the rendering tree to a raster image, this will be a bitmap image.

Parsing stage

There are basically two types of parsers for parsing XML content: the DOM parser and the SAX parser. The SAX parser is usually faster than the DOM parser because it doesn’t have to produce  a “DOM tree”. This implementation uses a SAX parser for parsing SVG content.

Rendering stage

The rendering stage consists of rasterizing paths and other shapes into scanlines and creating raster images and also to perform other graphics operations as masking, clipping blending and so on. For this an interface is needed to the graphics libraries provided by the operating system, or to a custom made graphics library. In the SVG package this interface is ISVGRenderContext.

There are a number of different rendercontext implementations available in the package. The rendercontext you can use depend on the operating system. Also the quality of the rendered image depends for a large part on the underlying graphics library.

Delphi frameworkSupported OSGraphics libraryQualityRendering speed
VCLWindowsDirect2DVery goodVery good
VCLWindows XP and newer GDI+Good, except the gradientsVery good
VCLWindowsAggpas, FreetypeVery good, a bit slower than Direct2DGood
FMXWindows, OSX, Android, iOSDirect2D or GDI+ or Quartz or OpenGLESThis is a rendercontext based on Delphi's FMX canvas implementations:

* Windows good, gradients and stroking not fully supported
* OSX good, gradients and stroking not fully supported
* Android not very good
* iOS also not good
* Windows reasonable
* OSX good
* Android and iOS slow
FMXWindows, OSXAggpas, FreetypeVery goodGood

The package will automatically select a rendercontext, but you can force a specific rendercontext by setting compiler directives. The default rendercontext for VCL will be Direct2D and for FMX the FMX canvas.

 

Code for rendering SVG

The following Delphi VCL example shows how you can render an SVG graphic to a bitmap:

 

SVG Controls

The package contains the following controls:

 

For the VCL framework:

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

 

For the FMX framework:

  • TSVG2Doc
  • TSVG2Control
  • TSVG2Image
  • TSVG2ImageList
  • TSVG2LinkedImage

 

TSVG2Doc is basically a TXMLDocument but with settings that suppress some errors when loading SVG content. It can also be used in cases when a DOM tree is needed, since the SAX parser will not produce one. TSVG2Doc can be linked to a TSVG2Control.

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, you can download the help file from the download page.