New help centre

Answers has been replaced by our new website at help.videoscribe.co. It's got loads of help articles and an easier-to-use community - designed to get you the support you need as quickly as possible. Go to VideoScribe Help.

How do I make SVGs that draw well?

Asked at Mon, 29 Apr 2013 08:55:57 GMT by Ian Howlett

 
I know I can import SVGs but how do I make my own so that they are drawn well by VideoScribe?

Answers

  • Here's a video to talk you through it: http://youtu.be/w67PXprNK3M

    Alternatively, take a look at these written instructions...

    Making your own images for VideoScribe might be a daunting prospect, but with these tips it can become a breeze. The first thing you need ius an SVG editor.  We use Adobe Illustrator however there is a free editor called Inkscape which is just as good for getting going.  For more help on getting started in Inkscape see the answer to the question How Can I use Inkscape to make my pictures into SVGs? Then move on to these top tips to make your drawings come alive in VideoScribe:  

     

     Easy method: 'Basic' Stroke:

    In VideoScribe images need to be drawn with a simple stroke – either with the pencil or the pen tool. The brush definition needs to be set to ‘basic’. If you draw the line with the brush tool, illustrator will expand it on saving and there won’t be a stroke in the file for VideoScribe to draw.  

     

     Trickier but better: a second, transparent, layer:

    If you want to draw with the brush like we have done in the image below, you effectively need to get VideoScribe to draw another stroke exactly like the original but invisible.  

     

     

    This is how we do it at Sparkol:

    1. Copy the brush stroke.
    2. Paste it in the same place behind the first stroke.
    3. Then set the brush definition of this new stroke to ‘basic’ and take off any brush effect.
    4. Make the thickness of the new stroke enough to cover your original brush stroke.
    5. Set the transparency of this new stroke to 0%.  

    This process means you are asking VideoScribe to draw along the new transparent stroke but revealing the opaque brush stroke that is in the same place. Step 4 is very important to how well your image will draw in VideoScribe. This will make sure when the transparent, ‘basic’, stroke is drawn it will reveal everything that is visible in the same place, so revealing your original brush stroke.  

     

    The Drawing order

    VideoScribe draws whatever is ‘at the back’ first and finishes with whatever was drawn last or ‘nearest’ the front. Keep this in mind when making the strokes so that drawing of the finished image flows well.   

     

    Never 'Link' an image

    You can use links within your own SVGs but you must make sure they are embedded when you save it, just linking it won’t work when brought into VideoScribe.

     

    The right size…

    When making your own SVGs there is no definite size that you must use but there are some things that will help images to look better and be a lot easier to edit and resize in VideoScribe. At Sparkol we normally use a canvas size of 400 x 400 pixels, this is a good size to make up scenes you want to then draw in VideoScribe. Feel free to make the canvas size bigger if you need to but there is no need to make your images huge, the quality won’t change in VideoScribe, just the size. It is wise to keep to one canvas size throughout when creating different images for the same scribe. Keeping all images relative to each other in size makes editing a lot easier once in VideoScribe. When morphing, for example, an image’s original size is used so if the image is resized a lot it can look quite odd during the morph.  

     

    Answered by Ian Howlett at Mon, 29 Apr 2013 09:35:48 GMT. Edited at Mon, 20 May 2013 08:08:35 GMT.
    • I could not do the above. I once posted on FB if you would do a video on how this is done and the reply was "you would" but that was weeks ago.

      at Fri, 10 May 2013 01:28:22 GMT by Jackie Johns

    • Sorry. We're totally on it. It's on the work list to do for next week. I'll post it as soon as we can. Thanks for your patience. It's definitely on the way.

      at Fri, 10 May 2013 09:43:35 GMT by Suzi Hull

    • Hi there Jackie - here's the video tutorial for you: http://youtu.be/w67PXprNK3M Hope it helps! Suzi.

      at Fri, 17 May 2013 17:29:11 GMT by Suzi Hull

    • This tutorial worked perfect for me! Thanks!

      at Tue, 03 Dec 2013 18:35:23 GMT by Dave Titus

    • Hello I saw MAX's tutorial but my problem is I use INKSCAPE. This instructions are for Ai. Can someone please post the completed instructions for Inkscape. I can not find the BASIC Stroke. I was able to create my artwork, make a copy, paste, and do the transparency to 0% but can not find a way to convert the "copy" into a path for the Sparkol hand to follow... So close yet so far! Thank you.

      at Fri, 28 Feb 2014 08:33:01 GMT by Daniel Postan

    • Hi Daniel, Basic stroke refers to using the Pencil Tool. There are various tutorials and articles available online if you google 'inkscape videoscribe' http://www.youtube.com/watch?v=OcQpkaQCFCA&feature=youtu.be is a good place to start.

      at Fri, 28 Feb 2014 09:20:07 GMT by Andy Hardyman

    • Hi, I followed the instructions in the video and above exactly, but videoscribe still interprets my brushstroke as an object to draw the outline of, then fill - rather than one smooth line. Any idea as to what's gone wrong? Thanks

      at Mon, 03 Mar 2014 17:30:27 GMT by Sarah Lawrence

    • Hi Sarah, this sounds like you have 2 paths for each line rather than one and the fill int he middle. You need to have a single path for each line to avoid this from happening.

      at Tue, 04 Mar 2014 09:16:12 GMT by Joe Clarke

    • Hi Joe, thanks but that's not the problem - I think it may be just that my version of Illustrator is extremely old! I have found a way around it though, for anyone else with the same issue, this seems to work: 1) Draw with the pencil/brush in basic FIRST. 2) copy and paste the path/s in front. 3) add brush effects to pasted path/s. 4) change thickness and opacity of basic path/s to cover and save etc. Strange but true.

      at Tue, 04 Mar 2014 15:49:05 GMT by Sarah Lawrence

    • Glad you have it fixed now Sarah, if you get a repeat of the issue, can you ask a new question and add the file to the question and we will be able to take a look.

      at Tue, 04 Mar 2014 15:58:18 GMT by Joe Clarke

    • In the settings window, SVG is NOT chosen under Type. It says Adobe CEF. Does that matter and does it affect the file size?

      at Sun, 16 Mar 2014 00:02:25 GMT by Heather Martinez

    • Hi Heather, if you have text or fonts on the file you created this option controls how it is viewed. Setting it to SVG means that most SVG viewing tools will be able to read the text although the quality can be affected. CEF means that the text/font retains quality but my not be visible by some viewers. I personally set this to SVG but in most cases it would not matter.

      at Mon, 17 Mar 2014 09:40:03 GMT by Joe Clarke

    • I tried the above technique ("This is how we do it at Sparkol"). I'm using Illustrator CC. The problem is that the image draws twice in VideoScribe. Any idea of the cause?

      at Fri, 11 Apr 2014 15:10:20 GMT by Patrick Finnegan

    • Hi Patrick, you need to use the pencil tool - if you watch the Video you will see Max doing that so that you only get the hand drawing once.

      at Fri, 11 Apr 2014 15:50:44 GMT by Andy Hardyman

  • The technique in the previous answer works well. Here's a warning: If you want to edit or reuse your image, save your file first as an Adobe Illustrator (.ai) file, then as an SVG file. The reason is that the SVG file converts the stroke objects to filled outline objects. The .ai file retains everything as you created it, ready to edit again.

    Answered by Dave Millman at Sun, 26 May 2013 21:36:51 GMT
    • Thanks for the comment Dave. The point about making the hand's stroke 'simple' is that it's not converted. But anything else would be.

      at Wed, 29 May 2013 14:25:56 GMT by Ian Howlett

    • This technique works well for sketches, but how can you handle images with color fill? I don't get great results when testing it because dark sketch lines overlap with colors inside/outside of those lines.

      at Mon, 03 Jun 2013 20:57:06 GMT by Tejas Shah

    • Hi Tejas, you may find this answer helpful: - http://answers.sparkol.com/questions/172/how-can-i-colour-in-the-fill-on-images-in-scribes

      at Thu, 11 Jul 2013 12:05:07 GMT by Joe Clarke