SVG drawing order could use tweaking

  • Don't know if this is a bug or a feature.

    At present, you're effectively doing a depth-last traversal of the "layer" tree. For example, given








    You'd draw the vectors in the order A C B. It makes more sense to me to do a standard pre-order traversal (yielding A B C). That way you could guarantee that if any top-level layer preceded any other top-level layer, that all vectors in the first layer would be rendered before any elements in the second layer. You don't have that guarantee, now, which makes for a lot of seemingly random ordering in the way vectors are rendered.

  • Hi,

    1) I agree that the nesting/drawing order can be an unexpected complication for people who are learning to make SVGs that will work well in videoscribe.

    2) To avoid confusion I can simply not use nesting. If I want to draw A B C, I just arrange the layers like this without nesting (For any other readers who may be unfamiliar with SVG drawing order in videoscribe, they draw from the bottom up):

    layer C

    layer B

    layer A

    2) I think that the current system has an important benefit. If I want to draw A and B and then draw C behind/under A and B, I can do it using nesting.

    Layer B

    Layer A

    nested layer

        Layer C

    I think your suggestion would eliminate that possibility and each layer being drawn would have to be on top of previously drawn layers. I might be mistaken about that or maybe I misunderstood your suggestion.

    3) To help clarify the way videoscribe reads SVG images, the SVG tips on the Instant Answers page (which might get more traffic if it were called Official FAQ and Tutorials) could be improved with a number of diagrams of simple and more complexly layered SVG files.  Below is an example indicating the drawing order with red numbers although much clearer examples could be made:

    4) (I think ) Inkscape users don't have the ability to view and arrange layers and nested layers in a convenient way, so much of this discussion may not apply for them.

    Well, that's my 2 cents anyway,

    -Mike (videoscribe user)

  • Thanks Mike.

    My main problem has to do with "shapes" in Illustrator.  If you drag a shape onto the drawing, and then "break" the connection between the instance and the shape template, Illustrator turns it into a sublayer full of vectors. (If you don't break the connection, VideoScribe does all sorts of bizarre stuff with it, so that's not an option). To make matters more complicated, those shape-created sublayers may themselves have sublayers within them. Right now, I have to manually drag all those vectors out to the top layer to get control over drawing order. If I don't do that, the vectors within the former shapes tend to be drawn at strange and unpredictable times. Be nice to not have to do all that busywork, though.

    I get paid by the job, so any time I can save is worth actual money to me. Unfortunately, there are many time-wasting parts of VideoScribe's UI, and this is one of them.


  • Instead of manually dragging everything to the main layer, I think if you cut and paste a selected bunch of paths, they paste back in with no nested layers (unless you have "paste remember layers" setting enabled in the layer panel menu I think).

    -Mike (videoscribe user)


  • Hi Allen,

    I'm one of the in-house illustrators here at Sparkol. Mikes advice is correct (as usual, we really appreciate your help Mike), and once you get used to the way VideoScribe parses an SVG the workflow is very straight forward. If you do create a shape or end up with a group of nested sub-layers, simply highlight them and drag them out to the master tier of your document layers, 3 second job & your problem's solved!

    I understand it’s not the most intuitive working practice for people unfamiliar with Illustrator, but we’re working very hard on producing training material to walk people through the process.

    Again, apologies if it’s been a frustrating process, if you get stuck again there’s this fantastic tutorial on Youtube that covers making SVGs for VideoScribe using Adobe Illustrator. Keep an eye on our blog/ social media for news on future tutorials and remember that you can always contact our support team if you have any technical questions related to VideoScribe.


  • Ben,

    You said "simply highlight them and drag them out to the master tier of your document layers" Could you explain that? When I work on the image itself (cut a set of vectors, select a layer, paste) AI messes with the positions of everything so it's not a simple process. RIght now, I'm highlighting the vectors in the layers panel and dragging them out to a top-level layer. Is that what you had in mind? If so, that process is tedious because I have to find and select the individual problem vectors. It does work, but there are significant workflow problems, mostly my forgetting to do it and not noticing the problem until I render the scribe, which forces me to go back to AI, recreate the SVG, load it into VideoScribe again, and re-render. That's enormously annoying and time consuming. I'm paid by the job, not by the hour, so it costs me money as well.

    In other words, what you're doing in your note is describing a workaround for what I see as a bug in VideoScribe. You're saying that, if I use AI in a specialized non-intuitive way, I can work around the fact that VideoScribe does a lousy job of interpreting SVG files. That's not a solution. You need to fix VideoScrdibe's SVG parser.

    A similar problem occurs with the "crossing lines leave little nubs" problem that's been mentioned in several posts. Turns out that that's a solvable problem too (you have to mess with artboard resolution, set the units to pixels, etc.), but your literature doesn't talk about that solution anywhere.

    Looks to me like somebody in marketing is so adverse to admitting in public that VideoScribe has these sorts of bugs that you, as a company, are unwilling to create a document that tells me how to work around these (known) issues. That approach, causes me to waste enormous amounts of time flailing around trying random things hoping something will fix the problem, and frankly, gets me rather angry at Sparkol. You desperately need a known-issues-with-AI-and-how-to-work-around them document, and you need to make fixing those bugs higher priority than the evidently are.


  • @Mike, cut/paste doesn't work quite as you describe. I just highlighted a set of nested layers (created by "breaking" the links to shapes) then hit Cmd-X Cmd-V without touching the mouse. First, the objects moved around. When I tried a second cut/paste, they didn't move around the second time, which is to say that the behavior is unpredictable. Second, the shapes are not pasted into a top-level layer, they're pasted into the topmost sublayer that contained one of the cut vectors. The orignal layers are not deleted, so you have to delete them manually.  To make matters worse, AI moves the vectors around.  After doing the cut/paste thing once, I added a new shape, expanded it, and then cut/paste again. AI put the vectors that comprised the newly added shape at the *end* of the list, which is to say that they'll be drawn first by VideoScribe (rather than last).

    So, a cut paste might work only if you cut/paste an entire drawing---you can't do it incrementally as you work, and subsequent modifications to the drawing will have to be adjusted manually. Seems like just working in the Layer's panel is more reliable.


  •  Hi Allen,

    Sorry about that. I thought you just wanted them in the same positions relative to each other. To also keep the same position on the canvas, here are the correct shortcuts:

    1) CTRL+F will paste all selected paths into the same exact position in the topmost available layer.
    2) CTRL+B will paste them into the exact same position in the bottom available layer.


    3) in adobe illustrator CS5 and newer I think you can use

    SHIFT+CTRL+V  ("paste in place") which presumable pastes into the currently selected layer. but I don't have CS5 so i can't test it.

    (These will work after you use CTRL+X or CTRL+C)

    Their positions relative to each other and relative to the canvas will be preserved.

    Be sure that you select complete paths and don't miss any anchor points.

    If there are already paths in the layer to which you are pasting, they will remain there as well. If you want them to have their own layer, be sure to create a new empty layer for them and place it at the (top or bottom) appropriate location.

    Mike (videoscribe user)

  • Thanks Mike! That works (though it's Cmd rather than Ctrl on a Mac). Also Shift-Cmd-V works well with Illustrator CC.


Login to post a comment