Skip to content
  • There are no suggestions because the search field is empty.

Creating your own SVG images

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

In this article, we cover 3 different methods for creating your own images for VideoScribe, complete with drawing animations. You can either add VideoScribe drawing animations to a raster image (such as a JPEG or PNG), or for the best results, you can create an SVG image from scratch. SVG stands for ‘Scalable Vector Graphics’, meaning they can be resized without a loss of quality.

You can follow our image editing methods by using an SVG editor such as Adobe Illustrator (subscription fee) or Inkscape (free).

Please note: With Adobe Illustrator 28.6, Adobe has made some changes to the way the software saves SVG files. If you're creating images for VideoScribe Legacy, we'd recommend using an earlier version of Illustrator. Our current version of VideoScribe is unaffected by these changes.

Please note: When working in your SVG editor, always ensure that your document measurement units are set to pixels (px), the origin of your document is set to (0px, 0px) and that the artboard dimensions for your image are set to whole numbers. If these are not set correctly, your image may display or animate improperly when imported into VideoScribe.

Method 1: Add VideoScribe animations to a raster 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: 

Top tip: Check out our blog post on creating photo-realistic mockups.

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. 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 the layers were 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 into groups, but avoid using nested layers.
    • Before saving your SVG, make sure there is no hidden artwork that you have forgotten to unhide. If there is any hidden artwork, delete it, as this artwork is not necessary for your final image, and can sometimes cause drawing issues in VideoScribe and inflate the filesize of your image.
    • 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 your image as an SVG, you will be shown an ‘SVG Options’ window after you have chosen where to save the image. The ‘responsive’ checkbox (at the bottom of the window) should be unchecked when saving, as it may cause lines to thicken during the drawing animations in VideoScribe if it is left checked.