SVG transparent stroke technique: avoid intersecting lines draw too soon?

  • I want to create my own SVGs to use in VideoScribe, and I am using the transparent stroke technique to get them to draw properly.

    I'm using Illustrator to create my SVGs, and I'd like to be able to use brush strokes as well as to vectorize hand-drawn images, instead of only using pen/pencil with uniform/basic stroke.

    It's all working well, except for one thing: If I have varying stroke width, I need to make the transparent stroke wide enough to cover the widest places of the stroke to be shown, and this becomes a problem when I have insersecting lines or lines that are close together.

    I have attached two images, where the first one shows the problem with the ends of two lines that are close enough to be covered by the first transparent stroke, and the other one shows the two lines having been drawn (to better understand what the final result should be like).

    My question is: Is there a way to avoid the ends of the two lines being drawn too soon, or is this just a glitch I'll have to live with, if I want to use VideoScribe?

    (31.5 KB)
    (32.5 KB)
  • In the two examples you have circled in the screenshot you could move the path of the invisible reveal stroke slightly so that it is not overlapping the other lines.

  • Thanks for the reply, and yeah, but that wouldn't be possible in all cases.
    It would be nice if VideoScribe made it possible to use other strokes than basic uniform without needing to hack it in anyway.


  • While this issue is an annoyance, it is easily fixed in the majority of cases by: 

    • Moving the path of the invisible stroke slightly as Matthew Cook suggested
    • Moving the intersecting stroke slightly further from the earlier stroke
    • Deleting (gasp!) a few pixels from the intersecting stroke

    I've fixed dozens of SVGs this way, very few are too complex to fix. The informal nature of whiteboard art allows such changes to go unobserved. 

Login to post a comment