Custom SVG Image drawn three times.

  • I have a simple line drawing with color. I read and watched all the tutorials and even downloaded a VideoScribe library image to deconstruct. Everything draws in order and the color fills in just like want, but when the drawing should be down VideoScribe redraws the entire image two more times.


    The setup in Illustrator using the Pencil Tool, basic stroke, 3pt is:

    • Layer 3 (top) - black line drawing of image.
    • Layer 2 (middle) - thicker lines in color for fill.
    • Layer 1 (bottom) - copy of Layer 3 black line drawing set to 0% opacity.

    Saved as SVG 1.1 and using VideoScribe v2.0.3

    For the life of me I can't seem to identify what's going on. There are no fills or duplicate lines, and zero effects. Just basic strokes.

    Any help tremendously appreciated!
  • Hi,
    My guess without seeing the file:
    All three of your layers contain stroked paths.
    Videoscribe draws every stroked path so it is drawing all three layers.

    Since layer 3 is already stroked paths, it is redundant to have a copy of it on layer 1.

    If all three layers contain only strokes, then you can change this file in several ways but they depend on what you hope to achieve....

    1) You could convert the top 2 layers to fills/outlines  ("Object>Path>Outline Stroke" in the AI version that I use) if you want the black line drawing to be drawn and then the color to just appear.

    2)You could just delete the bottom layer and convert the color fill layer to fills/outlines for the same effect.

    if you want something different, please provide more information

    -Mike (videoscribe user)


     

  • Thanks Mike,


    I may be misunderstanding. A previous tutorial (can't seem to find it) instructs to have three layers when creating custom SVGs with color: Top layer = line work, Middle layer = color lines to fill area, and Bottom layer = copy of top layer set at 100% transparent.


    I want color fills but don't want them to just *appear* rather colored in with a provided hand. The previous tutorial i mentioned also suggested to download/export a color character from the VS library as a model to see how it's constructed. I believe I've followed everything but don't understand what I'm missing.


    I've attached the SVG so you can see the setup. Any further help or guidance again is much appreciated!

    svg
  • Thanks for attaching the file. You've ALMOST got it.

    The line art layer looks good and the color layer looks good...

    1) The line drawing layer does not need a copied layer in this case, as it is already stroked paths. so I deleted the extra copy.

    2) If you want the color fills to be drawn with the 0% opacity trick,  then copy the color layer. make it the TOP layer and change it to 0% opacity stroked paths. Then convert the colors in the lower color layer to fills.

    top (copy of color stroked paths 0% opacity)
    middle (black line art stroked paths)
    bottom (color paths converted to to fills)

    new file attached (saved in AI CS4 format)

    The word "INFO" is picking up some color because the strokes are .5. You could try making them 1pt instead of .5

    -Mike (videoscribe user)


     

    svg
  • That did the trick! Thanks Mike!


    Hope the next version supports a better way of doing this. Seems like a hack in some ways, but the output looks pretty cool.


    Thanks again!

Login to post a comment