Hi,
1) Your image file size is huge. Using 1.23 MB images is likely to cause problems in videoscribe. An embedded jpg or png of your scanned image would probably produce a much smaller file size (if optimised properly) than converting the background art to vector. Auto tracing works better with solid colors and line art than with gradients and shading. (you can still draw the reveal trokes over the embedded image.)
2) the image you attached does not have color reveal strokes, so I guess you attached the wrong one. The one you attached is working as intended by videoscribe. You can attach the image with the color reveal strokes if you want help with that one.
-Mike (videoscribe user)
Hi Mike!
I took your advice and everything is working out perfectly.
My only remaining issue now is that the file is HUGE!...I followed all the instructions to save as an SVG but it is still massive. How do I resolve this?
I am pretty sure I have done this before quite awhile ago and found out how easily on here... But am not really seeing it.
I have a png. I want to put it in Inkscape, turn it into an svg that draws well.
This is what I remember on how I think I did it. I traced the outlines. Then made the lines thick enough that it covers all the outlines underneath. Then set the thick lines opacity to 0. Then when I plug into Videoscribe it draws the outline then if there is color the color shows up when done.
When I try doing this now, it shows everything within the invisible line (all lines and colors within it, although the line you see drawn is THINNER than the actual invisible line I created) that's being traced. So I'm doing something very wrong. It's something I did once or twice maybe up to two years ago so I can't remember. I learned how to do this on this site and am not seeing anything like that. All I see is how to create an svg from scratch or trace the lines of an image then deleting the original image so that the outline you traced is the actual visible image you use.
Okay Mike. Here are a couple actual svgs (I have an illustrator who made them for me and I guess can't figure this out). Can you tell me what the issue is and how to correct it? Thanks.
Besides drawing correctly, I notice it doesn't scale well in Videoscribe. Even at a normal size it looks more pixelated than in Inkscape. There's another svg in the video I'm making that I need to zoom way in on and it looks terrible.
The first two attached are from the set I'm having problems with. One draws but not right at all. The second just draws a couple small lines. The third is one I've had made in the past by another illustrator that works perfectly.
Hi, I'm having this same problem – the lines are thin while drawing, and then thicken (to the weight set in Illustrator) afterwards. My strokes are basic, black, no fills. I have tried reducing to basic appearance and then putting the colour and weight back on. There's no filters.
The save dialogue box has changed recently – so I'm guessing there's something missing in the way I'm saving...? (I'm using Illustrator CC). Any ideas? Thanks.
Mike Metcalf
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.
The transparent stroke method is described in this (old) official video (starting at 2:00 into the video): VideoScribe tutorial -- Creating your own SVGs
Related official support post: "Create your own images" <-see "method 2" in that post
Somwhat related official support post: "Fill an image with color using the hand"
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.
6) FIX WIDE IMAGES: if your (SVG, JPG, png or GIF) image is approximately as wide as it is high. If it is about twice as wide as it is high, it will probably import at a good size. If it is REALLY wide and not very high (like a horizontal line or a single long line of text), it will import HUGE because of the way videoscribe scales imported images. For really wide images, it can be helpful to add a transparent circle (use the ellipse tool with a zero-opacity fill and no stroke) around you wide image.
7) SAVING:
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