Making SVG Images Draw Well (2017 update)

  • Just my 2 cents:  After a lot of installs & uninstalls (including recommended inkscape) as I'm working in Windows, I decided for Vectr. I hope it help others to save a lot of time dealing with unwanted outlines and poor GUIs.

  • Strange problem, not sure what's happening. Created svgs for a project. I'm including the "coloring in" effect at the end where it paints in the colors. For about half of the svgs it's working as it should. For the rest it's coloring in first then making the motion of drawing the outlines (of course you see the hand moving but by then the entire image is already there). Everything as far as I can tell is exactly the same for all images, the ones that work right and ones that don't. Three layers, color in effect on top, stroke in middle, actual color on bottom. Is there something obvious that I'm missing?

  • Please be sure to attach the problematic SVG if you want help identifying what is wrong with the SVG.

    -Mike (videoscribe user)


  • Is it possible to make drawings with Adobe Draw on an iPad pro, open them in Illustrator on a desktop, then save them as SVGs that will draw correctly in VideoScribe?

  • Probably.

    Someone did it using adobe sketch in another thread.

    In case no one with adobe draw replies, Could you try following the tips in this thread as much as possible and then test the svg in videoscribe and post your results?

    -Mike (videoscribe user)
  • Okay, I will. Thanks.

  • Okay, here's what happened. Hope you can help figure this one out. I'll attach a short movie that illustrates it.

    First, because I was working in Adobe Draw rather than Photoshop Sketch, the file that I sent to Illustrator on my desktop was already a vector file (.ai). So once I was in Illustrator, and as recommended by the guy using Sketch, I went to Object>Line and Sketch Art>Expand to Paths, Expand to Paths wasn't available because the lines were already vector paths.

    So I skipped that step and just "Saved As" according to all the Illustrator instructions in another post––Save as SVG, embed, presentation attributes, and uncheck responsive, the drawing draws on, but what happens is the hand comes in and sketches outlines of the thick line on both sides, then fills in the black line in between all at once. As I said, I'm attaching the results so you can see. Hope you have some 
    suggestions. Thanks.

    (4.45 MB)
  • Thank you for attaching the movie file.

    I found this thread:

    which explains that the brushes in Adobe illustrator Draw are all variations of the blob tool, so they all create filled paths instead of stroked paths.

    In other words Draw will not do what you want. You can use Adobe photoshop Sketch instead, or other apps that produce basic stroked paths.

    Hope that helps,

    Mike (videoscribe user)

  • Thanks. That's too bad, since Adobe Draw seemed good in other ways for my purpose. Can you use layers in Photoshop Sketch, so you can import a photo and sketch over that?

    Also, I found some reference to Autodesk Graphic on an iPad for making drawings for Scribe. Is that working well for people? Can you point me in the best direction for information on that?



  • Mike, I tried Adobe Sketch, and got it into Illustrator, then followed the steps that were described in the other link you sent:

     1. Draw your design in Adobe Photoshop Sketch, using only the pen or pencil tool in it.

    2. Make sure Adobe Illustrator is launched on your computer

    3. Send your sketch to Adobe Illustrator. A .sket file is being opened in Adobe Illustrator

    4. In Adobe Illustrator select your artwork, then, in the menu go to: Object -> Line and Sketch Art -> Expand to Paths

    5. The artwork is now converted to Basic paths, make sure the 'Variable Width Profile' is set to 'basic'. 

    6. Save or export your file to svg 

    I got hung up on Step 4, as I apparently don't know how to select the artwork, so when I went to  Object > Line and Sketch Art, "Expand to Paths" was not available.

    I've been trying to figure it out, but no luck so far. Any help would be appreciated. Thanks.

  • Hi,

    I don't know if Sketch has layers. I have not used it . Yes, a google search for videoscribe autodesk graphic should bring up threads about that. Try ctrl+a to select all, or use the gray selection arrow to drag a selection box around all of the paths.

    -Mike (videoscribe user)

  • Update
  • @known laugh, If there is a specific bit of information in this thread that is no longer valid, or if there is a specific bit of information that you want to see added, please provide a better description of it.

  • Not sure if anyone else has run into this problem or if I am doing something wrong. I am using Affinity Designer. When I have it trace an image I drew, it will trace properly, but it will also reveal parts of the image early as if its "erasing" a background. Not sure if that is clear enough to understand. I included the svg file I am having an issue with. Any help or suggestions would be greatly appreciated. 

  • I actually think I figured it out. Could my issue be that the lines are not being drawn in proper order? Should I basically break down the image into 3 separate svg files? Would I have this same issue on Inkscape or illustrator?
Login to post a comment