Creating your own SVG images

Learn how to make your own custom SVGs that draw perfectly in VideoScribe

The best images for VideoScribe are SVGs. SVG stands for ‘Scalable Vector Graphics’ and you can create your own using an SVG editor such as Adobe Illustrator (subscription fee) or Inkscape (free). In this article we cover 2 different methods for creating your own SVG images.

Method 1: Convert your imported image to an SVG image 

If you're using Adobe Illustrator you can read our blog post on how to make an SVG for VideoScribe in Adobe Illustrator or view our video below:

If you're using Inkscape, please view our video below: 

Method 2: Draw images directly into your SVG editor 

1. Use your chosen SVG editor to create a simple drawing with the pencil or pen tool to create ‘basic’ strokes
   1. Tools you can use to create basic strokes are: the ‘pencil’ and ‘bezier curve’ tools in Inkscape and the ‘pencil’ and ‘pen’ tools in Adobe Illustrator
      
      1. Do not use a brush (paintbrush) or calligraphy pen, otherwise VideoScribe will draw the outline of the stroke instead of a solid black line.

1. 1. Use simple ‘basic’ strokes, don’t use any stroke effects or styles
2. Save your image to your computer as an .svg file
   1. If using Adobe Illustrator, use ‘Save as…’ instead of ‘Export...’
   2. We recommend the following save settings when using Adobe Illustrator:
      1. Image Location (A) should be set to ‘Embed’
      2. ‘CSS properties’ (B) should be set to either ‘Presentation Attributes’ or ‘Style Attributes’ in the ‘Advanced Options’ section
      3. The ‘Responsive’ checkbox (C) should be left unchecked
         
         
3. Open VideoScribe and go to 'Add image'
4. Select ‘File’ and locate your image

Your image will be imported into VideoScribe.

Method 3: Converting brushed or hand-drawn images to SVG

If you draw a line with the brush tool in Illustrator or Inkscape there won’t be a stroke in the file for VideoScribe to draw. If you want to draw with the brush, you need to get VideoScribe to draw another ‘basic’ stroke in exactly the same place as the brush stroke, but invisible.

Similarly, if your image was originally hand-drawn and lacks a clear edge, you will need to follow these instructions to ensure it draws cleanly in VideoScribe:

1. In your SVG editor select the brush stroke
2. Copy it
3. Paste it into the exact same place on top of the first stroke
4. Set the brush definition of this new stroke to ‘basic’ and remove any brush effect
5. Thicken the new ‘basic’ stroke enough to cover your original brush stroke
6. Set the opacity of this new stroke to 0% so it's ‘invisible’

You're asking VideoScribe to draw along the new transparent stroke and reveal the opaque brush stroke that is in the same place. Step 5 will determine how well your image will draw in VideoScribe.

General tips for creating better images for VideoScribe

• VideoScribe will draw your SVG image in the same order that it was drawn in your SVG editor.
• If using Adobe Illustrator, VideoScribe draws strokes in the order they are in the ‘Layers’ panel, starting from the bottom of the list and working up to the top.
• Use ‘Layers’ to separate the strokes of your image instead of groups but avoid using nested layers.
• Before saving your SVG make sure there are no hidden layers that you have forgotten to unhide. If they're hidden, they're not necessary so delete them.
• If using Inkscape, make sure the units of measurement are set to pixels in the document properties.
• Always make sure that any raster (bitmap) images are embedded into the SVG file when you save it. If ‘Link’ is selected, the raster image will not appear when your SVG is imported into VideoScribe.
• In Adobe Illustrator, when you save as an SVG, after you give the image a name and choose where to save it, you will get some ‘SVG Options’. There is a ‘responsive’ checkbox here (at the bottom) that should be left unchecked when saving as it may cause lines to thicken at the end of drawing in VideoScribe if it is checked.
• If you'd like to increase the image quality of your SVG in VideoScribe see Improve image quality.