Making SVG Images Draw Well (2015 update)

  • attach the SVG please

    -Mike (videoscribe user)


  • SVG is attached

  •  Hi,

    1)  Your image file size is huge. Using 1.23 MB  images is likely to cause problems in videoscribe. An embedded jpg or png of your scanned image would probably produce a much smaller file size (if optimised properly) than converting the background art to vector. Auto tracing works better with solid colors and line art than with gradients and shading. (you can still draw the reveal trokes over the embedded image.)

    2) the image you attached does not have color reveal strokes, so I guess you attached the wrong one. The one you attached is working as intended by videoscribe.  You can attach the image with the color reveal strokes if you want help with that one.

    -Mike (videoscribe user)

  • Hi Mike, Thanks for your reply. I actually deleted the coloring in strokes because it was causing more problems than help...I reverted back to the last step that I did that worked. I need help figuring out what the next step would be to color in the drawing that I just outlined. Do I use the same pencil tool? Do I have to create it in a new layer? Do the layers have to be in a specific order? I am fairly new to illustrator and creating my own SVG file. Thanks you!
  • oh okay,
    it's easier to identify an actual problem with an SVG, and upload the fixed version, than to try to guess what you might be doing wrong and tell you how to do it differently.

    But my best guess is:
    tip #4 in the original list. groups/folders/subfolders.
    since your outline strokes are in a folder, you need to group your color fill strokes in a folder too. your color fill strokes were probably not in a folder so they were drawing first.

    if you still have a problems, feel free to upload the problem SVG.

    -Mike (videoscribe user)


  • Thank you so much Mike! I will work on it and upload the results. Does it matter the order in which the layers are placed?
  • Hi,
    The drawing starts with the bottom layer and works toward the top layer, next will be the layers within folders starting with the bottom layer in the folder and progressing to the top, then the layers in folders-within-folders.

    -Mike (videoscribe user)


  • Hi Mike!

    I took your advice and everything is working out perfectly.

    My only remaining issue now is that the file is HUGE!...I followed all the instructions to save as an SVG but it is still massive. How do I resolve this?

  • As mentioned above, you should probably use a properly optimized (small file size) JPG or PNG embedded in your SVG instead of trying to convert the image to vector art which has caused your huge file size.

    If you have gimp or photoshop or any other image optimizing software, you can probably make a good quality jpg or png image that is in the range of 20- 100kb. You will have to import the image and then carefully scale it to match the exact size of the current art, then delete the vector art of your image (but don't delete the reveal strokes that you made).

    Hope that makes sense,
    -Mike (videoscribe user)


  • UPDATE about using inkscape:

    Matthew has posted in another thread that inkscape 0.91 can be used for SVGs as long as you set your Default Units and Custom Size Units both to Pixels (to avoid seeing drawing problems in videoscribe):

    -Mike (videoscribe user)


  • I am pretty sure I have done this before quite awhile ago and found out how easily on here... But am not really seeing it.

    I have a png. I want to put it in Inkscape, turn it into an svg that draws well.

    This is what I remember on how I think I did it. I traced the outlines. Then made the lines thick enough that it covers all the outlines underneath. Then set the thick lines opacity to 0. Then when I plug into Videoscribe it draws the outline then if there is color the color shows up when done.

    When I try doing this now, it shows everything within the invisible line (all lines and colors within it, although the line you see drawn is THINNER than the actual invisible line I created) that's being traced. So I'm doing something very wrong. It's something I did once or twice maybe up to two years ago so I can't remember. I learned how to do this on this site and am not seeing anything like that. All I see is how to create an svg from scratch or trace the lines of an image then deleting the original image so that the outline you traced is the actual visible image you use. 

  • Pretty sure all the answers are in this thread.

    Videoscribe will ALWAYS reveal everything that is covered by your invisible stroked path, so the process works best if your invisible stroked path only covers line art or other things that you wish to reveal. 

    if the reveal stroke is appearing thinner than the stroked path you created, then maybe you aren't using the preferred save settings in inkscape or illustratorCC (described in this thread)

    you could attach the svg if you want more specific feedback.

    -Mike (videoscribe user)


  • Okay Mike. Here are a couple actual svgs (I have an illustrator who made them for me and I guess can't figure this out). Can you tell me what the issue is and how to correct it? Thanks.

    Besides drawing correctly, I notice it doesn't scale well in Videoscribe. Even at a normal size it looks more pixelated than in Inkscape. There's another svg in the video I'm making that I need to zoom way in on and it looks terrible.

    The first two attached are from the set I'm having problems with. One draws but not right at all. The second just draws a couple small lines. The third is one I've had made in the past by another illustrator that works perfectly.

    (204 KB)
    (243 KB)
  • Hi,

    File LCF1 works correctly because it is made of simple basic stroked paths drawn with the pen or pencil tool, and color fills as described in tips 1 and 2 of my tip list. If you follow those two tips and the correct save options, you don't need to worry about anything else.

    In file FR2 the black line art is actually black color fills with no stroked paths at all. since there are no stroked paths at all, videoscribe draws the outline of each color fill . it s just sort of a bug that videoscribe works that way I guess.

    In file FR5 there are two small stroked paths which videoscribe draws and everything else is color fills which just appear.  That's what happens when there is at least 1 stroked path and everything else is color fills

    solution 1 (easiest): you caould just select all of the black line art (which is currently just black fills instead of stroked paths) and apply a black stroke to it.

    solution 2:  If the artists used a paintbrush or calligraphy pen style or something... for the line art, and he(or she) has the original art saved as an AI file, the AI file might still contain the black line art as paths with a style applied (maybe). I the paths are there, he(or she) can select all of the black line art and change the black line art to basic stroked paths instead of paintbrush paths or whatever.

    solution 3 (more work):  the artist either needs to do the invisible stroked path trick over all of the black line art

    solution 4 (more work/best results):  redraw the line art as basic stroked paths using the pen or pencil tool plus color fills

    -Mike (videoscribe user)


  • Hi, I'm having this same problem – the lines are thin while drawing, and then thicken (to the weight set in Illustrator) afterwards. My strokes are basic, black, no fills. I have tried reducing to basic appearance and then putting the colour and weight back on. There's no filters.

    The save dialogue box has changed recently – so I'm guessing there's something missing in the way I'm saving...? (I'm using Illustrator CC). Any ideas? Thanks.

Login to post a comment