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.