Topic not covered?

Making SVG Images Draw Well (2015 update)

M

Mike Metcalf

Started a topic Tue, 24 Nov, 2015 at 3:25 AM

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). Most of these tips are
for Adobe Illustrator but may work similarly in inkscape or
other programs

1) USE THE PEN OR PENCIL TOOL (or the paintbrush with a trick):

The pen and pencil tools
create stroked paths and that is what videoscribe "draws" by default.
The paintbrush tool makes lines that videoscribe considers to be fills
instead of paths, so it tends to "outline" them if it can't find any
actual stroked paths in the SVG.

If
you want to use the paintbrush tool for your lines, you can make
videoscribe appear to draw the paintbrush lines the same as stroked
paths by drawing a
stroked path OVER (covering) the paintbrush line and then making the
stroked path
transparent. In fact, in most cases, you can just select and DUPLICATE
your paintbrush path(s), convert the duplicate path to a regular basic
stroked path and then set the opacity of it to zero.

2) SIMPLER IS BETTER (if you are having any problems): The simplest, most bug-free SVGs will generally be well under 100KB and contain only stroked
paths and/or filled paths. It may be best to avoid problematic data like
embedded images, masking or clipping paths, or glows or other
effects which may contribute to freezes
or crashes. A hand drawn SVG will generally "draw" better than an jpg that
has been "auto traced" to become vector art. If you auto trace, try to
adjust the settings to provide smoother lines instead of hundred and
hundreds of nodes (also called anchor points).

3) DRAWING ORDER and color fills:In
general, videoscribe will draw lines (stroked paths) in the same order
that they were drawn when the SVG was made. If you use auto trace to
convert an image to stroked paths then the drawing order may seem
somewhat arbitrary and the drawing hand may jump all around the image
while drawing. Using groups or any type of subfolders in your adobe
illustrator SVG may affect
the drawing order. filled areas appear last by default. You can use the
zero opacity
trick mentioned in tip #1 to make videoscribe "draw" the filled colors.
another related link is at the bottom of this list.

4) GROUPS, SUBFOLDERS, NESTED LAYERS etc:
It may be best to just to avoid them because they may affect the
drawing order in unexpected ways (related thread: Layers Not Drawn In Order
). Drag all paths out of subfolders/sub
layers/groups into the root folder/layer. If you are a more advanced
user, you can use subfolders to do a few tricks but for beginners they
will probably just be a headache.

5) DELETE ALL HIDDEN LAYERS:
from SVGs before you save them. (hidden layers
increase file size. larger file sizes require more memory to process.)
If you import a huge image and then trace it and hide it... just delete
it before saving to reduce file size. Also there are are some youtube
tutorials (not official videoscribe
tutorials) that mention leaving embedded JPGs or pngs or other images in
your SVG files. If you do that, be sure to optimize your images (to
reduce image size and file size to appropriate levels) before importing
them. Otherwise, they may contribute to freezing and crashing.

NOTE: starting in about 2013, with ADOBE CREATIVE CLOUD, (and the
corresponding versions of Inkscape I think,) the programs include some
data in SVGs that can cause a variety of undesirable effects in
videoscribe (black blobs or black fill colors, artifacts where lines intersect, SVGs that cause various bugs in the videoscribe user interface...).
For inkscape, I'd probably recommend that you simply install the older
version (0.48 I believe) on their downloads page. For whatever version
of Illustrator you use, here are the recommended SVG save settings :

Regarding Embed or Link:
If you happen to have a jpg or png or other images included
in your SVG, selecting "Embed" will include them in the saved SVG, which
can be a useful, simple way to incorporate a photo or shaded
illustration with your own vector line art. (However, be aware that
embedding images increases file size and might
possibly contribute to slowdowns or
freezes, so you may want to use them sparingly or at least only embed
images with smaller file sizes. ) Selecting "Link" instead of "embed"
will essentially kick out any inserted images and save them as separate
files which will make your SVG smaller, but videoscribe will NOT display the
linked images.

According to a previous thread, Presentation Attributes" can also be set to "Style Attributes"

Hope that helps,

Mike (VideoScribe user)

1 person has this question

M

Mike Metcalf

On Sat, 28 Nov, 2015 at 3:56 PM

8) AVOID LINE THICKENING when the drawing is finished.I have not done sufficient testing to confirm that any of these work, but here are some suggestions from other threads: A) In illustrator, set your document units to points instead of pixelsB) use whole number stroke sizes like 2,3,6 instead of decimals like 1.5, .5, .3C) thicker stroke sizes may make the thickening less noticableD) make your document size a 16:9 ratio (such as 1920x1080 or 800x450) and scale your vector art to fit that size.

-Mike (videoscribe user)

Barry Radford

On Tue, 1 Dec, 2015 at 12:00 PM
Admin

Just an update on section 8)

We tend to make our Library images with a 2 point stroke and this is the ideal level for the application and tends not to have this effect.

Where you don't want to use a 2 point stroke you can increase the default image quality when importing images that suffer from this issue and this will reduce the effect. I would not leave the image quality at a exceptionally high rate for all images as you would use a lot of RAM that way and limit your scribe size but could bump it up for the images with issues.

D

Dan B

On Wed, 2 Dec, 2015 at 7:46 PM

Thanks for the input Mike. I learn a lot from you and should thank you more often. Just want you to know, even though I don't always comment, I always read your data. It is always good info.

Thanks

M

Mike Metcalf

On Wed, 2 Dec, 2015 at 8:44 PM

Thank you Barry and Thank you Dan!

c

chris east

On Mon, 8 Feb, 2016 at 6:21 PM

Hi Forumers - I'm having a little bit of a frustrating experience here and perhaps the workflow mentioned above is the only option but here goes...

- am using AI Trace and Expand feature because it is quick and gives result which I'm looking for...

- the tracing method above is very time consuming and not very pretty

can I use Trace and Expand, create an SVG and then avoid the strange fill pop which I have at the moment when the animation completes?

Many thanks, if you can offer any help.

Chris

M

Mike Metcalf

On Mon, 8 Feb, 2016 at 8:25 PM

HI,

In general, auto tracing does not produce SVG images that draw well in videoscribe.

if your art is something like a stick figure or very clean thin line art, you might be able to autotrace it with settings that produce strokes instead of fills for pretty good results. The more complex, colored and shaded an image becomes, the more difficult it will be to make it draw well in videoscribe.

The methods described in the original list actually look great if done well, but
they do require time and effort. If you have experience with digital art and drawing, that's quite a help too.

I believe you can hire artists through animole (link at bottom of this page) if you are struggling with the SVG process. or you may be able to find more SVGs in SVG studio (link at bottom of page) or from free sources online (google)

-Mike

(videoscribe user)

c

chris east

On Mon, 8 Feb, 2016 at 8:27 PM

Thanks Mike. Understood. I'll see what I can come up with!
C

M

Marjo Roos

On Tue, 9 Feb, 2016 at 3:26 PM

Hi Chris,

There is a tracing preset in Adobe Illustrator that traces only the lines and not the fills of an image. This usually gives a decent result. You still have to manually arrange the drawing order of the strokes afterwards, though.

I've attached a screenshot of the settings that worked for me, you might have to experience a bit for your images.

I'm aiming to create Vector Art from video clips, which I've paused and exported a still image from. The image I have is nice... but VideoScribe likes to draw the whole thing (strokes) and then plop a great big final Fill on the final frame of the clip... nasty stuff... and very frustrating.

Seems as though VideoScribe isn't built for this in mind, though, eh?

Cheers

M

Marjo Roos

On Tue, 9 Feb, 2016 at 6:09 PM

Sorry to hear that.

But there are great tips on this forum (from Mike and others) on how to make it look like the fill is part is drawn/painted as well. Basically put an invisible stroke (opacity of 0%) that covers the 'fill part' on top of the 'fill part' and VideoScribe will follow this path and thus reveal the color underneath it. Search for it in the community answers.

Good luck!

c

chris east

On Tue, 9 Feb, 2016 at 6:29 PM

Thanks Marjo,

I'll look into this workflow but - due to taking stills from videos - I'm using rather detailed pictures... Chances are that I'll be there for a few days per pic!!!

Shame that someone at VideoScribe doesn't just add the one line of code in the program that would be required to stop the fill being created.

Thanks again, though.

C

J

Justina rosu

On Thu, 10 Mar, 2016 at 10:32 AM

HI, thank you for this article it's very helpful.. I have one question please. I am importing images to AI from shutter stock to use in the whiteboard so I have not had an influence on the simplicity of anchor points or order - currently the hand has too much to do and is very distracting - how can I change the set up in AI so that their are less anchor points and if I can correct the order of drawing to just be a left to right? You help is extremely appreciated.