The latest RAD Studio / C++ Builder 12 comes with a lot of new features, one of them is Skia graphics library support in C++. Skia is an open-source graphic library that provides support for a variety of hardware and software platforms. Skia provides smooth 2D graphics that uses GPU efficiently. Skia supports a lot of new image formats, such as .bmp, .jpg, .gif, .gif animation, .svg, .ico, .webp, .wbmp and raw images (.arw, .cr2, .dng, .nef, .nrw, .orf, .raf, .rw2, .pef and .srw). It is very useful for handling the SVG image format which is a Scalable Vector Graphics form. In this post we explain how to use SVG images with Skia in C++ Builder.
Table of Contents
What is Skia in modern C++?
Skia is an open-source graphic library that provides support variety of hardware and software platforms. Skia is sponsored and managed by Google but is available for use by anyone under the BSD Free Software License. Mainly designed for Google Chrome and ChromeOS, Android, Flutter, Mozilla Firefox and Firefox OS, and many other products. The core components are done by the Skia development team but they consider contributions from any source.
How to use the SVG Image format with Skia in the C++ Builder IDE?
Skia supports a lot of new image formats, such as .bmp, .jpg, .gif, .gif animation, .svg, .ico, .webp, .wbmp, and raw images (.arw, .cr2, .dng, .nef, .nrw, .orf, .raf, .rw2, .pef and .srw). If you want to use SVG image format in your applications, C++ Builder has a TSKSvg Skia component for this, first, you should drag it from the Palette window to your form design.
Then you can double click to SkSvg1 object on your form design, this will open SVG Editor. Click to Open button to select and load a SVG file. Some sample SVG examples can be found in C:\Users\Public\Documents\Embarcadero\Studio\23.0\Samples\Assets folder if you installed Samples in RAD Studio 12.
How to use the SVG Image format with Skia in C++ Builder code?
If you want to use SVG image format in your code first you should have TSkSvg object on your form design, or you can create a new TSkSvg object as below.
|
1 2 3 4 |
TSkSvg* Svg1 = new TSkSvg(nullptr); Svg1->Align = TAlignLayout::Client; |
Then you can read svg file as below,
|
1 2 3 |
Svg1->Svg->Source = TFile::ReadAllText("C:\\Users\\Public\\Documents\\Embarcadero\\Studio\\23.0\\Samples\\Assets\\c++builder.svg"); |
If you need, you can change its Wrap mode as shown below.
|
1 2 3 |
Svg1->Svg->WrapMode = TSkSvgWrapMode::Stretch; |
If you want to make it in a single color, you can override its color to a single color like so:
|
1 2 3 |
Svg1->Svg->OverrideColor = TAlphaColors::Blueviolet; |
SVG files may include different DOM objects in a drawing. You can do more specific operations to each of DOM objects in your SVG file. Here’s an example.
|
1 2 3 |
Svg1->Svg->DOM->FindNodeById("eyes")->TrySetAttribute("fill", "red"); |
Is there a full example of how to use SVG Image format with Skia in C++ Builder code?
In C++ Builder 12, first drag a TSkSvg Skia component on your form design. Now you can load an image when the form is constructed. Here is a full simple example in C++.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
#include <fmx.h> #include <System.IOUtils.hpp> #pragma hdrstop #include "Skia_SVG_Unit1.h" //--------------------------------------------------------------------------- #pragma package(smart_init) #pragma resource "*.fmx" TForm1 *Form1; //--------------------------------------------------------------------------- __fastcall TForm1::TForm1(TComponent* Owner) : TForm(Owner) { SkSvg1->Svg->Source = TFile::ReadAllText("C:\\Users\\Public\\Documents\\Embarcadero\\Studio\\23.0\\Samples\\Assets\\c++builder.svg"); SkSvg1->Svg->OverrideColor = TAlphaColors::Blueviolet; SkSvg1->Svg->WrapMode = TSkSvgWrapMode::Stretch; //SkSvg1->Svg->DOM->FindNodeById("eyes")->TrySetAttribute("fill", "red"); } |
If you want to see more Skia examples, please install the latest RAD Studio / C++ Builder12.1 full or trial version and check this sample in the Samples folder:C:/Users/Public/Documents/Embarcadero/Studio/23.0/Samples/CPP/Multi-Device Samples/Skia4Delphi project. It has many examples that runs different Skia graphical examples. [Editor’s note: due to the way the blogging software works you will need to reverse the slashes shown in the path]
C++ Builder is the easiest and fastest C and C++ compiler and IDE for building simple or professional applications on the Windows operating system. It is also easy for beginners to learn with its wide range of samples, tutorials, help files, and LSP support for code. RAD Studio’s C++ Builder version comes with the award-winning VCL framework for high-performance native Windows apps and the powerful FireMonkey (FMX) framework for UIs.
There is a free C++ Builder Community Edition for students, beginners, and startups; it can be downloaded from here. For professional developers, there are Professional, Architect, or Enterprise versions of C++ Builder and there is a trial version you can download from here.
