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!!!