Sparkol Help

Topic not covered?

Start a new topic

Make Any Font, Text or Equation Draw Well (2017)

 ***This thread is an updated version of the following threads:  Can I make other fonts "draw" well? and Make Any Font, Text or Equation Draw Well (2016).  I have rearranged some parts that were confusing and I have fixed some spelling and punctuation errors, and added a few notes***

Problems Addressed:
A) Videoscribe can draw western fonts and left-to-right languages correctly, but does not support some fonts/languages, Arabic, Chinese, Hebrew etc.
B) Insufficient spacing between words, Irregular spacing between letters, unsupported characters do not show.
C) Complex maths formulas or diagrams are very difficult to input, or symbols are missing.

D) some imported raster or vector images don't draw well


Videoscribe includes the ability to import fonts from your computer and the fonts may draw well without the extra work of making them into an SVG. However if you can't get the results you want by simply typing the text into videoscribe, the following process works well. (At the time of this post, the current version of videoscribe is 2.3.6)

NOTE: This process requires some knowledge of inkscape or illustrator or some self-teaching and google searching.  I recommend experimenting with making a single word or a few characters first until you are sure you understand the whole process.

NOTE2: versions of illustrator released in 2013 or newer will require special save settings that are discussed later in this post (to avoid unsightly bugs). Similarly, if you are using inkscape (available for free at, DOWNLOAD AND USE VERSION 0.48.5.  Newer versions save extra data in the SVG that will cause problems in videoscribe.

NOTE3: if you need a little extra clarification for basic inkscape or illustrator terminology, hopefully a google search will provide it. I'm trying to keep this guide to a manageable length.

1) Type your text into your  illustrator or inkscape document, or copy/paste it from a text document into your illustrator or inkscape document. Write a word or a sentence or a paragraph in a font of your choice. Adjust any spacing, kerning or other settings to your satisfaction using the text menu options in your program. In other words, Make your text look the way you want it to look. The screenshot below is from adobe illustrator CS4:

2) You can use multiple fonts if you want to/need to. You can also use this process to combine text and drawings into one SVG. For the purposes of this tutorial, we'll stick to one font.

3) Convert the text to outlines. In Illustrator, I believe that you click TYPE>CREATE OUTLINES. In inkscape I think it is PATH>OBJECT TO PATH. This step  converts your editable text into vector paths that are closed filled paths with no strokes. The text converted to outlines should look something like this:

NOTE: If you aren't too picky about the way the text will be drawn, (for example if you are going to use "move-in" instead of "draw" to animate your text) you can just skip to step 8 and save your Text as an SVG right now. There is an old video tutorial from videoscribe version 1 showing the way that would look: text- to SVG simple version

If you want your text to draw better, continue with the following steps:
4) If this step seems too confusing, just skip it: If your new paths seem completely overloaded with anchor points (lets say.. more than about 20 or 25 per letter) it might make your final file size a little larger. That may not be a concern unless you are using many many text SVGs in a pretty long scribe. If you are really being careful to optimize everything, you may be able to reduce the number of anchor points using OBJECT> PATH> SIMPLIFY in illustrator,  or PATH>SIMPLIFY in inkscape.

5) Now that you have your vector paths, it may be a good idea to lock those layers so you don't accidentally select or move anchor points during the later steps. After you have locked the existing art,  add a new layer for the next step. I believe that locking can be done in both illustrator and inkscape.

6) On the new layer, you'll be making the reveal stroke(s) that the videoscribe hand will follow when drawing your text. You can use the pen tool or the pencil tool with a BASIC stroke (no paintbrush style or other effects). Use rounded caps and corners. Use a stroke big enough that you can manually trace over each of the letters and the letters will be COMPLETELY hidden under the new stroke. If your finished videoscribe is going to be drawing at a leisurely pace, then you may want to be very precise with your reveal stroke(s)- be careful when drawing over each letter that you do not cover parts of the adjacent letters.  If your final video is going to be drawn quite quickly, you don't have to be as precise. You are basically just adding a path for the hand to follow that APPROXIMATES the motion of writing the letters. it can be one continuous curvy/squiggly line like a sawtooth pattern covering each letter in the proper drawing order. try to cover each letter before moving to the next. If you are using the pen tool , click and drag to create each anchor point and you will get smoother curves in your reveal stroke instead of sharp corners. your reveal strokes can be one long path or multiple smaller paths.  In the attached screenshot, I used the pen tool to click and drag as I made each new anchor point so the path is nice and curvy instead of just sharp angles. I adjusted the reveal strokes to 50% opacity so you can see the text and the reveal strokes in the screenshot. I set the layer color to green and the stroke color to purple for easier viewing The top example uses a very carefully drawn stroke to reveal the text one letter at a time. This can be time consuming to prepare but it draws very nicely if the animation time is slow in videoscribe. The bottom example uses a much simpler up and down squiggle with a large stroke size which is easier to create and it will usually look just fine if it is animated quickly in videoscribe:

I only drew a stroked path over the word "text" in my screenshot. Of course you will want to cover ALL of your letters that you wish to be drawn nicely in videoscribe,

7) After finishing your reveal strokes, set the opacity of the reveal stroke(s) to zero so it is transparent. If you want, you can temporarily set it to about 50% so you can look for places where the stroke doesn't cover the text, and then fix it, but be sure to change the opacity to zero before you save the SVG.

8) Export the finished image as an SVG. In inkscape version 0.48.5 the default save settings should be fine. In Illustrator versions that are older than 2013 most settings seem to work fine, but you can refer to the below screenshot if you want. In illustrator CC (2013) or newer, you really need to use these settings to avoid visual glitches:

9) Import your new SVG into videoscribe and test it. If you have to update your SVG. you will need to be sure to import the NEW version into videoscribe and not just re-import the cached version from "recently used" images appearing on the import menu.

10) if any of your reveal strokes draw in the wrong direction, you will have to go back and reverse the direction of the path in inkscape or illustrator. I believe that clicking the desired "ending" anchor point with the pen tool might fix the direction. or you can google other solutions for your particular drawing program.

11) MATHEMATICAL EQUATIONS: I believe that you can import LaTeX (I'm not very familiar with it) data into illustrator in pdf format as vectors. After importing that vector information, you could theoretically just save it as an SVG using the settings in the screenshot above,  or you could continue with steps 4 through 9. If anyone uses any Maths program that exports pdf or svg files, and you decide to try the above steps, please feel free to comment here.

12) EMBEDDED IMAGES: Theoretically, if you have any type of image file that you can import into illustrator or inkscape, ( like a scanned image of a handwritten letter, or a jpg image of a drawing for example) you can use steps 6 through 9 above to convert it to an SVG that works in videoscribe. Be sure to use "embed" in your save settings or the embedded image will not be saved inside the SVG. Keep in mind that if your embedded image has a large file size, it will increase videoscribes memory usage, so keep your images optimized.

13) If you have vector art that does not draw well in videoscribe because the art contains fills instead of stroked paths, you could use steps 5 through 9 above to make an SVG that will draw well in videoscribe. The process will probably work best with images that look like clean simple line art.


The process described above is obviously a bit more work than just typing in the text into videoscribe, but you can make pretty much any font draw well. The faster the words draw in videoscribe, the less accurate your transparent stroke needs to be, and the less noticeable any inaccuracies will be.

This method should work with Chinese, Japanese, Hebrew, mathematical equations, and any other written languages regardless of the direction in which you would like them to be written or read.

-Mike (videoscribe user)

I just posted a small application that might be of help for getting expressions, simple drawing in videoscribe, have a look in: "videoscribe Q&A"- converting pixel graphics (png/bmp/...) to vector graphics.



As the small program I wrote can not be archieved at videoscribe (legal stuff) I out it on google. you can download it via

Thanks for being patient with us Otto while we worked through the legal side of software we do not write the code for being linked through our site! As he said it is available from the author’s website here:

Disclaimer: We like this software, and it has performed well during ordinary use, but we have not undertaken any in-depth testing and we have not checked it for the presence of malware or any potentially harmful behaviour, so you download and use it at your own risk and we do not accept any liability for any loss or damage it may cause.”

I tried this method with inkscape and i had an issue of having the font very thin and suddenly at the end it shows up normally .. why ?
Fixed it .. just right click on the path .. stroke and fill .. stroke style .. increase it until the path covers the whole text
That's a good point.

As I mentioned, after step three, you will find that the text does not really draw well in videoscribe. each letter is outlined very thinly and then the color fills appear at the end.

Instead of doing steps 5,6 and 7 listed in the original post, There is another option to simply "select all", then add a stroke to all of the letter paths (so they become stroked AND filled paths) and make the stroke thick enough to cover the color fills. If you leave the strokes at 100% opacity they may make the letters look bloated or harder to read... BUT If you change the opacity of the new strokes to 0% they should reveal the letters when videoscribe draws them.  If you use this method, videoscribe will still be tracing around the outside edges of each letter but the whole letter will be drawn in the process (instead of just a thin outline). You may or may not be satisfied with the results but it is a bit easier than steps 5--7 in the original post.

-Mike (videoscribe user)


Login to post a comment