VideoScribe Help

Topic not covered?

Start a new topic

Intersecting lines appearing in SVG

I have created SVG's using the pencil tool in Illustrator. When I import them to VideoScribe the points where the lines intersect appears before that section is drawn. Is there any way to avoid this? I have attached a screenshot so you can see what I mean.

I'm only using the trial version so this may be a limitation.


1 person has this question

Hi Tim.

It wouldn't be a limitation on the trial version: you would get the same result with a Pro licence.

It looks to me like the 'reveal' of the hand is wider than the width of the line.  I'd like to take a look at the SVG, to find out why: I guess it's either something to so with the way the SVG was made or how VideoScribe is reads it.

You could try increasing width of the stroke in the SVG?

Hi Ian,
Thanks for your speedy reply. I tried increasing the width of the stroke to 20 points but the issue is still there unfortunately. I have attached the SVG from the first example, I created it in Illustrator CC 2014.
VideoScribe seems like a great piece of software, and would be perfect for our needs so I hope a solution can be found for this issue.


(videoscribe is only drawing about a 4 pixel stroke instead of 8 and it is drawing 8 where the lines overlap. possibly due to one of the save settings you used.) I opened and resaved it using CS4 and it seemed to draw correctly. I used "SVG1.1" and "adobe CEF" as the SVG type .

-Mike (videoscribe user)


Hi Mike,
Thanks for your input. I tried re-saving with the same settings as you have listed above but the problem persists. I don't have CS4 and I would hope that this problem can be solved without having to go that far back.
Has this problem been reported before by other users?


This is the first time I have seen this symptom mentioned.

((EDIT: This is a symptom occurring with SVGs made in Illustrator Creative Cloud))

1) here is a more complete set of save settings that you could try to match:

(if you embed any images you would choose "embed" instead of "link". Neither of these setting will directly affect the symptom being discussed in this thread.)

2) CC says it has a "rebuilt" pencil tool. maybe you are using a new feature that vidoescribe cannot recognize yet. you could try disabling some options if possible

3) As a workaround, since CC probably has the option to save in older formats, first save the file as AI CS4 or CS5 ((EDITED to clarify: after you save the file as an older format, then CLOSE the CC file and open the OLDER format copy and save as an SVG. )) This is just a guess and I have not tried it myself.

4) simply opening the problematic svg in an older version of illustrator (or inkscape) and re-saving it should also clear out the "new" pencil and pen tool settings and fix the problem.

-Mike (videoscribe user)


Brilliant, thanks Mike! It seems that the changes to the pencil tool in CC are causing this issue. I found a copy of CS6 and there was no problem at all with intersecting lines in the SVG I created. I tried your third suggestion about saving in an older format, then re-saving as an SVG but it didn't work, so I guess I'll just have to keep CS6 around.
Thanks again for all your help!


You're very welcome. Thanks for posting your results!

-Mike (videoscribe user)


Hi Guys.

Here's a bit more info on saving preferences in Adobe Illustrator hot off the press..

In CS4 I opened your image and saved as 'embed' rather than 'link' for image location: that drew the lines nice and think, as they look in illustrator, with no bumps:

in the latest Illustrator () there are yet more options: here's a slightly updated screenshot to the one above: note that 'embed' is ticked and also 'output fewer <tspan> elements' is unticked.  We have found that this latest option often returns images that draw with really thin lines that then get bigger when the image is finished (rather like grouping often does): with those options I got this: 

In this screenshot you can see the original image (thinnest, in the top left), the one saved in CS4 (thickest in top right) as well as this one, saved in the latest Illustrator: CC 2014 (although the option exists in all CC)

I hope that helps some more..


I ran into the same problem with illustrator cc 2014. I regressed to Illustrator cc and the intersection where the line crosses itself was eliminated. 

I tried the above suggestions, but am still running into the problem of intersecting lines appearing in the svg. 

I originally created my illustration in Illustrator CC2014. Ran into problems. Then found the above answers and recreated the illustration in Illustrator CS6 making sure I followed the SVG Options noted in the post above. Each time, I saw what I would call little artifacts of the lines yet to be drawn. I've attached a jpeg of a screen grab from the VideoScribe playback. You'll notice the artifacts at the base of the babies diaper. 

I also noted in the playback that where the lines did intersect, the hand would go back and redraw those small intersecting areas. 

Hope you can help. This seems like a great program.

Your symptom is not related to the problem described in this thread.
You are using a transparent path to reveal filled brush strokes underneath.
Your transparent path is too wide so it is overlapping parts of other filled areas and revealing them.

to fix your SVG, make your transparent paths 50% opacity (more or less) in order to see what they will or will not overlap and reveal. then fine-tune the transparent path widths and placement to only reveal what you want to reveal, and then change the opacity back to 0%

-Mike (videoscribe user)


Makes sense. I'll give that a try. Thanks.

I just tried Ian's instructions (from 9 months ago), and it doesn't work with CC 2014 in its latest incarnation. I'm still getting the "bumps" at every intersection, and it's also misdrawing a few of the lines (it puts the anchors in the wrong place). I've attached both the SVG and the scribe. Note the bumps as it draws, and note the extra garbage that it draws at the bottom of the "k" and the "p" (there are two anchors at the bottom of both of those letters, but videoscribe isn't rendering them properly).

This is something that our development team are still looking into.

I have been able to recreate the issue when creating SVGs using Illustrator CC 2014.

I cannot reproduce the issue when I do the same thing using Inkscape.

I have attached a sample SVG that has been created in Inkscape here and there is no unwanted reveal at the intersection whatsoever.

Login to post a comment