User Manual EquationSVGEditor 2.

Introduction

There are several equation editors, such as LaTeX® based ones and Mathtype®. None of those
produce the equations in such a way that they can be read by video creating programs such as
VideoScribe® or Camtasia®. In my professional life I create educational means for students and
online education has drawn my attention since 2015. As I experience whiteboard animation as a very
good means to clarify knowledge, I use Videoscribe® to create these videos. Although writing
expressions and equations in Adobe Illustrator® and exporting these in SVG format is possible, I
decided to write a dedicated piece of software to be more consistent. Inspired by the layout of
Mathtype® and adding some extra’s, to make life easier (the spacebar gives a space, and alt-
character gives the Greek character (so Alt-a = ) is what resulted in version 1. In version 2 I added
support for LaTeX commands as many people in the world use LaTeX for creating expressions. In this
manual I’ll show how the equation editor works first, second how LaTex commands are incorporated
and thirdly how you can create your own character(s) in the font editor.

What does the EquationSVGEditor2.zip file contain?

The zip file contains the following files and directories:

EquationSVGEditor2.exe The executable which does all the work.

DefaultLetterSets The directory containing the characters used by the program is
organised in 26 sets. Each set can contain up to 100 characters.
RomanSymbols.LST contains the standard font used,
GreekSymbols.LST contains the Greek font used via the alt-keys
All these characters can be edited by the user, so there is the
Backup directory, containing the same files.
UserLetterSets The characters created by the user are organised in 2 sets:
UserDefined1.LST and UserDefined2.LST.
In these files you can store your own characters. They contain one
character each at this moment.
LatexDefinitions This directory contains the file Def_latex.txt, which contains the
definitions of the latex commands.
Latex This directory contains eight example files. (samplefile1.tex …..). Most
of these come from the internet. You can use these to see how the
latex interface works.
Documents The directory containing this file (EquationSVGEditor2.pdf) as well as
the readme.pdf and EULA.pdf. Do read these; although they just state
that you can use this software as it is.

Installation

There is no installation file! After unpacking the EquationSVGEditor2.zip file in some directory of
your liking you will have everything in place. As this software does not use the registry, but a file
“Equation.cfg” in the same directory as EquationSVGEditor2.exe, you should have write permission
in this directory. Most of the time you will have this, as you unzipped the zip file in that directory.
Once you start EquationSVGEditor2.exe it will create the following files and directories:

1
Equation.cfg This file contains start up info, like paths.
Equations The directory in which it likes to write the equations.
It writes the file “last_equation_edited” every time you end the
program, and it reads this file every time you start the program.
PreviousCharacterSets When you change a character set and you write it to disk, the old
character set will be copied to this directory. It can be read again, in
case your changes were not as you expected them to be.
SVGFiles The default directory containing the SVG files created by this program.
UserDefinedExpressions The directory where the program stores the memory equations. Those
memory equations are defined by the user.

Usage

Once you execute EquationSVGEditor2.exe it will read all 27 character sets, and build bitmaps from
it. It will also read the UserdefinedExpressions and create bitmaps. As this will take some time, you
will have to wait a few seconds (the flash screen) before the main screen appears.

Two versions of the main screen, as it appears for the first time. (Of course depending on your
windows version and windows settings)

2
The top row contains the following buttons:

New Deletes all equations, you can start with an empty screen. (No Undo!)
Load To read a previously saved equation, so you can continue
Save To save the equation under the same name. It automatically overwrites a
previous version.
Load Latex file To read a latex (*.tex) file, and extract equations from it.
Save as… To save the equation with a new name.
Export to SVG To export the equation in the SVG format.
Zoom width To get a decent view on the equations.
Zoom All To fill the screen with all of the equations.
Change Font Changes the default font, so an ‘A’ will look different. At this moment there is
only one font, so it will only be useful when you defined your own font.
Restore Font Changes the default font back to the original one.
Font is Italic Standard roman characters are italic in an expression, this can be turned off.
Button size If the buttons are too small or too big, you can change it here.
Latex editor You can type your own latex commands and insert them in an equation.
Font editor Starts the font editor, which allows you to adjust fonts or create your own.

The following two rows contain ten predefined and one user defined character set each. When you
move your mouse over these rows a grid will appear containing the characters. By clicking in the grid
you will insert that character in your equation. The name of the character set is shown in the bottom
row of the program (e.g. the fourth of the first row is called OperatorSymbols). These symbol sets
are located in the DefaultLetterSets directory. The name giving is inspired by MathType®.

The fourth row contains 10 tabs named Memory 1 … Memory 10. For each memory tab there are 10
memory spots available, so in total 100 memory spots (way too many). The easiest way to fill a
memory spot is by marking (part of) the equation and clicking on an empty memory spot. (Try to
type something, press ctrl-A to select the whole equation, and then click on some memory spot.).
Clicking on a memory spot when it is not empty will result in inserting the content of the memory
spot in the equation at the location of the cursor. (Try that as well). If you want to empty a memory
spot right click it and select clear. The other way to add something to a memory spot is via cut/copy
(a part of) the equation, and right clicking the memory spot and selecting paste.

In the middle of the screen you see some rectangle with a blinking blue cursor. This is where your
equation will appear. You can zoom in (CTRL & mouse wheel), and drag the equation (Ctrl & mouse
move while left mouse button down). You can select parts of the equation via the mouse (mouse
move while left mouse button down) or via keys (CRTL + left or right arrow keys)

On the bottom left of the program, you see a slider and a play button ( ). Clicking the play button
will start a slow redraw, so you can see how the equation will be drawn. Changing the slider will
speed this up or slow this down. Clicking the stop button ( ) or pressing ESC will stop the slow
redraw and enable you to continue.

By typing you will add characters (from the roman character set); by holding down the alt key you
will get Greek characters. Other useful keys are:
<Enter>: will create a new line for the next equation.
Ctrl-Z: undo.
Ctrl-R: redo.
Ctrl-S: saves the equation to the current file (For conformation you will see the word Saved floating
3
from right middle to right top after the file is saved).
Ctrl-I makes selected items italic.
Ctrl-B makes selected items bold.
Ctrl-N resets Italic and Bold on selected items.
Ctrl-X / Ctrl-C / Ctrl-V: to cut copy paste selected parts (Ctrl-Ins et cetera should also work for this).
Ctrl + left/right arrow keys to select parts of the equation.
Left mouse-down and slide to select parts of the equation.
Ctrl + left mouse button to slide the equation over the screen.
Ctrl + mouse wheel to zoom in and out
Mouse wheel to scroll up and down. (In case there are many equations)

Most of these functions can also be found by right clicking in the editor window (popup menu).

The popup menu of the drawing area.

Via the popup menu you can change the colour and thickness of the equation. The default colour is
black, and the default thickness four. You can also resize some parts (make small/normal/large size),
but that will not always give the expected result. Especially when lines need to grow or shrink
(e.g. square root) with the typed content.

Export to SVG

The purpose of the program is to create SVG files that can be processed by Videoscribe®. By clicking
on “Export to SVG” the standard windows save dialog will appear. In the save as type you have four
SVG options:
(1) “videoscribe, constant speed”: This will create a size of 400x400 units SVG file, in which all curves
have roughly the same length, so Videoscribe® will give you a constant drawing speed. For this to
happen the curves are chopped in many small ones, making the file relative large.
(2) “videoscribe, small file”: This will create a size of 400x400 units SVG file, which contains curves of
lengths as specified in each character. Long curves are drawn in the same time as short curves, so
you will notice a difference in drawing speed during drawing in Videoscribe®. The amount of curves
is much smaller than in constant speed, helping you to limit the amount of memory used by
Videoscribe®, as that does have its limits.
(3) “not scaled, constant speed”: The size of the curves is not scaled down; the size is larger than
400x400. The curves have roughly the same length. In Videoscribe® you will notice that after
finishing the draw action the picture is blurred somewhat.
4
(4) “not scaled, small file”: The size of the curves is not scaled down and the curves have the lengths
as specified in each character.

When you have a multiline equation or multiple equations each on one line, a dialog (see next
figure) will appear giving you the possibility to create a file for each line. This is especially useful if
you imported many latex equations from one file and wish to import them one by one in
Videoscribe®.

The multiline save dialog. In this example there are three lines. By clicking OK you will get four files:
MySVG.svg (contains all three lines), MySVG_001.svg (contains line 1), MySVG_002.svg (contains
line 2) and MySVG_003.svg (contains line 3). By unselecting you can combine several lines in one file.

Trouble shooting

Sometimes the program will crash on start up. Of course this should not be the case. But if this
happens you can try the following:
- remove the automatic saved last equation (.\Equations\last_equation_edited) and try again.
- remove the file “.\Equation.cfg”, and try again.
- restore a character set to the original one, if you have modified one. Either use the one from the
“.\backup” directory, or from the “.\PreviousCharacterSets”. The one from the
“.\PreviousCharacterSets” needs to be renamed, as the original name was changed by adding a date
and a number. (E.g RomanSymbols_29-01-2018_1.LST to RomanSymbols.LST) and copy is to
“.\DefaultLetterSets” or “.\UserLetterSets” depending which one it is.
- Unzip the zip file again in another directory and start using that one.

5
Latex commands

The second function of the EquationSVGeditor2 is the ability to read and process Latex® defined
equations. To enable this functionality several hundred commands were added, such as \frac, \sqrt,
\int, and many, many more. You can find the extra defined symbols in “LatexTemplates1.LST”,
“LatexTemplates2.LST” and “LatexTemplates3.LST” in the subdirectory “DefaultLetterSets”. The file
“Def_latex.txt” in the subdirectory “LatexDefinitions” defines all these commands. So if you need to
add commands, you need to edit that file. Most of commands come from the website
“https://www.tutorialspoint.com/tex_commands/index.htm”, which is tex not latex. The website
“https://www.codecogs.com/latex/eqneditor.php” was used to check what these commands
produce in graphics. Reading and processing latex definitions can be done in two ways:
(1) read and process latex (*.tex) files and
(2) type (or paste) your own latex commands in a textbox.

Read and process latex files.

By clicking on “Load Latex file”, you can select a file with extension “tex”. Eight examples files are
given in the directory “Latex”. The Latex file will be read and a dialog, comparable to the “Export to
SVG” will appear, as shown in the next picture.

The latex import dialog. All equations found in the file are shown. By selecting the tick box you tell
which equations to import. In the latex field you can edit the latex equation, so you need to edit latex
commands before importing (sometimes adding {} helps or /, or /space). Press “refresh screen” if you
think it is not properly drawn.

Once you selected the lines you want to import and pressed OK, the latex is imported. If a “?”
appears in an equation, a command was not recognized. If a “!” appears, some unexpected input is
present in the file, like <eof> characters from Linux systems. You can add commands in the file
“Def_latex.txt” in the subdirectory “LatexDefinitions” to get your own latex definitions recognised.

6
For convenience there are some extra commands defined, they are shown in the next picture.

Since there is only one font available for Latex, some extra commands (\R,…,\N) were added, making
it straightforward to add the capital characters for natural numbers up to complex numbers.

Once a file is imported you cannot change the latex commands anymore. You can edit the equation
on screen so it becomes what you like. If you need to add a typical latex command such as
“\pitchfork” you need to click on “Latex editor” near the top right of the screen (next to Font editor).

This is the second method to add latex commands. You will see the following (empty) dialog:

The Latex editor form consists of two parts and three buttons. In the top part you type the latex
commands, in the bottom part you see what you get when you add the expression. Of course if you
only want the pitchfork you type “\pitchfork”. You can rescale the size of the top and bottom part by
moving the splitter which is in between these parts. In the top part you can paste latex from other
sources.

While this dialog is open you can move around and place the blue cursor at the intended insert point
of your equation. When you press “Add expression” it will add the expression at the blue cursor.

7
Font editor

The third big part of this software is the font editor. The aim of the font editor is to enable the
making of your own font definition, by lines and splines. Keep in mind that there is no undo option in
this part of the program!

By clicking on the right top button you will get a window with the font editor. It looks like this:

It gives you four possibilities: Load font set, Import font, Load all font set and hide font editor

Load Font set, lets you select a font set previously made. Import font set asks you which font you
want to import and load all font set, will load 25 font sets.

Load Font set & Load all font set

Once you have chosen one of these options (e.g. load all font set) your screen changes to:

8
For each font set there is a tab. Clicking on the tab will show that font set. Next to close and save
options you can scale all characters of the font set (button “scale of chars”) and size the blue box
around the characters (Button “size char boxes”). To see how the chars look with the thickness used
in the equation editor check the checkbox “apply current thickness”. This thickness is often more
than expected, so a new character might not be as clear as expected. At the right there is a button
that removes all content from the non-visible (the red) characters. This is to save a bit of memory
when reading these files.

In the bottom part (under the drawing area) you see 100 bitmaps, all representing one character.
The visible characters are white, the hidden ones are red. The green one is the one that is currently
in the edit mode (and visible on the screen). To the right of this grid is the play button, which draws
the character slowly. With Ctrl Left/Right/Up/Down-arrow you can move to another character, with
Ctrl-P you can draw it (To see if all characters in a set are drawn properly I start at the first character,
press Ctrl-P, followed by Ctrl-Right-Arrow, Ctrl-P,…. and rearrange curves when needed). Changes to
a character will be stored in memory. By pressing Ctrl-S you can store them in a file.

On the right two lists are shown. The curve list, showing the curves present in the character. The
sequence of drawing is the sequence of this list. So dragging curves to another place in the list will
give another draw sequence. The other list is the group list. Curves can be grouped, and groups can
be manipulated and spaced relative to each other. This will be made clear with an example further
on.

Import Font

If you selected “Import Font” your screen will look something like:

The program will approximate the characters, which one first hand seems nice, but looking more
closely it is clear that this was an automated action, missing the overview of the human eye. What
the program does is creating curves to approximate the character. Those curves are listed in the
“curve list” (in the figure you see Curve1 … Curve2). The names of the curves are “curve”+number.
9
Most of the time you will want to remove most curves and add your own. This can be done by right
clicking with the mouse in the character drawing area. Doing so will display the following popup
menu:

Select to add a series of lines. After selecting, click left mouse

at the wanted start location, move mouse, click left to add a
line. Click right mouse to end adding lines.
Add a holder. There are three sizes. A holder will contain a
series of characters in the equation editor. In the font editor it
is an element just like a curve. It is listed in the curve list.
You can group curves (not holders). Used for scaling, et cetera
If you select curves, you can copy and paste them. Not only in
the current character, but also in other ones (of other fonts).
Remove all the content of the character.
Popup menu of the character drawing area of the font editor

Selecting “Remove all Curves” will remove all curves and holders. If you want to remove all curves of
all chars, you can use the option “Remove hidden chars of Fontset”, available via the right button in
the second row. Before pressing that button you need to make most of the chars hidden. This is
done by right clicking on the first character in the grid (the character left of the “!” char) and
selecting “set as Last character of set” from the popup menu. This will colour most items characters
red, which means they are hidden. After clicking on “Remove hidden chars of Fontset”, right click on
a char of the set and select “Unhide all characters of set” from the popup menu.
Hidden characters are not visible in the equation editor, so it is not over crowded with characters.

Creating a character.

Initial state.
After importing the Tahoma font, and selecting the “$” character, you will see an approximation
consisting of about 22 curves (see figure). Clicking on play will draw the character slowly, making
clear that it is not what you want. Clicking on curve1, will highlight that curve in the drawing area,
with an arrow mark, showing the drawing direction. This will not be clear if you selected “apply
current thickness”, as that could make the lines too thick. Using the up-down arrow keys will show
the next/previous curve of the list. As you might have guessed, the sequence of the curves is how
the character is drawn. By drag/drop a curve to another position in the list the drawing sequence is
changed. To change the draw direction of a curve, right click the curve in the curve list, and
select/unselect “reverse”. In this way you can get the right drawing sequence and direction.
Keep in mind that there is no “Undo” action in the font editor!

Adding curves
Most of the time I delete all automatic created curves (“remove all curves” from the popup in the
drawing area).

10
The $ sign, far left with approximation, middle left without any curves, middle right with new smooth
curves and far right with the new curves modified.

What you see is the grey shading of the Tahoma $ character, an origin, a blue box (the outline of the
character) and cross hairs to know your cursor position. The X,Y coordination of the cursor are given
in the top left of the font editor. You can also estimate this from the rulers.
To add curves, right click in the character drawing area and select “add serie of smooth lines”. Click
at the start position and some other positions to get a bunch of curves. I prefer to put end point at
locations where I want horizontal and vertical tangents, and end with a right click to stop adding
curves. You will have some curves, but they still don’t look at what you want. To get the right shape
of the curves select a curve in the drawing area (click on it)

Manipulating curves

You will see the the end points of the curve, the control points and the tangents. By dragging these
points around you can change the curve. Holding down the Shift key during the dragging, limits the
dragging of the end points to either horizontal or vertical movement and the control node to
keeping the same direction, but shortening or lenghtening the tangent. If the tangent is near
horizontal of near vertical, click on the control node, and select “Make horizontal” or “Make vertical”
to get the tangent as you like. This is why I like to place the end nodes of the curves at locations
where I want a horizontal or vertical tangent.
You will notice that if you drag a control node of one curve that the control node of the connected
curve is also moving. This is caused by the fact that smooth curves were selected. A smooth curve
has the same tangent in size and direction as the curve contected to it. A tangent curve has that
same tangent in direction only (so size is free to choose). If you want to change how two curves are
connected right click near the end of the curve of interest. You will see the following popup menu:

11
 Changes a curve from curved to straight (line) and visa versa
Makes a straight line horizontal
Makes a straight line vertical
Reverses the draw direction of the curve
You won’t see this curve in the equation editor.
Set the connection to smooth (or none) at this end of the curve
Set the connection to tangent (or none) at this end of the curve
To group the (multiple) curve(s)
To split a curve in two, at the position where you started the popup
To disconnect this curve from other curves
To copy a curve (destination can be other characters)
To paste a curve.
To delete a curve (there is no Undo!)

In this way you can define all the characters of a font. Do press save or ctrl-s on occasion. When you
want to connect curves to each other, bring the end nodes close to each other and select from the
popupmenu of the endpoint the “merge” option. Right clicking at the end of the curve will make a
smooth or tangent option possible if there are no more then 2 curves connected.

Manipulating curves as a whole

To manipulate curves as a whole you need to group them first. Select all the curves in the curve list
(click on top and shift click on bottom). Right click and select group. A group called “group1” is
created. On this group of curves you can perform multiple operations. Right click on the group and
the following popmenu will appear:

When not gray, you can allign a group to other groups or holders
Duplicates all the curves in the group and makes a new group
Mirrors the curves of the group in a horizontal mirror.
Mirrors the curves of the group in a vertical mirror.
Mirrors the curves of the group in the y=x line.
Starts a dialog, which allows you to scale all curves of the group
Starts a dialog, which allows you to rotate all curves of the group
Delete the selected group, not the curves! (no undo!)
Delete all groups, not the curves! (no undo!)

As soon as you select a group from the group list, the rectangular perimeter of the group is drawn in
the character drawing area. You can drag the group to the position you want. Hold down shift to
allow for horizontal or vertical dragging only. You can not maipulate curves when a group is selected.
To unselect a group click in the group list, outside of a group or press ESC.

Characters with holders

In the previous part the characters where those of a font. If you want to create a character for an
integral sign, or for a square root, you need to place holders in a character and you need to see to it
that the position is controlled, done via allignment, and that on occation curves grow or shrink.

As an example the making of a root sign is shown.

12
Start with an empty character, the background font character is not important. Unselecting “show
shadow font”, will make it disappear, and prevent distraction.

The first item you want to add is the holder for whatever the user wants to put in the root sign. Right
click in the drawing area and select “Add normal holder”. It is placed with the bottom left corner in
the origin. You can drag it around by grabbing the perimeter and dropping it. The shift will again limit
you to horizontal or vertical movement. Drag it to right, as you want to draw the ‘V’ of the root sign
to the left of the holder. You don’t want it to move vertically, as that would mean the content is
placed higher then the other content. Second action is the placement of the holder for the power of
the root. Add a small holder via right clicking. Position it as in the next picture.

Three steps in making a root character.

It is time to draw lines around it. Right click and select “add serie of straight lines”. Add three lines,
leading to the next picture. Start on the left. You see that at the left the line is outside the blue box,
which means it could intersect with a character on the left. Sticking a bit out is not too cumbersome.
The small holder will receive characters and keep the left line (that is why it is drawn thicker). This is
unwanted, as that would mean that if the user types “33” the second 3 will be drawn through the
root sign. You want that the small holder adds content to the left, so the right side should be fixed.
You can set this by right clicking the small holder and selecting Origin location – bottom right. The
drawing of the holder changes, as you can see by the thick lines on the bottom and right. I also
shifted the small holder upwards, so it doesn’t intersect the root sign to the left and moved the left
end of the root sign in the blue box.

The normal holder will contain characters of all kind. It will therefore grow horizontally and
vertically. The curves of the root sign need to grow accordingly. To accomplish this groups of curves
are needed. The first group is the group containing the curves that should grow/move vertically. This
is the second and third curve (named curve3 and curve4). Select these in the curvelist (use ctrl to
select the second one) and right click and add a group. Press Esc to unselected, and select holder1
(the normal holder). It will be drawn with a green surrounding. To link the group to the holder right
click holder1 (easist in the curve list) and select “vertical size – group1”. Group1 will now size
according to the size of holder 1. As the sizing is done according to linear scaling the (vertical) size of
the group should not be much bigger then the (vertical) size of the holder, since the spacing will
grow as well!

The horizontal size of the root sign should also increase. Select the horizontal line (curve5) and right
click to add a group (of one curve only). The group is called group2. Right click holder1 and select:
“horizontal size – group2”. If you zoom in on the horizontal line, and select group 2, you can drag it

13
completely on top of the root sign. See to it that the horizontal curve is not too short nor too long.
To adjust this curve, hit esc, (no group selected), click on curve5, and drag the right node while
holding down shift to left or right. If your horizontal line is not horizontal, right click the curve (in the
drawing area) and select “make horizontal”.

The root sign is now functional and will look like:

The blue box is still inside the character and not surrounding it. In the case of holders that is less
important, but to make it nicer drag the right side to the right (you can only drag the right side and
the top side). The button “size char boxes” can reset the boxes according to some specifications
given.

When a group is scaled by multiple holders, the largest holder will determine the size.

Testing a character

To test the just made character you need to save it. Most likely you used some font, and that is not
the place where you want it. You want it in a user defined letter set. Open via “load Font set” the
“UserDefined1.LST” (found in ./ UserLetterSets). You will see it is rather empty. The first character is
QED, and there is nothing more.

Go back to the font set by selecting the proper tab (blue is the current one, to the left is the previous
one). You should see your root sign. In the bottom you see the 100 characters of the font, and the
root sign is one of those. It is most likely the green one (the current one). Right click on the green
area and select “copy character”. Now go to the userdefined1 font and click on the second character
(is red), right of the QED character. Click right, and select “paste character”. Clicking on the QED
character makes clear that the root character is not hidden anymore (otherwise it would be red).
Click on save, or ctrl-s, and your character is stored. You need to hide the font editor to get back to
the equation editor. If you click on the UserDefined1 letter set, your root sign is not showing! You
need to end the program and start it again, so the UserDefined1 letter set is read. Insert your
character by moving over the UserDefined1 letter set and selecting the root from the grid (under
QED). After checking you will see that for instance the location of the power is a bit to far to the left.
Open the UserDefined1 letter set in the font editor and move that holder to the right. What you also
notice is that the drawing sequence is not what you want. You want to draw two lines first, then the
content and then the third line. To get this to your liking drag and drop the curves in the curve list to
the right sequence. (e.g. curve, curve, holder, holder, curve).

If you want a short vertical line starting at the end of the horizontal line, and not scaling it when the
content of the holder gets bigger vertically, you need to add a vertical line at the end. Right click in
the drawing area and select “add serie of straight lines”. Click near the end of the horizontal line and
drag the mouse vertically downward, click and end with a right click.

14
Right click on the new curve and make it vertical. Create a group containing this vertical curve.
(group3). To keep the vertical line on spot, you right click on group3 in the group list and select:
“allign to – top right – group1” (group2 should also work). Save the letter set and exit-restart the
program.

These are the most important options of the font editor part of EquationSVGEditor.

15