SVGMagic adds support for SVG and animated SVG graphics files to Embarcadero® RAD Studio Delphi® and C++ builder® Visual Component Library (VCL).
Once installed, any SVG image can be displayed using the native IDE components just as with the bitmap-based formats (.bmp, png,
.jpg,…). All components using TGraphic support SVGs, among which: TImage, TPicture, TCanvas.
When an SVG is used to display an image, its quality does not change, even when the image is stretched. This feature offers a certain advantage when the application has to support the high dpi, because the resizing of the images naturally accompanies the interface.
SVGs fully support transparency. No more anti-aliasing issues experienced with bitmap based images.
SVGs are incredibly smaller than bitmap based images, even when compressed. Furthermore SVGs also support compression.
SVGs are widely used for internet graphics, and several well known and powerful creation tools are available, like Inkscape or Adobe® Illustrator. In addition, you don’t need to create SVGs yourself as there are plenty of vector image libraries available online such as SVG Repo, Flaticon and many others.
SVGs can easily be expanded to other components such as buttons, checkboxes, radiobuttons, popupmenus and many more.
SVGMagic is used on a daily base in commercial software like CopyTrans.
The SVG standard allows to obtain spectacular effects including animations, then to change them completely without modifying one line of code.
Please find the whole library source code from the Github repository.
Follow the quick guide to install the SVGMagic library.
Open your Embarcadero RAD Studio IDE, then from menu “Component” -> “Install Packages”, click “Add…” button, and browse to c:\Users\Public\Documents\Embarcadero\Studio\[Product Version]\Bpl\WSVGD.bpl file, then confirm twice with “OK”.
[Product Version] for your IDE version is:
“9.0” = XE2
“15.0” = XE7
“16.0” = XE8
“17.0” = 10.0 Seattle
“18.0” = 10.1 Berlin
“19.0” = 10.2 Tokyo
“20.0” = 10.3 Rio
“21.0” = 10.4 Sydney
“22.0” = 11.0 Alexandria
Common issues:
SVGMagic works on Windows 10, 8, 7 and is available for RAD Studio XE2, XE3, XE4, XE5, XE6, XE7, XE8, 10 Seattle, 10.1 Berlin, 10.2 Tokyo, 10.3 Rio, 10.4 Sydney, 11.0 Alexandria.
For all requests email us at hello@svgmagic.io.
There are two ways to use the SVG graphic component. You can either use it natively, through the VCL TImage component. In this case, simply put a TImage on your form, then open the Picture property to load a file, and select the SVG file to open as any other image.
Or you can use it in your code exactly the same way as any TGraphic descendents, like a TPngImage or a TJpgImage. For example, here is a sample code that illustrates how to paint a SVG onto a canvas:
pSVG := TWSVGGraphic.Create;
pSVG.LoadFromFile('MyFile.svg');
pSVG.Width := ClientWidth;
pSVG.Height := ClientHeight;
Canvas.Draw(0, 0, pSVG);TWSVGGraphic* pSVG = new TWSVGGraphic();
pSVG->LoadFromFile(L"MyFile.svg");
pSVG->Width = ClientWidth;
pSVG->Height = ClientHeight;
Canvas->Draw(0, 0, pSVG);pSVG := pImage.Picture.Graphic as TWSVGGraphic;
pSVG.Position := 0.5; // in percent, between 0.0 and 1.0pSVG = dynamic_cast<TWSVGGraphic*>(pImage->Picture->Graphic);
pSVG->Position = 0.5; // in percent, between 0.0 and 1.0pImage.Animation.Position := 50; // in percent, between 0 and 100pImage->Animation->Position = 50; // in percent, between 0 and 100If you bought the single developer license, email us at hello@svgmagic.io to get your update.
added: SVGMagic package for Embarcadero 11.0 Alexandria (new release)
added: Several new recognized color key codes from https://www.w3.org/TR/SVG11/types.html#ColorKeywords added: Demo application x64 version changed: Default text font size to match the standards, which is defined to medium (i.e ~16px) improved: Images which contain a big amount of references may be loaded and drawn quicker fixed: Trying to load an image with a big amount of references may raise an out of memory exception fixed: Svg containing utf8 chars in their text may be broken after be saved fixed: Colored animations doesn't work unless animateColor tag is used instead of the animate one fixed: Colored animations based on values and key frames were not supported fixed: Colored animation did not work if fill or stroke value was missing, even if animated values were defined fixed: Embedded jpeg images were detected as svg, and thus couldn't be opened fixed: Memory leaks in rasterizer fixed: Documentation issues
updated: SVGMagic package for Embarcadero 10.2 Tokyo (maintenance update)
added: Embarcadero RAD Studio 10.4 Sydney support added: SVG symbol elements are now supported added: SVG embedded images are now supported, also supports embedded SVG added: enumerators can now be animated using key frames added: animation discrete mode is now supported added: LoadFromStr() function in TWSVGGraphic to allow SVG files to be loaded from a text fixed: several matrices based animations did not work properly, and may raise exceptions fixed: some properties could be lost from the source of an use element fixed: an incorrect pointer assignation could cause access violation during draw process fixed: documentation issues
fixed: clip path didn't work, now they are supported as expected added: missing .bpi files in package
fixed: animation of different types were not supported if defined in the same group fixed: matrix animation was never applied to groups, switches and actions fixed: array of values was not supported in animated transform matrices fixed: a rounding error could cause jerks in several animations fixed: a possible buffer overflow, which could happen in rare occurrences fixed: several SVG files could no longer be loaded with 10.3.3 Rio (perhaps also with 10.3.2 Rio)
improved: unified all the animation properties to share the same engine fixed: an issue in checkbox and radio button styles could cause the target content to be drawn incorrectly on high dpi fixed: the animation could run too quickly in TWSVGGraphic because the interpolation was applied twice fixed: in XE2, the component icons didn't appear on the designer fixed: in XE2, a stream corruption could break several images, which appeared with a fuchsia halo around them
improved: high dpi support fixed: issue with graphical cache, which prevented several brushes to be cached correctly fixed: several SVG images could be lost in design time the first time the project was reopened (since XE8)
fixed: library raised an exception while opening SVG files if decimal separator was not configured to "." in computer locale fixed: high DPI issues with component styles fixed: trial library could not be tested in 64 bit due to a memory error fixed: c++ demo project could not be compiled under 64 bit fixed: several configuration issues in 10.2.3 Tokyo and 10.3 Rio demo projects added: RAD Studio XE2, XE8, 10.0 Seattle and 10.1 Berlin support
fixed: incorrect BkColor default value in TWSVGImageList fixed: users no longer have to link the Uniscribe library (usp10.dll) explicitly added: new property (DPIScale) to allow image list content to be auto-scaled on DPI changes added: drag&drop support in TWSVGImageList design time editor changed: now TWSCGImageList design time editor is shown as a grid instead of a list
added: library version number property is now exposed in components fixed: now TWSVGImageList no longer clears its content when the size is changed fixed: Delphi demos for 10.2 Tokyo and 10.3 Rio contained several graphical glitches and path to DCU was missing for 64 bit compilation
First public release
No. SVGMagic only targets the VCL.
No. However the whole library source code is provided with the purchase of a Small Team license ($299), and compile it with an earlier compiler may be tried. But be aware that we no guarantee that this will be succesfully possible, and the following points should be considered before taking a such decision :
IWSmartPointer<T> = reference to function: T;
TWGenericNumber<T> = record
...
class operator TWGenericNumber<T>.Add(a, b: TWGenericNumber<T>):
TWGenericNumber<T>;
var
left, right, resVal: TValue;
begin
...
left := TValue.From<T>(a.Value);
right := TValue.From<T>(b.Value);
...
case (left.Kind) of
tkInteger,
tkInt64:
...
resVal := left.AsInt64 + right.AsInt64;
...
tkFloat:
...
resVal := left.AsExtended + right.AsExtended;
...
...
end;
...
Result.Value := resVal.AsType<T>;
end;
No. However it is possible to convert a SVG in any other format supported by the VCL.
The most likely causes for this issue are:
The VerySimpleXml library is a third party library required to compile the SVGMagic source code. It is linked as a submodule to the main repository. For that reason you need to initialize and/or update your local copy using one or several of the following Git commands:
# initialize the submodules to get from the repository in the local copy
git submodule init
# get a working copy of the submodules in the local dir, and/or update them
# NOTE must be executed after a submodule init
git submodule update
# initialize and update the submodules in the local dir (same as the 2 commands above)
# NOTE if the recursive option is added, all the children submodules will also be included
git submodule update --init (--recursive)
# pull all changes in the repo including changes in the submodules
git pull --recurse-submodules
# pull all changes for the submodules
git submodule update –remote
This error happens because the compiler needs to know the path where the compiled .dcu files belonging to the SVGMagic library are located. It's why you have to define them in order to compile your project.
The reason why the demo projects can be compiled and are working directly is because this path was already defined and is pointing to the path where the library is installed by default, as you can see if you open the project properties, under Delphi Compiler -> Search Path.
NOTE the Target field must be set to All configurations - 32-bit Windows platform or All configurations - 64-bit Windows platform in order to show the path.
This error may happen when the project is updated from a previous RAD Studio version to a newer. It may be ignored, and should no longer appear after the project is saved.
Such issues may come from the component used in the background. The most classic case is e.g. if a TPanel is set as a background for the animated image, and its ParentBackground property is configured to True, while its DoubleBuffered property is set to False. Inverting these properties should remove the flickering. This issue may also happen if the image is put directly above a tab control. In this case, introducing a TPanel between the tab control and the image may resolve it.
SVGMagic doesn't provide such functionality. However the SVG content is accessible at any time and may be modified dynamically before being read by the graphic component. You just need to write the code modifying the content.
No. However, as mentioned previously, the SVG content is accessible at any time, and you may write the code required to select and extract the part of the SVG you want to draw.
Yes. Below is a sample code showing how to do that:
pBitmap := TBitmap.Create;
pBitmap.SetSize(pSvgGraphic.Width, pSvgGraphic.Height);
pBitmap.Canvas.Draw(0, 0, pSvgGraphic);
pBitmap.SaveToFile('MyImage.bmp');
pBitmap.Free;
Yes. You may use e.g. the following function:
function SvgToPng(pSvgGraphic: TWSvgGraphic): TPngImage;
const
colorKey = $010101;
var
pBitmap: TBitmap;
rect: TRect;
begin
if (not Assigned(pSvgGraphic)) then
Exit(nil);
// create a RGBA bitmap compatible with SVG to convert
pBitmap := TBitmap.Create;
pBitmap.PixelFormat := pf32bit;
pBitmap.AlphaFormat := afDefined;
pBitmap.Transparent := True;
pBitmap.TransparentColor := colorKey;
pBitmap.SetSize(pSvgGraphic.Width, pSvgGraphic.Height);
// create a rect matching the svg size
rect.Left := 0;
rect.Top := 0;
rect.Right := pSvgGraphic.Width;
rect.Bottom := pSvgGraphic.Height;
// clear bitmap canvas
pBitmap.Canvas.Brush.Color := colorKey;
pBitmap.Canvas.Brush.Style := bsSolid;
pBitmap.Canvas.FillRect(rect);
// convert svg to transparent RGBA bitmap
pBitmap.Canvas.Draw(0, 0, pSvgGraphic);
// now convert bitmap to png
Result := TPngImage.Create;
Result.Assign(pBitmap);
pBitmap.Free;
end;
You can then use it in the following manner:
pSvgImage := TWSvgGraphic.Create;
pSvgImage.LoadFromFile('C:\Projects\Images\Tiger.svg');
pPngImage := SvgToPng(pSvgImage);
if (Assigned(pPngImage)) then
pPngImage.SaveToFile('C:\Projects\Images\Tiger.png');
pSvgImage.Free;
pPngImage.Free;
NOTE the above function supports the transparency, and the color key may be adapted depending on the SVG images you need to convert. But normally the default color key should work with the majority of SVG images to convert.
The SVG files are resizable without loss of quality. The inherent size provided by the graphic is the one defined in the file itself (e.g. by the width and height properties, and/or viewBox property). But contrary to the other graphic formats, the width and height of a TWSVGGraphic component may be changed after the image was loaded, without clearing its content. For that reason the code below is valid:
pGraphic := TWSVGGraphic.Create;
pGraphic.LoadFromFile('W:\SVGParser\trunk\Demo\cursor-selected.svg');
pGraphic.SetSize(512, 512);
pGraphic := TWSVGGraphic.Create;
pGraphic.LoadFromFile('C:\cursor-selected.svg');
rect := TRect.Create(0, 0, 512, 512);
pBitmap := TBitmap.Create;
pBitmap.SetSize(rect.Width, rect.Height);
pBitmap.Canvas.StretchDraw(rect, pGraphic);
pBitmap.SaveToFile('c:\cursor-selected.bmp');
pBitmap.Free;
pGraphic.Free;
...
pGraphic.LoadFromFile('C:\cursor-selected.svg');
W := pGraphic.Width;
H := pGraphic.Height;
pGraphic.SetSize((W * 512) div H, 512);
pBitmap.SetSize(pGraphic.Width, pGraphic.Height);
pBitmap.Canvas.Draw(0, 0, pGraphic);
...
No. Only the SMIL based animations which are part of the SVG standards, are supported. All the other script languages are not supported by SVGMagic.
It depends on the exporter. If the SMIL based animations are supported by the exporter, SVGMagic will be able to draw and animate the resulting SVG. On the other hand, if the SVG contains CSS, or any other script language, after the export, it will not be the case.
SMIL is a standard describing how a media may change its properties over time. More information may be found here:
https://www.w3.org/TR/SVG11/animate.html.
And here are typical SMIL-based animated SVG, well supported by SVGMagic :
https://github.com/SamHerbert/SVG-Loaders/tree/master/svg-loaders.
SVGMagic was designed for our own project needs. With around 50’000 line of Delphi code, and after more than 2 years of intensive work, SVGMagic significantly shortens our development time and allows our applications to provide a cleaner user experience. It’s the reason why applications like the CopyTrans are using it.
According to Wikipedia:
Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) since 1999.
SVG is a graphic standard based on vectorial rendering, that allows to draw images without loss of quality, regardless of the size and resolution, and with considerably smaller image file size. The format is widely used for graphics on the internet and all recent browsers support it. In addition SVGs natively support animations.