VideoScribe Help

Topic not covered?

Start a new topic

Making SVG Images Draw Well (2017 update)

QUESTION: What is the best way to make SVG images that draw properly in VideoScribe?

ANSWER:  I believe the tips below will help you get the best results with the fewest problems (such as improperly drawn images, visual glitches, interface and timeline problems, slow downs, freezing, crashing or failure to save, load, or render). Some terms or phrasing used in this thread may be slightly different among various versions of inkscape or illustrator.

TIP 0) If you want the simplest method for making SVG images for VideoScribe, here it is:

- Use inkscape or Illustrator. If you use other programs you will probably have unexpected results.

- Use the pen tool or the pencil tool to create BASIC stroked paths with no styles, no masks, no paintbrush tool, no calligraphy pen, no effects of any kind.

- If you use the pen tool, please click&drag when you create each point (instead of just clicking) so that the control handles for each point will be extended and the paths will draw more smoothly.

- Delete any extra layers or other parts that will not be drawn (instead of just hiding them) before you save your SVG for videoscribe.

- If you use a version of inkscape or Illustrator created after 2012, see TIP 7 later in this thread for information about the best save settings to prevent glitches.

- Use "SAVE AS... SVG". Don't "Export for web".

That's all you really need to know if you want to keep it simple!

(Continue reading for more complex techniques)
-Mike (videoscribe user)

1 person has this question

Hi Don.

I'm not familiar with Affinity Designer but usually if parts of the image are being revealed when they shouldn't the wrong units of measurement are being used. Can you check in Affinity what the units of measurement are set to? They should be set to pixels (as opposed to points/millimeters etc).

You shouldn't need to break down the image into 3 parts.

All programs seem to code their SVG files differently. If you can use illustrator or inkscape, they have been more thouroughly tested so you will have access to a better knowledge base. If you prefer to use some other program besides illustrator or inkscape, you may have to do some testing to figure out the best save options.

Best guesses:
If you have the option to "Save A SVG" instead of "Export SVG", "Save As" is probably the better option.
Settings that are more compatible with older programs may have fewer problems in videoscribe.
"Save for web" settings may cause problems.
Options involving CSS may cause problems.

Otherwise, you may need to try more of the options and test them in videoscribe.

Hope that helps,
Mike (videoscribe user)

Thanks everyone. I have tried just about every possible setting without much luck. I was hoping to be able to stick with affinity, but I guess I'll have to switch back to adobe. Thanks again!

Thank you Mike Metcalf, your tip number 7 helped me so much.

A customer was asking about making an SVG in CorelDRAW recently so I had a quick play and managed to create a simple image that works well in VideoScribe. 

It has 3 layers which are the same as the standard methodology in Illustrator.   

Layer 3 = Transparent stroke to reveal the fill. 

Layer 2 = Outline Stroke only, no fill.

Layer 1 = Colour Fill only, no stroke.

There are a few key save settings on the SVG export that you need to take into account. 

The project file, exported SVG and a screenshot of the settings used on export are attached. You can also watch a published output from VideoScribe of this drawing via

We've had the same question about Affinity as well and when I get some time I will do my best to have a quick look at that too. But the save settings here, and the ones for Adobe which have already been detailed on this forum should good you a good indication of what you are looking for.

On another note, someone else asked about the new Colour Change feature in v3.3 of VideoScribe and if you can build your own images in a way that would activate that feature when they are imported?
Answer to this is yes! Interested? Check out my explaination on the Change the Colour of Images feature forum.

OK, so Affinity designer (desktop, not tried the iPad version) works as well with VideoScribe. 

When you click New Document make sure you are setting up an Artboard based on Pixels and we always work on 1000px square as this minimises any line popping you may experience.

Used their shape creator tool to make a heart in this example. Have one copy of it on Layer 1 which is a red fill only, no stroke. Another copy of the heart on Layer 2 which is the opposite so just the outline, no fill. Then used the pencil tool on layer 3 to create a freehand stroke to cover the whole thing and turned it transparent to reveal the fill layer underneath.

This is all very standard for VideoScribe image creation and if you are not sure what I mean by this please watch this handy tutorial created by one of our customers showing what we mean in Illustrator.

In terms of SVG Export settings for Affinity... I used Export rather than Save As and the standard out of the box 'SVG (for export)' preset does a pretty good job. Perfectionists will notice it does create a small amount of colour bleed consistent with the 'responsive' save setting being selected in Illustrator. So I would recommend for the perfect result that you select that that preset then click 'More...' and unselect the 'Set Viewbox' and 'Add line breaks' options at the bottom of the list.

Again the Project file for Affinity, Exported SVG and screenshots of the document setup and export settings are attached to this post. 

I've also published the finished article from VideoScribe and you can see a video of it drawing here -

Great stuff, Barry!!!

Login to post a comment