VideoScribe Help

Topic not covered?

Start a new topic

Making SVG Images Draw Well (2015 update)

 

 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

8) Regarding line thickness.


I've tried about 20 different combinations of many different settings and this is what I've found to work the best & not at all.


TL;DR - I haven't found a way to make the thickening completely disappear, BUT it seems making sure the 'responsive' button is checked is the best option to reduce the thickening effect.


Attached:

-SVG I used

-SVG Save Settings

-Document settings


Noticeable Improvement

SVG save settings: The key for me seems to be the responsive box in the SVG Save settings (see picture). When that was 'on' or 'checked' the picture still increased in size, but was hard to tell. (See video: https://youtu.be/CUZgErUXUvs)


Another thing, I noticed all of the effects were more noticeable when I was in the program editing then after I exported. Compare the video above (the exported video) to a screen capture I took from the editing portion of the software here: https://youtu.be/5OqHbEPkn0c


No Noticeable Affect (Did not seem to change the outcome)


Document Size: No Noticeable Effect - This does not definitely change the outcome in my tests. I tried variations of 400px x 400px vs. 1920px x 1080 px. Scaling artwork up or down to adjust for size. I didn't see a noticeable effect.


Stroke Width: Went from 10px to 2 px. Did not seem to effect it.


Ruler Points vs. Pixels: Tried using 1920 x 1080 in both points and pixels. No noticeable effects.


Stoke Cap: Tried both butt cap and round cap. No effect on the thickening (although I do like the round cap better FYI).


Older Adobe Illustrator Version: I downloaded and installed adobe version 6. No help. 


Saving as SVG 1.0 vs. SVG 1.1: Both versions seem to do the same effect.


DPI: Doesn't seem to matter if it is 300 or 72. Maybe if your image is really big I could see that making a difference.


Hopefully this helps,


nick


I have read all the posts, but still cannot get my SVG to render correctly. Here's what I did:

Using Adobe Draw on my iPad, I drew a few lines using the "basic round brush". The only available tools are brushes. 

I then sent that image to Adobe Illustrator, using Creative Cloud.

In Adobe Illustrator, I opened the image and saved it as an SVG using the setting described in this post (however 2 options are grayed out so I cannot check: "Output fewer <tspan> elements and Use <textPath> elements for Text on Path.

When I place this in Videoscribe it draws as outlines, not thick strokes like it was created. Below is a before and after to show how it was drawn and how it's appearing in Videoscribe.

Help.



hi,

The first tip in the first post in this thread explains what will happen if you use a paintbrush tool and that's the symptom you are seeing.

Your options are:
1) import your paintbrush stroked art into illustrator, select all the paths and convert them to basic stroked paths with no paintbrush style. (this will remove the tapering  style from the strokes but it will also make them draw correctly )
OR
2) import your paintbrush stroked art into illustrator and use the transparent stroke trick mentioned in the first post, to make your paintbrush style lines draw correctly.
OR
3) start over and draw your SVG in illustrator using the pencil or pen tool and basic stroked paths.

Hope that helps,
Mike (videoscribe user)

 

Thanks!
Regarding 8.) for Inkscribe users, who like me are stuck on newer versions:

I'm currently using Inkscribe v0.91 and have had the whole issue with the color being partially revealed while drawing. I've tested several suggestions (such as the Remove viewBox Tag, trying different path weights, even saving color and strokes in two different files) and never got any satisfying results.

The solution for me was to set all document units to pt (previously, I was using px), set the document size to 800x800 pt and using a stroke weight of 2pt. I haven't tested far enough to see if other line weights and document sizes work, but hopefully this is a starting point to work from for others like me.

 

For me, saving out of Illustrator CC with the specific settings described in the screenshot in Tip 7 solved the problem instantly.

Thanks a lot!!!

For INKSCAPE users, be sure to use the OLD version (version 0.48.5 available for free at inkscape.org) instead of the newer versions.  That will eliminate a lot of headaches and potential problems.

-Mike (videoscribe user)
Hi,
In case I have not already mentioned it in this thread, Making ellipses or rectangles using the ellipse tool  and rectangle tool (instead of drawing them manually with the pen or pencil tool) may cause unwanted results. Gradients may not display correctly as in the below example. With the rectangle tool, you may get unwanted black edges on unstroked color fills. Stick with the pen and pencil tools.

 


Controlling line drawing speed within an SVG:

The drawing speed of individual lines within an SVG is determined by the number of nodes in the line as well as the handle lengths of the nodes. You can add, delete, or manipulate the nodes throughout an SVG to make parts of it draw a little faster or slower than other parts.  In the below video, three lines of equal length are part of a single SVG image. The drawing speed of each line is determined by the number of nodes and the handle lengths:




-Mike (videoscribe user)

abbreviated list of ways to prepare images for videoscribe:

Importing a jpg or png into illustrator and just saving it as an SVG will not result in a "real" working SVG. It's sort of like taking a recipe card for a cake and putting it in a box marked "cake" and expecting it to behave like a real cake.  You've just changed the packaging without changing the nature of the card. If you want to make a real cake or an SVG, you'll need to follow some steps, and the quality of the finished product  will depend on the steps you take, your patience, experience and skill.

EASIEST OPTIONS Often the simplest solution is the best one.


option 1) BEST RESULTS:  use actual vector clip art in SVG format. SVGstudio is a good source, or use the image search within videoscribe to browse images for sale by other users (red tag images in the library). You can also buy SVG art elsewhere online (the quality of the results may vary if you are using art that was not specifically prepared for videoscribe) instead of jpg or png images.

option 2) MEDIUM RESULTS: use jpg or png images and simply import them directly into videoscribe. Videoscribe will present you with up to 6 drawing style options each time you import a new jpg or png image. None of these draw as well as a properly prepared SVG image but they may be pleasing enough to use.

option 3) MOVE-IN: use "move-in" instead of "draw" to animate jpg or png images. A hand will just move the items onto the canvas (or you can choose "no hand"


option 4) DON'T:  import a jpg or png into illustrator or inkscape and then just save it as an SVG with no other modification. The results will not draw



INTERMEDIATE OPTIONS below require some understanding of adobe illustrator (or inkscape). Expect a learning period if you are just starting out with those programs. You'll probably also need to read this whole thread for more detailed explanations and important settings.


option 5 ) sketch something from scratch using the pen or pencil tool and a basic stroked path. then save it as an SVG.. This is probably the simplest way to make a working SVG. It will draw in the same order that you drew it.  The number of available options and possible results are too many to list here.


option 6) import a jpg or png and manually trace (re-draw) the whole image using the pen or pencil tool with a basic stroked path to create a completely new image, then delete the jpg or png image and save as an SVG


ADVANCED OPTIONS The results will really vary depending on your understanding of SVGs, and videoscribe, and your level of understanding of illustrator or inkscape.


option 7) import your jpg or png into illustrator and use image trace (or live trace or whatever it is called in your version) to convert the image to vector art then save as SVG. You will have options to convert to strokes and/or fills. STROKES are what the videoscribe hand follows when it draws an image, so you will want strokes.  This is a quick and dirty way to convert to vector art. The results may or may not draw well depending on the image you are converting and the settings you use.

option 8) use method number 4 above but convert to fills only, and then manually draw stroked paths over the fills, using the pen or pencil tool and no special brush styles. so the videoscribe hand will know what to draw. Make sure the strokes are wide enough to cover any art that you wish to see drawn. Then change the opacity of the stroked paths to zero and save as SVG. This method gives you good control over the movement of the hand, but it is going to take a lot of trial and error. start with very simple images like a stick man or a smiley face before you move on to more complicated images.

option 9) import a jpg or png and DON'T covert it to vector art, but just draw stroked paths over it and change their opacity to zero and save it as an SVG with the image embedded.  This can look good if you learn to do it well. again, it will take some trial and error.




so complicated... please suggest a tool for iPad pro with apple pencil that allows you to draw an SVG and export it to videoscribe IN THE SAME ORDER THAT IT WAS DRAWN.  thanks!


Pretty sure autodesk graphic (formerly iDraw) has been recommended by some users. You may have to search the forums or do some trial and error to find the right settings.

-Mike (videoscribe user)

 

noticed a couple of things while working on some odd-case images (not fully tested and confirmed yet):

1) if you use a stroked path with butt-caps instead of round caps, videoscribe will still reveal any fill color that would be revealed if you were using round caps.
for example, if you have an SVG of a black line with flat ends (butt caps) on top of a red filled shape, then videoscribe will draw a little rounded red cap at each end of the black line
for reveal strokes, they will always behave as rounded caps even if your revel stroke was made with butt caps

2) it seems as though videoscribe will draw any stroke that is larger than 255 as if it was 255. I'm estimating the number as 255 or 256 based on limited testing with strokes of 200, 250 and 300

There probably are not many cases in which you would need a stroke size larger than 300 but it's an interesting quirk. I'll probably test to confirm them at a later time.

-Mike (videoscribe user)


 

Whoa, this is way more involved than I was led to believe.  I would have gone a different direction if I were informed of these time expenditures from the outset, before signing on for a year.   


I was to use this genre as an augmentation to other venues of advertising, but time is too valuable to spend on recreating every custom SVG image to preform as an independent program.  


Are there any current efforts to streamline this process from the company's side (your side)?   I've just noticed the last update to Videoscribe is now over a year and half old.  (Wed, 25 Mar, 2015)  That's not a good sign for a successful company with a complex program.

When I rewrite this thread I'll keep in mind your concerns in case other users are feeling overwhelmed by SVGs.


1) The latest version of Videoscribe was released September 2016, less than 3 months ago.
2) No Videoscribe user is obligated to learn about making SVGs in order to use the program. This thread explores an OPTION for additional customization that can be as simple or as complicated as you choose to make it. Any  Videoscribe user can just use videoscribe with the images that are already in the library along with more images from SVG studios or other sources, or even png and jpg images. Those images require no special skills, art knowledge or understanding of how SVG images work.
3) If you decide you want to make your own SVGs, you can choose the simplest method ("USE THE PEN OR PENCIL TOOL, with no additional effects AND USE THE SAVE OPTION SUGGESTED IN THIS THREAD")... or you can read the whole thread if you want to exert more control over your SVGs and incorporate special styles and behaviours.
4) If you have already made an SVG or gotten one from another source, and it is not drawing properly in videoscribe, this thread may help you figure out the problem and solve it.
5) (I don't work for the company)

Hope that helps,
-Mike (videoscribe user)

 

Hi everyone,


I read through this thread several times, and cannot seem to figure out 1 thing, or maybe it just is not touched upon...


I have a scanned image. I need videoscribe to reveal the scanned image in the order of 1) drawing the outline 2) coloring in the image.


I am using adobe illustrator. I was able to trace the image manually but then the fill just popped in at the end which is not "realistic". Then i attempted to add a second layer above that for the fill, and it completely skipped over the drawing of the outline.


Any help would be greatly appreciated.


Thank you


Login to post a comment