QUESTION: What is the best way to make SVG images that draw properly in VideoScribe?
ANSWER: I believe the tips below will help you get the best results with the fewest problems (such as improperly drawn images, visual glitches, interface and timeline problems, slow downs, freezing, crashing or failure to save, load, or render). Some terms or phrasing used in this thread may be slightly different among various versions of inkscape or illustrator.
TIP 0) If you want the simplest method for making SVG images for VideoScribe, here it is:
- Use inkscape or Illustrator. If you use other programs you will probably have unexpected results.
- Use the pen tool or the pencil tool to create BASIC stroked paths with no styles, no masks, no paintbrush tool, no calligraphy pen, no effects of any kind.
- If you use the pen tool, please click&drag when you create each point (instead of just clicking) so that the control handles for each point will be extended and the paths will draw more smoothly.
- Delete any extra layers or other parts that will not be drawn (instead of just hiding them) before you save your SVG for videoscribe.
- If you use a version of inkscape or Illustrator created after 2012, see TIP 7 later in this thread for information about the best save settings to prevent glitches.
- Use "SAVE AS... SVG". Don't "Export for web".
That's all you really need to know if you want to keep it simple!
(Continue reading for more complex techniques)
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.
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 https://sho.co/1BOEJ.
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.
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 - https://sho.co/1BOF4
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
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?
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.