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

Or use a shape from the shapes Library, set it to silhouette, pick a colour and change the opacity to a level your happy with so you can still see the image underneath... 

We even have highlighter pens in the hands library you can use and match the colour of

i having trouble with my custom image, my friend send me some black and white images drawing using inkscpe, as is, the images works fine in Videoscribe, whenever i apply the colour layer, the outer line and the colour appear simultaneously at the same time. while playing with the layers order sometimes it show the outer line with boundary colour, then the colour pop up at once. i just got tired and tried a-lot of combinations. taking into account that if i draw the image by my self from scratch using illustrator all is working fine. just with that images got from my friend to edit for him. look the attached files 

The issue is the original image has no stokes in it. The black lines are fills and there are a couple of other layers in there as well which are not strokes but are clearly doing something to help VideoScribe draw the image. 

Without any stroke VideoScribe does it's best to follow the little it does have to draw the image. 

In the colour image you have added a stroke for the reveal layer. Where there is a stroke present VideoScribe will draw that and nothing else as that's what should be there. 

So the answer to this is to make sure the original images from your friend are drawn with strokes and not fills

ok look at this file, i just used the trick of adding two layers of strokes above the fill layers still getting the same issue even worse, look at the file below, 

redCat.svg redCat.svg
86.2 KB

the images already drawn, is there anyway to fix that images ?  i don't want to draw 100 image again. 


(I realize that I'm replying to a post from 2021, but maybe this reply will still be useful to some people.)

First of all, its a very cute cat drawing, and I like the style of the red coloring too.

As mentioned by Barry, the black art in your SVG is not made of strokes but is made of filled areas (probably drawn with the paintbrush tool). Those black filled paths are not giving videoscribe the information it needs to draw them as line art. It looks as though, instead of adding a stroked layer over the black filled paths, you duplicated all of those filled paths into a new layer, but unfortunately that doesn't do anything to improve the situation. The only actual stroked path in the SVG appears to be the zig-zagging reveal stroke which covers about 50% of the drawing.

Unfortunately, if you want videoscribe to draw the black line art and then fill in the color, the most efficient way to fix this type of drawing would probably be to redraw the black line art using the pencil or pen tool, and then delete all copies of the old line art in the file, and save the new version of the file with a new name. Some of the nice line tapering from the paint brush  will be changed to constant line weight, but the updated image will probably look very similar to the current image if you have the original artist do the work.

Additional note: I'm not sure if I already mentioned this earlier in this thread, but if an SVG is made entirely of  filled paths with no stroked paths, videoscribe tends to draw a thin outline around all of the filled paths before the color fills instantly appear. But that is generally not the effect that most users are hoping for.

-Mike (videoscribe user)

Login to post a comment