Making an existing SVG draw better

  • Hi all

    OK I have got the hang of using a png in illustrator, drawing paths then savng to svg and all works well when brought into Videoscribe.

    However I have a number of older svgs which seem to draw a complex outline of the strokes and then fill them in (black) at the end. I cant figure out if there is a quick way to convert them to simple strokes in ai so they draw simply in Videoscribe

     I will attach an example. Thanks all

    (8.68 KB)
  • That SVG appears to have been made by using a live trace/automatic trace feature to convert a raster image directly to filled paths (instead of stroked paths). The live trace results are already pretty uneven and probably would not convert to usable stroked paths in any convenient way, if at all.

    If you have the original clip art, or want to find similar clip art online, you might be able to use live trace on the original image and specify that you want strokes instead of fills this time.  You could even try rasterizing the SVG into a png or jpg and then live trace it, but the original image would probably be better.

    large, clean, sharp (or aliased), single color images tend to work best with live trace. different settings yield the best results with different types of image.

    As always, the best results will be achieved by manually tracing all of the lines of the image with basic stroked paths, in illustrator or inkscape,  in the same order that you want it to draw in videoscribe, and then deleting the source image before saving it as an SVG.

    -Mike (videoscribe user)

  • Thanks Mike - That is really helpful - still struggling to get it to draw thick lines from outset  rather than outline and fill at the end - but will persevere with the options. After rasterising the stroke trace seems to put me back to square 1. :-(


  • Be sure you do all steps in order and when you get to step 6 , make sure you have preview turned on, and strokes turned on and fills turned OFF, and then adjust the settings until you see each line being converted to a stroked path instead of outlines.

    -Mike (Videoscribe user)

  • My previous instruction list was numbered incorrectly, and I forgot to include the EXPAND command. so I have re-written it and I will probably delete the incorrect reply above.

    If you decide to rasterize the SVG and live trace it again:
    1) open the SVG in illustrator

    2) use "OBJECT>RASTERIZE"  with no anti aliasing
    (( An example of what works for the above svg: Object>rasterize with no antialiasing at 300 dpi))

    3) if the result has really large visible pixels then you should probably undo it and rasterize it again at a higher resolution.

    4) After you get a good rasterization use "OBJECT>LIVE TRACE>TRACING OPTIONS"

    5) in the trace menu, select strokes instead of fills, select "ignore white", turn on preview, and experiment with the other settings to get the best results. Then click the TRACE button to apply the trace.
    (( An example of what works for the SVG you attached:
    object>live trace>tracing options:     strokes=yes, fills=no, max stroke weight=14, ignore white=yes, preview=yes))

    6) Object>live trace>expand. (now you should be able to see the stroked paths)

    7) save as an SVG and test in videoscribe. Repeat process for better results if necessary.

    Hope that helps,
    -Mike (videoscribe user)


  • Thanks again Mike. I will give it another go tonight. I must be doing something wrong.
  • Hi Mike

    I still don't seem to be able to get rid of the outline and pop behaviour

    Attached a screenshot video. Maybe this is the best I can hope for

    I could always manually draw a stroked path around a rasterised png version but would like to accomplish an auto process if possible



    (9.28 MB)
  • Hi,

    1) You are importing an image that was last modified on July 16, 2015 so maybe it is not a version that you have tried to fix. Check for a newer image in a different folder. Also when you save new versions, it may help to name each new version sequentially like "listmark_0", "listmark_1", "listmark_2" etc, so you don't grab the wrong one.

    2) As soon as you import it I can tell by the varying line widths that it is just fills instead of strokes before videoscribe tries to draw it.

  • Hi Mike

    No def importing the one I saved - dated today (see screenshot)  Just tried it again and same result. May I ask what version of Illustrator you use?  Wondering if it is that and there is another setting I am missing

    (11.9 KB)
  • You may have saved a new version titled listmark_v2, but in the video, you imported listmark_0 from 2015 .

    If the new one does not work, record the process of you following the steps I described in illustrator, and I will try to help you identify what you might have done wrong.

    I am using Illustrator CS4 so the menu layouts may be different. but you would still have to be doing something wrong, or importing the wrong file, to get outlines.

  • Ok thanks Mike. I imported listmark_0 at the beginning to show the original problem but in the video I rasterised and traced and expanded it saving as v2 and then imported that into videoscribe- I’m sure I double checked - but will try again tomorrow with a new svg - I have quite a few that draw this annoying way. Thanks for all your help - I appreciate it.

    I owe you a big apology! I didn't watch the whole video!

    Thanks for your patience while I catch up. 

    Okay, I see that in the listmarkV2 svg, the symptom is slightly different. Videoscribe is no longer drawing outlines around filled paths. It is now drawing a thin stroked path right through the center of the line and then the full width of the stroke is appearing at the end of the drawing. This slightly different symptom with Listmark V2 is something I have seen before.

    According to this Instant Answer page,  I think you have to uncheck "responsive" in your save options.

  • Ha - thanks Mike. I will give that a go tonight. Funnily I hovered over that responsive button - but didn’t try it as I read elsewhere it needs to be checked. I will let you know. Thanks Mike
  • Hmn. Yes I do see some threads that mention better results when checking the responsive option... so i'm not sure what to believe. My antique version of illustrator does not have that option.

    Thanks for being such a patient person, I know this has been kind of a slow journey to success so far. 

  • Yay - It draws just fine with the responsive unchecked - Success. I will try a few others now that are drawing in a similar manner. First I will try a straight save out of illustrator with responsive unchecked - before I go down the rasterising route.. Thanks again Mike

Login to post a comment