VideoScribe Help

Topic not covered?

Start a new topic

How to keep line thickness in SVG

Hi all,

When I draw a picture in Illustrator with the pencil tool set at 10 px (or points), and save it as an SVG it seems like VS draws the picture with a thinner thickness, and corrects this as soon as the 'drawing' is finished.

Is there any way to correct this, besides the 'hidden line' trick I've seen so often which always uses a bitmap to display after 'drawing' (and doesn't render that nice, compared to 100% vector lines).

I really like to know.

Mike.Thanks for that. It's helpful. However, I have to say for Sparkol's benefit, that forcing us users to jump through hoops like this is really unacceptable. Every one of those fixes could be done automatically within videoscribe by modifying the .svg when they read the file. More to the point, the fixes don't seem to work reliably. Sometimes they work, sometimes they don't. Sparkol really has to fix the underlying problem, which is that they "uncover" the underlying image with a line that's too wide. I could care less about new features. I just want the existing features to work.

Thanks Allen for showing your workflow / workarounds.  I had not considered using Adobe Premiere for the mixdown.  Are you the same Allen Holub I saw speaking at JavaOne about multithreading some time around 2001?  I'm pretty sure VideoScribe could fix these problems if they hired you.

Hi Michael, Yup, that's me. I actually offered to build an SVG preprocessor for them a few years back. Since some programs like inkscape seem to work better than AI, seems like an AI-SVG to Inkscape-SVG translator, though a kluge, would solve the problem, and compiler writing is right up my alley. SVG is just an XML file after all. It's not that big a deal to modify it programmatically. They were uninterested, however. My feeling at the time is that they, themselves, didn't know what was actually causing the problem, so didn't want admit that.

I've completely given up on the line thickness issues through the native features in Sparkol.  The only way I have achieved the results I'm looking for is with the AI overdraw routine.  Here's the result:

Looking good, David!


David, that looks great! Could you explain what you mean by the "AI overdraw routine?" You even have lines of varying thickness, which I've never been able to pull off.

Thanks guys.  

Allen - regarding AI overdraw... I should say "line reveal" as it is described in the video link attached.  It is A LOT of extra work - but really the only way I've found to get high quality results. Your drawing underneath (the one that is revealed) can be anything you like - drawn in photoshop or illustrator with any line thickness you want - then you "reveal" the artwork line-by-line with your vector draw-over in AI (Adobe Illustrator) by making the the pencil line thickness whatever it needs to be to cover up the line underneath.  Here is the tutorial.  Good luck!!

Mike Metcalf,

Very interesting on removing that line of code. I just did a test with a different SVG and it worked. Thanks!!!

Savvy Productions

Great! Thanks for posting your results, Stephen!

I think that if you have illustrator CC you can just check the "responsive" setting in the save options and it will automatically eliminate that bit of code. I don't have CC yet though.

-Mike (videoscribe user)


Clicking responsive messes everything up if you are filling the inside of the image with something. If it is just lines then yes, responsive works great. Thanks for the heads up!

Savvy Productions

Ooohhhhh Ok thank you for the additional information. That's good to know!


Well I had the exact same problem and the answer was simple in the end. When I created a new file (I use Affinity Designer) the default was 300dpi, yet when I saved the file afterwards the default was 96dpi. I didn't spot this, but it's what causes the line issue. All you need to do to ensure the lines stay the thickness you think they should be is to ensure that the dpi remains the same. The overall dimensions of the file don't matter, and the dpi doesn't either (but I did find 300dpi or above was too much for VideoScribe to handle the animation properly). I'm currently using 192 dpi which works very well. Scaling the images within VideoScribe works just fine with these too. It seems so stupidly obvious yet it took me ages to work out. Like I say, I use Affinity Designer but it would be interesting to hear if this is also an issue with other drawing software.

Login to post a comment