Making SVG Images Draw Well (2017 update)

  • Hi Don.

    I'm not familiar with Affinity Designer but usually if parts of the image are being revealed when they shouldn't the wrong units of measurement are being used. Can you check in Affinity what the units of measurement are set to? They should be set to pixels (as opposed to points/millimeters etc).

    You shouldn't need to break down the image into 3 parts.

  • All programs seem to code their SVG files differently. If you can use illustrator or inkscape, they have been more thouroughly tested so you will have access to a better knowledge base. If you prefer to use some other program besides illustrator or inkscape, you may have to do some testing to figure out the best save options.

    Best guesses:
    If you have the option to "Save A SVG" instead of "Export SVG", "Save As" is probably the better option.
    Settings that are more compatible with older programs may have fewer problems in videoscribe.
    "Save for web" settings may cause problems.
    Options involving CSS may cause problems.

    Otherwise, you may need to try more of the options and test them in videoscribe.

    Hope that helps,
    Mike (videoscribe user)
  • Thanks everyone. I have tried just about every possible setting without much luck. I was hoping to be able to stick with affinity, but I guess I'll have to switch back to adobe. Thanks again!

  • Thank you Mike Metcalf, your tip number 7 helped me so much.

  • A customer was asking about making an SVG in CorelDRAW recently so I had a quick play and managed to create a simple image that works well in VideoScribe. 

    It has 3 layers which are the same as the standard methodology in Illustrator.   

    Layer 3 = Transparent stroke to reveal the fill. 

    Layer 2 = Outline Stroke only, no fill.

    Layer 1 = Colour Fill only, no stroke.

    There are a few key save settings on the SVG export that you need to take into account. 

    The project file, exported SVG and a screenshot of the settings used on export are attached. You can also watch a published output from VideoScribe of this drawing via

    We've had the same question about Affinity as well and when I get some time I will do my best to have a quick look at that too. But the save settings here, and the ones for Adobe which have already been detailed on this forum should good you a good indication of what you are looking for.

    (3.75 KB)
    (40.6 KB)
  • On another note, someone else asked about the new Colour Change feature in v3.3 of VideoScribe and if you can build your own images in a way that would activate that feature when they are imported?
    Answer to this is yes! Interested? Check out my explaination on the Change the Colour of Images feature forum.

  • OK, so Affinity designer (desktop, not tried the iPad version) works as well with VideoScribe. 

    When you click New Document make sure you are setting up an Artboard based on Pixels and we always work on 1000px square as this minimises any line popping you may experience.

    Used their shape creator tool to make a heart in this example. Have one copy of it on Layer 1 which is a red fill only, no stroke. Another copy of the heart on Layer 2 which is the opposite so just the outline, no fill. Then used the pencil tool on layer 3 to create a freehand stroke to cover the whole thing and turned it transparent to reveal the fill layer underneath.

    This is all very standard for VideoScribe image creation and if you are not sure what I mean by this please watch this handy tutorial created by one of our customers showing what we mean in Illustrator.

    In terms of SVG Export settings for Affinity... I used Export rather than Save As and the standard out of the box 'SVG (for export)' preset does a pretty good job. Perfectionists will notice it does create a small amount of colour bleed consistent with the 'responsive' save setting being selected in Illustrator. So I would recommend for the perfect result that you select that that preset then click 'More...' and unselect the 'Set Viewbox' and 'Add line breaks' options at the bottom of the list.

    Again the Project file for Affinity, Exported SVG and screenshots of the document setup and export settings are attached to this post. 

    I've also published the finished article from VideoScribe and you can see a video of it drawing here -

    (12.9 KB)
  • Great stuff, Barry!!!

  • Hi im drawing svg with strokes in adobe illustrator cc 2016 but when i run it on video scribe ans increase the animate time the drawing hand stuck can you please help.

    Dimensions of svg in illustrator 3000px width and 2000px height

    scribe version 2.3.0

    please check the attach video so you can better understand

    thanks for help

    (1.26 MB)
  •  I'm curious why my strokes are not being drawn the same size in Videoscribe as they are set in Illustrator. Is there a max point size it can draw?

  •  Hi,

    Unless it has changed, I believe the maximum stroke size is about 250 or 255. 

    Your problem will most likely be resolved by following tip 7 highlighted in yellow on the first page of this thread (or possibly some of the other tips on the first page).

    The screenshot of the illustrator save options on the first page of the thread appears to be broken. It looks like this:

    if you have any embedded raster images you can choose "embed" instead of "link".

    so not use "export" or "save for web. Only use Save As...SVG.

    You can attach your SVG if you need more specific feedback.

    Hope that helps,

    Mike (videoscribe user)

  • Thanks Mike! That wasn't it. I had all of these settings.  VideoScribe is glitchy. I think it was hogging memory and I find that when it does that strange things happen then workarounds become dragon chasing. I simply restarted my machine. And that fixed the problem. Not a good solution when trying to be productive and not knowing when it's being glitchy versus a functionality feature or lack thereof. Thanks though!

  • A customer asked on a support ticket how to make a specific stroke in their image draw from right to left, rather than from left to right without having to re-do the stroke from scratch? 

    It's an fairly easy thing to do and I am sure some/most of you know this... but for those that don't seemed like a good tip to share.

    Within Illustrator select the stroke you want to be drawn the other way round. Then go to Object > Path > Reverse Patch Direction, this will keep the stroke in the same order in your image but just ensure it's drawn the other way round.

  • Is it possible to highlight some parts in my drawing, and i mean during the video?  (SVG-file) So i want a drawing, like a table, and after i show it i want to highlight some parts.

  • You could edit the original SVG to include a highlight or you could make a separate SVG for the highlighted part. Those options will require you to use illustrator or inkscape to create or edit SVG images.

    Or use an arrow element to point to the part, or a circle element to circle the part.

Login to post a comment