Sparkol Help

Topic not covered?

Start a new topic

problems with svg rendering

So here's where I'm at with videoscribe. I opened a hand drawn image into Inkscape and converted it to an svg. As you can see, it draws the outlines and fills it in instead of drawing the image. Clearly I'm missing a step or a setting. Any ideas?

If you use the pen or pencil tool to make stroked paths with no styles of filters, then the lines will draw correctly.

If you use a paintbrush tool or any kind of tapered lines or styles then videoscribe may regard them as filled paths instead of stroked paths, and they will be outlined as seen in your video. There are extra steps you can follow to make SVGs with these types of lines draw correctly.

More information here: Making SVG Images Draw Well (2017 update)

-Mike (videoscribe user)


Where I'm gettign stuck with the video is #1 I'm using Inkscape, not Illustrator, and #2 - I'm working with a file that I hand drew instead of something that was drawn in a program to begin with. In the video, it seems like a simple matter to change the line width of something you copied from an original drawing. But I can't figure out how to select it, increase the line width, and do what the video is asking me to do.

My explanation may not have been clear enough.

Your lines draw that way in videsocribe because of the tool you used to create your lines in inkscape (I can only guess it was the paintbrush tool since you have not provided that information).

The simplest solution is to redraw your art with the pen or pencil tool, in inkscape, as described in tip 0 and tip 1 in the link I provided.

...or you can go the more complicated method of using transparent stroked paths over your paintbrush strokes as described in Tip 1 in the link I provided.

If you need further help, or if you don't understand my answer, or if you think my answer is not the correct solution, please attach you SVG.

-Mike (videoscribe user)


This is where I'm at right now. It's an image that I drew and am trying to make it look like it is drawn by hand in Videoscape. I suspect my problem is that I don't understand how Inkscape works very well, but if you're willing to give it a try, then go ahead!

I'm probably not being clear enough, so here's another try. I attached the original file I'd like to use in Videoscribe. I can import it into Inkscape with no problem, but the video you shared is with an image that was created in Inkscape, not an imported file. I can't get the imported file to do what the video does (in part because he's working in Illustrator.)

So, you need to import the PNG into Inkscape and then manually trace over the lines of the imported PNG with the Pencil or Bezier tool. The tracing lines should just cover the lines of the PNG beneath them. When you have done this select all of the lines (strokes) you have just created and make them transparent (Stroke paint Alpha value of 0).


The process would begin like this (depending on where you want the hand to begin drawing the image in VideoScribe - the VideoScribe hand will draw in the same order you create the lines).


I've changed the colour of the lines to red and made them partially transparent for illustration purposes. You would need to continue adding lines over the PNG image until all the lines are covered.

Okay-I'm getting close. I put the YouTube video down below so you can see where I'm at. I followed your instructions and it looks like it's doing what it's supposed to be doing, but the drawing lines don't match the finished image that you see at the end. I feel like I need to make one minor adjustment somewhere and I'll be set.

Maybe your transparent stroked paths need to have a wider stroke.
Please attach the SVG.


Here it is. I know that I forgot to ungroup it before I traced it. Could that be the problem?  

You need to make sure that your PNG is embedded into the SVG when you save it instead of linked. I opened the file in Inkscape and there is no image, just a message saying "Linked Image Not Found". The embed option comes up when you first import the PNG into Inkscape (I don't think there is a way to embed an image after it has already been imported and linked; you may have to import the image again).


From looking at your YouTube video, the issue could be to do with the measurement units setting in Inkscape. Make sure that the Default units and custom size are both in pixels

File -> Document Properties… (or Shift+Ctrl+D).

Under 'General' change the units to pixels (px).

Under ‘Custom Size’ change the units to pixels (px).

Then re-save the image.


Also, I forgot to say that is is best to add the PNG into one layer and lock that layer. Then add a new layer above for your tracing lines.

I followed the instructions but it still isn't working. I attached the original png and the second attempt if you want to mess with it. 

This is copied from your SVG:

Is that the correct value for the stroke width as it appears in inkscape?
Please use inkscape to open the SVG you attached here, and make your transparent strokes 100% opaque (A =100%). How much of the underlying art do they actually cover? The same amount that is drawn in videoscribe? (it may help if you make the transparent strokes a different color than the underlying art so you can see the difference.)

Please try making your transparent strokes much wider and see if that helps. Maybe 10 or 15 px. (Make them transparent (A =0%) again before saving the SVG with a new name.)

-Mike (videoscribe user)


Nope still not working. I bumped the lines up to 15%. Could maybe one of you use my original file and see if you can make it work? I'm stumped. 

Login to post a comment