Sparkol 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.


Login to post a comment