Making SVG Images Draw Well (2015 update)

  • Hi,
    Please read tip #7 in the original post.

    If you still have problems, attach your SVG so someone can look at it.

    -Mike (videoscribe user)
  • Hi Mike, the save settings have changed – I can't select the settings as I did before (and as shown in #7). 

    I attach a screenshot of the new dialogue box and my SVG.


    (326 Bytes)
  • Correction! By doing a "save as" instead of "export", I can get that same dialogue box... but even when I save with your suggested settings, I'm still having the same problem (thin lines until the draw is finished). :-(

  • Hi,

    Good catch. That's correct. Illustrator CC also has an EXPORT option to save SVGs optimized for web. Videoscribe has not been updated to handle the formatting used in those optimized SVGs in some cases. Please be sure to use Save as> SVG instead of EXPORT>SVG.

    1) The SVG you attached was saved using EXPORT for web which may contain formatting or data  (or lack of data) that displays imperfectly in videoscribe. that's why, when the drawing is complete, you get the lines that are much wider than the 3 pt stroke you specified. (tip #7)  The line width you see during the drawing process is the correct stroke size of 3 pt. If you want a wider stroke, increase the stroke value.

    2) opening the web optimized SVG and then resaving it with the correct save settings probably will not fix an SVG that has already been saved using EXPORT for web

    3) you made those shapes with the line tool and the ellipse tool instead of the pen or pencil too, so your results may not be optimal Note the artifacts on the circle as it draws (see tip #1)

    4) unrelated problem: really wide images  import too large and must be scaled down in videoscribe which sometimes has unwanted results. (see tip #6)

    If you discard the bad SVG and make a new drawing with the correct save settings, it should draw correctly.

    -Mike (videoscribe user)


  • Thanks Mike. Here's another one. In VS it just shows as a black silhouette nor does it draw well. I basically told this illustrator to do what you said to do and this is what I got.  

    (213 KB)
  • Hi,

    We seem to be doing this :

    1) your illustrator makes an SVG without knowing how the file needs to be made for videoscribe
    2) you test an SVG and find out that it doesn't work right
    3) you attach the SVG here and ask for help
    4) I identify problems that have already been described in this thread.
    5) you relay that information back to your illustrator
    6) the whole process repeats

    As we have now reached our fourth SVG, let's break the cycle. Please link your illustrator directly to this thread so your illustrator can fix or avoid the problems. Ideally the illustrator will have a videoscribe account to test the SVGs before sending them to you.

    Bear in mind that if the illustrator follows TIP1 (use the pen or pencil tool with no added styles or effects)  and TIP7 (use the best save options), no other tips are required.

    I hope to make a new version of this thread soon to provide the tips in a clearer format with a "short and simple" list of tips followed by a more complete version covering advanced topics and troubleshooting.

    -Mike (videoscribe user)


  • UPDATE to the image "pop" at the end of each drawing:

     After lots and lots and lots of experimenting, I think I have identified the little bit of code that can cause or fix the visual pop at the end of SVG drawings in videoscribe.  Example video with and without pop:

    the code i edited is this:

    I still have more testing to do... Instead of editing the SVG in a text editor as I did, this can probably be accomplished with settings in illustrator or inkscape.

    Important bits may be:
    1) whole numbers and no decimals in the highlighted area of the code,
    2) possibly specifically 0,0 for the coordinates of the reference point as shown in the highlighted part
    3) "responsive" setting when you save the SVG (I think that eliminates the height and width tags).  I don't have that setting in my version of illlustrator.

    -Mike (videoscribe user)  


  • Hi dear VS users. I've read it all but maybe missed something.

    I drew my scetch in AI with no fill, just outlines. I need it to be drawn in VS with chalk, so my outlines are white.


    But for some reason when I import it to VS it becomes this


    Black outlines and black fill from nowhere.

    Could someone help and tell what do I miss?

    Thank a lot.

  • Hi,

    Thank you for attaching the screenshot.

    Please refer to tip number 7, at the beginning of this thread, which discusses unwanted black blobs, black color fills and other glitches that occur will adobe illustrator if you do not use the recommended save options. The CSS attributes option is probably the one you need to change when saving your SVG.

    If that does not solve your problem, please attach the SVG.

    A newer version of this thread can be found here:

    Making SVG Images Draw Well (2017 update)

    I hope that helps,

    Mike(videoscribe user)

  • You're my hero! It works! and sorry I didn't pay attaention to the tip 7.

  • Thanks for posting your results!

Login to post a comment