Drawing Strings¶

Start by importing Ziafont and loading a font from a file:

import ziafont
font = ziafont.Font('NotoSerif-Regular.ttf')

The font name can be a path to a ttf or otf font file, or the name of a font (such as ‘Arial’) located in a system fonts path. If no font name is specified, a built-in font will be used.

Strings can be converted to SVG using ziafont.font.Text objects. This object provides a Jupyter representation of the string drawn as SVG, but also has methods for getting the SVG as text or as an XML element. Running the following line in a Jupyter cell displays the rendered string.

ziafont.Text('Example', font=font)

Alternatively, Texts object can be created directly from the ziafont.font.Font.text() method of a Font:

font.text('Example')

Size¶

The font size is set with the size parameter:

font.text('small', size=12)

font.text('large', size=72)

Color¶

The color of text is set using any valid CSS color, either a named color (such as ‘red’, ‘blue’) or hex (such as ‘#FF0000’).

font.text('medium slate blue', color='mediumslateblue')

Rotation¶

Text can be rotated by providing an angle in degrees. The rotation_mode parameter matches Matplotlib anchor or default behavior for specifying the center of rotation.

font.text('Rotated', rotation=30)

Multi-line strings¶

Multi-line strings (containing \n characters) can be drawn. Use halign to set horizontal alignment (‘left’, ‘center’, or ‘right’), and linespacing to control the spacing between lines as a multiplier to the normal font-specified line spacing.

font.text('Two\nLines', halign='center', linespacing=.8)

Kerning¶

If the font contains a “GPOS” table, with pair-positioning adjustment, kerning adjustment will be applied to control spacing between individual glyphs. This can be disabled by setting kern=False. See the difference in this example:

font.text('VALVES', kern=True)

font.text('VALVES', kern=False)

Getting SVG data¶

Use the .svg() method to get a standalone SVG data as a string, which can then be saved to a file:

s = font.text('Example').svg()
print(s[:80])  # Just show 80 characters here...

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlin

Or .svgxml() to get the SVG as an XML Element Tree:

font.text('Example').svgxml()

<Element 'svg' at 0x7f20640a6770>

Drawing on an existing SVG¶

To draw the string onto an existing SVG, use the ziafont.font.Text.drawon() method. Create an SVG XML structure as an XML ElementTree, and pass it as the svg parameter along with an xy position within the SVG canvas.

from IPython.display import SVG
from xml.etree import ElementTree as ET

svg = ET.Element('svg')
svg.set('width', '100')
svg.set('height', '50')
svg.set('xmlns', 'http://www.w3.org/2000/svg')
svg.set('viewBox', f'0 0 100 50')
circ = ET.SubElement(svg, 'circle')
circ.set('cx', '50')
circ.set('cy', '25')
circ.set('r', '25')
circ.set('fill', 'orange')

font.text('Hello', size=18).drawon(svg, 50, 25)
font.text('123', size=14).drawon(svg, 75, 40)

SVG(ET.tostring(svg))

The halign parameter specifies the typical horizontal alignment of left, right, or center. Vertical alignment is set with the valign parameter, and may be top, center, bottom, or base. A base alignment will align with the baseline of the first row of text in the string, while bottom alignment aligns with the bottom of the entire block of text.

ziafont.config.fontsize = 16
ziafont.config.debug = True  # Show bounding box and origin
svg = ET.Element('svg')
svg.attrib['xmlns'] = 'http://www.w3.org/2000/svg'
svg.attrib['xmlns:xlink'] = 'http://www.w3.org/1999/xlink'
svg.attrib['width'] = '300'
svg.attrib['height'] = '100'
svg.attrib['viewBox'] = '0 0 300 100'

font.text('align\ntop', valign='top').drawon(svg, 50, 50)
font.text('align\ncenter', valign='center').drawon(svg, 100, 50)
font.text('align\nbase', valign='base').drawon(svg, 160, 50)
font.text('align\nbottom', valign='bottom').drawon(svg, 210, 50)

SVG(ET.tostring(svg))

Calculating string size¶

The method ziafont.font.Text.getsize() can be used to calculate the pixel width and height of a string without drawing it.

font.text('How wide is this string?').getsize()

(547.5703125, 65.3671875)

Configuration Options¶

The ziafont.config object provides some global configuration options.

Default Font Size¶

The default font size can be specified with:

ziafont.config.fontsize = 36

SVG Version Compatibility¶

Some SVG renderers, including recent versions of Inkscape and some OS built-in image viewers, are not fully compatible with the SVG 2.0 specification. Set the svg2 configuration parameter to False for better compatibility. This may result in larger file sizes as each glyph is included as its own <path> element rather than being reused with <symbol> and <use> elements.

ziafont.config.svg2 = False

SVG decimal precision¶

The decimal precision of coordinates in SVG tags can be set using ziafont.config.precision. Lower precision saves space in the SVG string, but may reduce quality of the image.

ziafont.config.precision = 6
# ...

... 4 15.574219"><path d="M 2.425781 -2.865234 L 1.96875 -1.605469 Q 1.916016

ziafont.config.precision = 2
# ...

... 5.57"><path d="M 2.43 -2.87 L 1.97 -1.61 Q 1.92