The new version 2.1 of the SVG package supports SVG Fonts.
The previous versions of the package used only system fonts and converted these to glyphs, but this would not always give accurate results. Could be that the specified font is not installed and also, in Delphi it is not easy to find out wat the exact glyph metrics are.
With SVG fonts you have more control over the final result.
Here is an example how SVG fonts can be used with the package. I have created a test application that looks like this:

The memo control contains the SVG content and with the button “Apply”, I can apply the SVG content to the SVG2Image control.
There are two ways to apply SVG content to SVG controls, I could set the “SVG” property of the TSVG2Image controls like so:
procedure TForm1.bApplyClick(Sender: TObject);
begin
SVG2Image1.SVG.Assign(Memo1.Lines);
SVG2Image1.Repaint;
end;
The advantage of this method is dat the SVG content is saved in the form file and in the excutable file so you don’t have to supply the SVG as a seperate file to the excutable.
The other method is to specify a reference to a file in the “Filename” property of the TSVG2Image control. In that case we first have to save the content of the Memo control to file.
procedure TForm1.bApplyClick(Sender: TObject);
begin
Memo1.Lines.SaveToFile(Edit1.Text);
SVG2Image1.Filename := Edit1.Text;
SVG2Image1.NeedsParse := True;
SVG2Image1.Repaint;
end;
The advantage of the second method is that, if a reference to an external file is used from within the SVG content, the parser will know where to find it.
So in this example we want to specify an external SVG file containing the SVG font, so we use the second method.
The statement: “SVG2Image1.NeedsParse := True” will force the control to reparse the SVG content, even though the filename stays the same.
For this example I have put this SVG content in the Memo:
<?xml version="1.0" standalone="no"?>
<svg width="10cm" height="3cm" viewBox="0 0 1000 300" xmlns="http://www.w3.org/2000/svg" version="1.1">
<g font-family="Roboto" font-size="45" >
<text x="200" y="150" fill="blue" >You are <tspan font-weight="bold" fill="red" >not </tspan>a banana.</text>
</g>
<rect x="1" y="1" width="998" height="298" fill="none" stroke="blue" stroke-width="2" />
</svg>
Now when I run the application it will save the SVG content to the location I have specified in the Edit control and render the SVG in the TSVG2Image control.

Now we need an SVG file containg an SVG font. You can use the Batik SVG Font converter to create such a file out of a any “True type font”. So as an example I have converted the Great Vibes font to “GreatVibes.svg” and I have saved this file relative to the referencing SVG in folder “\Fonts”.
Now I have to change the SVG content to make it use the new font, there are several ways to do that.
You can use the SVG FontFace functionality like so:
<?xml version="1.0" standalone="no"?>
<svg
version="1.1"
width="10cm" height="3cm"
viewBox="0 0 1000 300"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<font-face font-family="Great Vibes" unicode-range="U+0-7F">
<font-face-src>
<font-face-uri xlink:href="Fonts/GreatVibes.svg#Font"/>
</font-face-src>
</font-face>
</defs>
<g font-family="Great Vibes" font-size="80" >
<text x="200" y="150" fill="blue" >You are <tspan font-weight="bold" fill="red" >not </tspan>a banana.</text>
</g>
<rect x="1" y="1" width="998" height="298" fill="none" stroke="blue" stroke-width="2" />
</svg>
The “font-face-uri” element specifies an external SVG document containing a font element with id=”Font”. Note that I had to add the namespace declaration xmlns:xlink=”http://www.w3.org/1999/xlink” in the SVG element because the font-face-uri uses the xlink:href attribute!
Another method would be using CSS like so:
<?xml version="1.0" standalone="no"?>
<svg
version="1.1"
width="10cm" height="3cm"
viewBox="0 0 1000 300"
xmlns="http://www.w3.org/2000/svg">
<defs>
<style type="text/css">
@font-face {
font-family: 'Great Vibes';
font-weight: normal;
font-style: normal;
src: url("Fonts/GreatVibes.svg#Font") format("svg")
}
</style>
</defs>
<g font-family="Great Vibes" font-size="80" >
<text x="200" y="150" fill="blue" >You are <tspan font-weight="bold" fill="red" >not </tspan>a banana.</text>
</g>
<rect x="1" y="1" width="998" height="298" fill="none" stroke="blue" stroke-width="2" />
</svg>
The end result should look like this:
