SVG files render as outlines, then fill in upon completion

  • When the animation happens, my SVG files first render as outlines, then once the hand completes the drawing, they fill in. This only happens on isolated SVG files - can't figure out why.

    I've attached two visuals. One showing the "drawing state" the other showing the "completed state". How do I get the "drawing state" to look like the completed image?

  • Hi Jim,

    You will need to edit the image in a vector editor and trace over the lines with the pen tool.

    This will give the paths needed for VideoScribe to trace the image correctly.

    I think that the information in these two posts will help you to get the effect that you want:

    This describes about drawing different thickness of line -

    This is a more general article about creating SVGs that draw well in VideoScribe -

    Hope this helps.

  • I have this exact same problem, but with SVG's that come with VideoScribe. Aren't all these SVG's supposed to be authored correctly?


  • Alex, which SVGs in VideoScribe are having this issue? I'll take a look and get them corrected.

  • Should I be saving the SVG file with different settings? I used Adobe Draw on an iPad to draw the image, then sent it to Adobe Illustrator to "save as". Attached is the dialogue box I get when saving. I also included the test illustrator file. Since the problem is still happening, wondering if different settings should be used. Help.

  • attach the SVG if you want feedback on it.

    I think there are two different issues being discussed here.

    1) The original post is about a problem which causes the black lines to be outlined and then the black lines fill in. (look at the attached images in the first post.) This is fixed by using a basic stroked path made with the pen or pencil tool instead of the paintbrush or any other special styles.

    2) I get the impression that everyone else in this thread is talking about something different: The black lines all draw correctly, but then the colors just appear instead of being drawn. That is not a bug or a setting. That is the way videoscribe works by default and you have to manually add more paths to your SVG if you want the colors to be "drawn" in.

    related links:
    Fill an image with colour using the hand
    Making SVG Images Draw Well (2015 update)
Login to post a comment