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)
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.

 


Login to post a comment