Filled Each Path of an SVG in Order

  • Is there a way to get an SVG to fill each path just after it is drawn and not just after all paths are finished?


    David William Edwards

  • To accomplish that, you will have to be able to edit the SVG in a vector program such as Adobe illustrator or Inkscape.  A very simplified description of the process is that you draw a stroked path that covers the color area, and then you make it 0% opacity and save it, and then the videoscribe hand "traces" that invisible path revealing the color.


    ..but it helps to understand how the order of the layers affects the drawing order, how to save the SVG, and a lot of other stuff, so you'll want to read related links and do some experimenting.


    related links:

    fill-an-image-with-colour-using-the-hand

    more links

    Making SVG Images Draw Well in videoscribe (2015 update)


    -Mike (videoscribe user)




  • Thanks - I understand the concept but can't get it to work with the vector editor I'm using. What constitutes a "basic" stroke. I know you how read most SVGs, so even knowing the code from a "basic" curve would help. Thanks!

  • Hi,
    In this case, basic stroked path means a uniform-width stroke with no styles such as tapered ends, paintbrush style, calligraphy pen style, dotted lines, textures, etc.

    if you choose to use something other than adobe illustrator (with the settings recommended in my previous link) or inkscape 0.48.5 (free at inkscape.org/ DON'T use the newer versions)... then you are likely to encounter multiple unexpected problems and unwanted results with your SVGs in videoscribe.

    if you want help with an svg, please attach the svg to your next reply.

    if you want to look at a videoscribe SVG, find one in the library that draws the color fills, import it into a scribe and then right-click it and export it to your hard drive.

    -Mike (videoscribe user)

     

  • Thanks for you help - here's what I found. Some of the vector apps use terms like "Transparency" instead of Opacity, so took a little while to get the programs I use to output the correct parameters VideoScribe is looking for to use for the "reveal paths". 

    In the SVG they can be at a minimum:

    style="fill:none;stroke:black;stroke-opacity:0;stroke-width:50px;"

    or

    fill="none" fill-opacity="0" stroke="#0" stroke-width="6" stroke-opacity="0"

    Video Scribe looks for an object with these parameters (the reveal paths can have others for endcaps, et al). When it finds even a single object like this, it won't draw the rest of the curves in the SVG but reveal what's under the the reveal paths. When finished, the rest of the SVG will simply appear.

    I worked some with these reveal paths - setting and varying the widths on different paths and setting the corner type. It really didn't seems to matter to VideoScribe - it just draw them as I created them and did the reveals. It worked very well as I had great control over how the objects appeared.

    One tip was that I created a new paths layers to put these one and created lines wide enough to cover the objects to be revealed as closely as possible. To aid in this, I set the transparency (opacity) so I could see through the lines to adjust them more accurately so they would only reveal the correct portions. I then selected these lines, set the opacity to 0% and exported the SVG for import into VideoScribe.

    Note: one of the application I was using didn't work as the others because of parameter in the SVG which VideoScribe didn't like or didn't interpret correctly. In the header to the SVG there are "width" and "height" parameters. VideoScribe didn't work correctly when these were set to "100%". It worked when they were set to the "viewBox" values.

    This changes everything for me and VideoScribe because although I like that I can get it to "draw" vector graphics by using the paths in the SVG, sometimes I wanted to create them myself. Now I can.

    Thanks again - I hope this wasn't too "techie" and let me know if there are any questions or if I need to transfer some of this info to Sparkol.

    David William Edwards 

Login to post a comment