Sparkol Help

Topic not covered?

Start a new topic

Making SVG Images Draw Well (2017 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). 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)
-Mike (videoscribe user)

1 person has this question
If you are troubleshooting a problematic SVG or if you are interested in making more complex SVG images with text or colors that are drawn by the hand, or other effects, please continue reading. Note: This is an updated, consolidated and edited version of one or more older threads including: Making SVG Images Draw Well (2015 update)


1) USE THE PEN OR PENCIL TOOL (or the paintbrush with a trick):
I would say that VideoScribe's core strength is to read an SVG image file and make a basic stroked path look as though it is a marker line being drawn on a whiteboard.

When you make an SVG, 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.

As mentioned in Tip 0, if you use the pen tool, make sure to click and drag when you create each point/node in your drawing. The result will be smoother curves that draw better in videoscribe. If you are inexperienced with vector tools you may struggle with the pen and pencil tools for a while, but there are many tutorials on youtube and other websites to help you get on track.

If you want to use the paintbrush tool for your lines, or if you want a calligraphy style or other styles, you can make videoscribe appear to draw the paintbrush lines the same way it draws basic stroked paths. The technique requires you to create a basic stroked path OVER (covering) the paintbrush line and then make 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. If you do it correctly, the Videoscribe hand will follow the transparent basic path while revealing the paintbrush art.

The  transparent stroke method is described in this official video (starting at 2:00 into the video): VideoScribe tutorial -- Creating your own SVGs (it is an older video so it features an older version of videoscribe)
Related official support post: "Instant Answers-Create your own images" <-see "method 2" in that post
Somewhat 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). I believe that both illustrator and inkscape have "simplify" to reduce the number of nodes in a selected path, if your node count seems too high.


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 (here is a 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. More memory usage can result in problems.) 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 memory related problems such as freezing and crashing.


6) FIX WIDE IMAGES: When videoscribe imports an image, it scales the image based on the image height, with no consideration for the image width. Therefore, if your (SVG, JPG, png or GIF) image is approximately as wide as it is high, or if it is about twice as wide as it is high, it will probably import at a good size. REALLY wide images will import HUGE (link to related thread: Resizing a line). REALLY tall images will import small.  For really wide images, it can be helpful to add a transparent circle (you can use the ellipse tool with a zero-opacity fill and no stroke) around your wide image. This method causes videoscribe to consider your image to be approximately as high as it is wide, so the import size is more manageable.

Interesting side note: If you take an SVG of something long and thin like a pencil, and save one copy of the SVG with the pencil oriented vertically and another copy with it oriented horizontally, the horizontal one will import huge and the vertical one will import small. If you scale them both to the same size, the horizontal one will be sharper and the vertical one will be blurrier. (see the Resizing a Line link above)

(to be continued in my next reply)

 

7) SAVING:
NOTE: starting in about 2013, with ADOBE CREATIVE CLOUD, (and the corresponding versions of Inkscape) Illustrator and Inkscape updated their pen and pencil tools, their save settings and the format of their SVG files. They now include some data in SVGs that can cause a variety of undesirable effects in videoscribe (black blobs, black fill colors, color strokes appearing black, artifacts where lines intersect, incorrect stroke width, and sometimes problems with the timeline or other videoscribe glitches).

For Inkscape,
option 1
is to use the older version of inkscape (0.48.5 I believe) which is still on their downloads page at inkscape.org (for free) at the time of this post.
option 2: in another thread Matthew posted: "Inkscape 0.91 works fine, you just need to make sure that the units are set to pixels in the document properties. Changing this will avoid an issue where the hand reveals too much when drawing the outline stroke and intersecting lines and fill being visible when drawing the outline.  File -> Document Properties… (or Shift+Ctrl+D).  Under ‘Custom Size’ change the units to pixels (px) and make sure the default units are set to pixels." (I have not tested this option and I have not seen any user feedback on it yet):



For Illustrator,
Illustrator CS6 and older seem to provide simpler, videoscribe -friendly SVGs with a variety of settings, but refer to the screenshot below if in doubt.
For Illustrator CC and newer, 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 other threads, "Presentation Attributes" can also be set to "Style Attributes"


(to be continued in my next reply)
-Mike (videoscribe user)

 

 8) FIX OR AVOID LINE THICKENING (sometimes called the "pop" effect) that occurs the moment when the drawing is finished.


This is a popular topic and I don't think we have a identified a simple solution that seems to work for everyone in all cases, but there has been a bit of a breakthrough (thanks to Nicholas Wright and anyone else who mentioned it in previous threads).


If you have an SVG that just really pops at the end... this might fix it.


If your SVG is just stroked paths with no fills, it seems like checking the "responsive" option in Illustrator CC (regular "save-as...") settings will remove a bit of code that affects the pop at the end. I do not have illustrator CC but I manually edited an SVG in a text editor and you can see the before and after versions in the video below:



The code I edited in that SVG is shown below (I removed the width and height tags and I edited the viewbox and enable-background values):



It is possible that less editing or different editing would also have the desired effect. I'm not sure, so I just posted what I have found so far. I think the 0,0 coordinates, in the code screenshot above, indicate the placement of the upper left corner of the image and the 1600 x 900 is probably the document size. While I was experimenting with various SVGs, there were some cases in which I did not have to edit the viewbox and enable-background tags to get good results in videoscribe. It might be important that those tags be populated with whole numbers instead of decimals. I'm not sure.


I believe I ran into glitches when I used this method on images with color fills. I have to go back and do further testing at some point to confirm that and identify a solution.


I'm pretty sure the pop problem can be solved within illustrator and inkscape (without editing SVG code or using "responsive") but the solution probably involves 2 or more settings or options that need to be implemented in a specific way that I have not seen explained clearly yet.




ADDITIONAL NOTES TO CONSIDER:

I think a default image quality setting in Videoscribe of about 800 or 1000 should be sufficient. The minimum is 400 I think, and the maximum is 4000 which will almost certainly result in memory related problems.


if your SVG contains embedded images or if the "pop" you are seeing is a color fill appearing after the strokes have been drawn, then your problem may not be the one being discussed in this tip.


Quote from Barry Radford in a previous thread:

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.


Here are some suggestions from other threads although I have not found any of them to work consistently:

A) In illustrator, set your document units to points instead of pixels
B) use whole number stroke sizes like 2,3,6 instead of decimals like 1.5, .5, .3
C) thicker stroke sizes may make the thickening less noticeable
D) make your document size a 16:9 ratio (such as 1600x900, 1920x1080, or 800x450) and scale your vector art to fit that size.



(to be continued)
-Mike (videoscribe user)

Mike - this is excellent, thanks!

I am just about to try drawing stick figures, using Inkscape.

Do you draw with a mouse, or is there a better, more simple way to do it using a stylus of some type. If so, as I'm not really a PC person, where does one get a stylus for PCs and does it need extra software and so on?

Hopefully you or someone else can help me out here!

Thanks

Hi Bruce,
I use a device called a Wacom tablet with a stylus. I usually do a rough sketch in photoshop and then import it into adobe illustrator to trace it manually to make my SVGs.

Wacom is the brand name, there are a variety of other brands such as monoprice, ugee, huion, and more. The less expensive models just have a drawing surface. More expensive ones have a computer display built into the drawing surface so you are basically drawing on your computer screen. If you search google, or amazon.com, or youtube for "digital drawing tablet" you can probably find many opinions, videos and user reviews of various brands and models. Prices can range from about $40 to about $2000

If you draw digitally a lot, having some kind of tablet can be a big benefit, and make your lines smoother. However, tablets have a bit of a learning curve, so if you don't want to learn a new tool, it may be better to stick with the mouse. Whether you use a stylus or a mouse, you can adjust and modify the stroked paths of an SVG pretty easily once you become familiar with illustrator or inkscape or most vector art programs.

-Mike (videoscribe user)

 

UPDATE to Tip 6) Fix Wide Images:
This workaround is no longer necessary. It looks a though the algorithm for sizing images imported into Videoscribe has been changed (I believe the change occurred in version 2.3.7, but it may have been in a previous release).

Previously, videoscribe sized imported images by scaling the vertical measurement of the image to a percentage of the vertical measurment of the visible canvas. Now videoscribe considers both the vertical measurement AND the horizontal measurement of an image and sizes the image so that the larger of those two measurements will fill a certain percentage of the visible canvas height. (In other words, videoscribe now sizes imported images so that the image width and image height are both smaller than the height of the visible canvas. The width of the canvas does not seem to be considered.)

A benefit of this change is that images with a large horizontal measurement and a small vertical measurement, such as the clothesline image in the library will no longer import HUGE in version 2.3.7.

It also means that wider images will generally import smaller than before, which might affect image sharpness to a small degree, because more images will import smaller and need to be scaled larger.

You can still use a transparent ellipse with no stroke to shrink down images that import larger than desired, but it probably won't be necessary as often now.

-Mike

 

Just FYI, the way this works (the way images are sized when added to the canvas) was changed in VideoScribe version 2.3.0. So the way it works now is the same as it has been since v2.3.0.

Thanks Matthew! That makes sense. I skipped several of the recent updates.

 

I am a new user to VideoScribe. I need to make video scribe for my maths and science for my students. Please guide how to make these happen. 


I can buy any software or hardware (if necessary). 

You won't have to buy anything, but it will require a little extra work using either Inkscape (which is free at inkscape.org.) or Adobe illustrator or a similar vector application.

The process is described in the following thread: Make Any Font, Text or Equation Draw Well (2017)

I hope the explanation makes sense. I would recommend trying it with a short equation first until you are sure you understand how to do it correctly, and it "draws" well in videoscribe.
-Mike (videoscribe user)

 

TIP 9) Options for using raster images in videoscribe (png, jpg etc) listed in order of difficulty and from worst to best "draw quality":


I'd recommend that you test these options with a simple raster image like a smiley face or stick man until you understand how they all work.


Option1: IMPORT. just import your png or jpg image directly into videoscribe and choose from videoscribe's default options for drawing the image in videoscribe. This is the easiest option and it will work well enough in some cases. if you do not like the results then you can test some of the other options. Related guide: http://help.videoscribe.co/support/solutions/articles/1000033711-import-images


Option2: AUTOTRACE. Import the image (jpg, png, bmp, tiff or other file types) into inkscape or illustrator (or other programs). Select the imported image and use whatever autotrace options are available in your version of the program. You can google or youtube search the program name along with the word "autotrace" for instructions or tutorials if you need them. You may be offered options to produce strokes and/or fills. Keep in mind videoscribe will "draw" the stroked paths but the fills will just appear unless you follow some extra steps to cover the filled areas with transparent stroked paths (more on that later). Option2 (Auto tracing) may produce better results than option1 in some cases but for better results you will need to look at the following options. Related youtube link: https://www.youtube.com/watch?v=KM79noMdB5k


Option3: REVEAL STROKES. Manually trace your raster image with transparent stroked paths.

If you want to control the way an imported image works (like a png or a jpg), you can embed it in an SVG. To make it draw well, you will need to trace it with the pen (bezier) or pencil tool . Make basic stroked paths wide enough to cover the lines of your embedded image. The stroked paths can be 100% opaque or a lower percentage so you can see the raster image underneath. (You have to create these stroked paths because later, after you save the SVG and import it into videoscribe, the videoscribe hand will follow the paths that you are creating, and any parts of the image covered by your stroked paths will be revealed.) When you have drawn all of your stroked paths and covered your raster image, change the stroke opacity of all of your paths to 0% (or alpha=0% if you are using inkscape). When you save your SVG, follow the save options mentioned in TIP "7) SAVING" and be sure to select "embed", because you will need to embed your raster image in the SVG for this option3 to work correctly. Note: embedded images increase file size and if your embedded image is blurry or pixelated, it will look blurry or pixelated in videoscribe.


Option4: COMBINATION of AUTOTRACE AND REVEAL STROKES: use a combination of option2 and option3. to convert your image to filled paths then draw reveal strokes over the filled paths.  This works well if your raster image contains few colors and no gradients or shading (like a drawing of a smiley face made with a black marker on white paper for example). The benefit is that your entire file is vector art and scalable. The resulting file may be a smaller file size and better quality than just using option 3 in some cases.


Option5: Manual REDRAW. Manually redraw the whole image as vector paths. Similar to option3, but your stroked paths will remain at 100% opacity and they will be shown when videoscribe draws them. After you have redrawn your whole image as stroked paths (and filled color areas if you want to use color fills), you can delete the raster image and save your SVG using the setting recommended in Tip "7) SAVING"

Related youtube video: https://www.youtube.com/watch?v=OcQpkaQCFCA

Related Guide: http://blog.videoscribe.co/how-to-make-a-svg-for-videoscribe-in-adobe-illustrator/



I'll mention again that it is useful to practice with a simple image before tackling a complex image that might take a lot of time to prepare.


Hope that helps,

Mike (videoscribe user)



Addendum to tip 7)  IMPORTANT SAVING NOTE! Dont EXPORT or OPTIMIZE.  Another user just reminded me: It, is important that you use "File>Save as> SVG"  (or the closest variation of that option in your program of choice). In inkscape , I think it is "file>save as>plain SVG".  Do NOT use any save menu options with the word "export" or "optimized" or "compressed". Optimized SVGs may contain formatting that causes problems in videoscribe.

-Mike (videoscribe user)

 

We've released a couple of new image creation blogs which I thought I would share here:

- Adobe Illustrator - http://blog.videoscribe.co/convert-images-for-videoscribe-with-adobe-illustrator/

- Inkscape - http://blog.videoscribe.co/convert-your-holiday-snaps-to-svgs-for-videoscribe/

Good stuff!

 


Login to post a comment