VideoScribe Help

Topic not covered?

Start a new topic

How to keep line thickness in SVG

Hi all,

When I draw a picture in Illustrator with the pencil tool set at 10 px (or points), and save it as an SVG it seems like VS draws the picture with a thinner thickness, and corrects this as soon as the 'drawing' is finished.

Is there any way to correct this, besides the 'hidden line' trick I've seen so often which always uses a bitmap to display after 'drawing' (and doesn't render that nice, compared to 100% vector lines).

I really like to know.

To summarize my findings and some findings from other threads:

1) all SVGs will usually show at least a slight thickening after they are drawn. SVGs that fill a rectangular ( approximately 16:9)  area may show the symptom less. Thicker lines may show the symptom less.
2) SVGs made with illustrator CC will draw significantly thinner and then show a significantly worse thickening after drawing (due to the new pen and pencil tools in that version of illustrator.
3) if you use CC, then simply opening and resaving the SVG in an older version of illustrator or in inkscape will fix problem 2 but not problem 1. (I'm pretty sure that embed/link do not have any effect for this symptom, it is the version of illustrator that makes a difference.)

related threads:
http://help.videoscribe.co/support/discussions/topics/1000031362
http://help.videoscribe.co/support/discussions/topics/1000033902

-Mike (videoscribe user)

 

My problem here is slightly different. It seems to matter not what line wight I choose in CS4 illustrator, VS seems to randomly assign a line weight to my file when imported. I have tried at various sizes of export, and I have tried various line weights. I can find no consistency among the trials. Further, am I right in my observation that if I am zoomed out when I import an image, VS scales it differently than if I am zoomed in? And does this affect the line weight VS selects for the image?

If so, then the answer is to assemble all images before importing ANYTHING (not quite a workable solution, really, as images change and clients add more along the way). At least then the images would be consistent.

Further, I have noticed that VS only seems to understand increments of .5 pt, when it acknowledges line weight at all...is this true?

Thanks,

-Mark.

 

I'm still really struggling to thicken up my SVG lines, attached is an example.


I think you may be using the wrong tool to draw the lines. In the image you attached there is a stroke with a fill and the stroke goes all the way around the outside of the fill.


You need to draw a single stroke using the pencil tool and increase the stroke width width.


If you are using a bitmap image and then using some kind of trace tool you will also get this undesirable effect.


If you need to use a bitmap then you need to trace over it using the pencil tool, increase the stroke width and make the line transparent. Then, when you import into VideoScribe the hand will follow the path of the invisible stroke and reveal the bitmap image beneath.

Hi Matthew


Thanks for the reply, I feel like such a fool! I was using the Paintbrush tool to draw freehand rather than that pencil tool. Works fine now.


Thanks

Now, a year or more after this bug was posted, the problem still exists. Leaving aside the issue that Sparkol seems unwilling (or unable) to fix a pretty major bug, are there any definitive workarounds? I've tried loading the file and resaving in Inkscape, Illustrator CC, Illustrator CC 2014, and Affinity Designer, and I still get the "pop." Sparkol tech support suggested adding internal anchors to my, rather simple, test, but that didn't help. Has anybody actually solved this one?

Unfortunately, I think the issue your taking about is endemic to Flash, the underlying programming platform of VS. Flash has had this problem, to varying degrees over the years as well. Objects in motion have a different perceived weight than objects at rest on the canvas. Add I remember, it had something to do with sub-pixel addressing, and was seen to varying degrees, depending on original size of element. So, for what it's worth, you may have better luck trying to ensure that the drawing you import is at the size you want to render it. Now that would be easier with numerical controls for zoom and resize... oh yeah, not yet. -Mark.

I have tested every permutation of the threads on this subject and am frustrated with the line THICKENING after the draw is complete.  The last post was 6 months ago - and no recent posts.  Has anyone solved it?  Surely this has been resolved by now...

There are lots of really successful examples on the scribe wall that do not exhibit this problem. Someone out there has an answer - or at least some kind of work-around.  However the convoluted the process might be, I just need to know what the secret is.

David, there are some useful suggestions here http://help.videoscribe.co/support/discussions/topics/1000070696 which I have just added to

The key for me to fix this issue was the 'responsive' setting when saving as an SVG. As soon as I ticked that off, my problems ceased.

if an SVG looks fuzzy, perhaps you should attach it here for inspection.

Please provide a clearer description of the problem so someone here can suggest an appropriate solution.

-Mike (videoscribe user)

 

It isn't fuzziness of the SVG itself. It is the lineweight as the image is drawn on the the VideoScribe canvas, and the lineweight after it "settles in." It is thinner during the drawing, then thicker after it finishes. The result is a noticeable "pop" in lineweight thickness before the next image is drawn.

I have learned to live with it. At best, VideoScribe approximates the look of hand-drawn whiteboard animation, as SVGs cannot natively include alpha or strokeweight variation along a path (so a true marker look isn't possible without drawing every image twice - once in Photoshop, and once in AI for the SVG overlay, and even then the overhead makes VS very, very unresponsive). So, as long as my clients don't complain about it, I guess it's academic, huh?

-Mark.

 

Yeah the pop is a pain.

Sometimes I get that pop and sometimes I don't. I suspect that by following about 4 or 5 rules for every SVG the pop can be eliminated but I have not set aside enough free time to do testing.
if I have time, I'll start a thread dealing specifically with that problem.

Here is an example of SVGs using only basic stroked paths that draw without any fuzzyness or pop.

(the video was made to demonstrate a different bug)





there are about 6 or 8 suggestions regarding the "pop" in this thread too:
Making SVG Images Draw Well (2015 update)


a simple trick to hide the pop is to arrange every drawing so that the last line is in the upper left corner and the hand will hide the pop

comparison video (pop and no pop):
 


-Mike (videoscribe user)

 

Mark, This is a long-standing bug, and none of the fixes discussed on this forum or elsewhere actually resolve it reliably, though all of them seem to help in some contexts.  I talked to a Sparkol developer about a year ago, and he said that fixing it would effectively require them to redo the entire rendering engine, and that Sparkol wasn't about to do that. In other words, yes it's a serious bug and, no, they have no intent to ever fix it. Maybe if enough people complain, they'll change their tune, but at year ago, at least, their attitude was "deal with it." A related problem is that, when two lines cross, you'll see little stubs of the crossing line when the initial line is drawn.


I've found that a few things do help, though don't eliminate the problem entirely. First, size the image rather large (I just put it at 1920x1080. Next, set the units in illustrator to pixels, not points. I typically use 6 or 10 pixels. I've found that some line widths work better than others, but the behavior is inconsistent. When you save, choose to embed images even if you're drawing doesn't have any images in it. I've tried saving to various SVG versions, but that has no impact. 

Mike:

Your ingenuity never ceases to delight. Of course, covering up their mistakes when you can is the way to go!! ;)

It is sad that we have to do that, however. And of course, many of my clients don't actually want the hand, just the magic etch-a-sketch, so I have no misdirection to exploit! ;(

Curious, though, how did you get the intersecting lines NOT to show the bumps? And further, why no pop?

Allen:

Sigh. It surprises me not in the least. This, and other inconveniences, are what will keep this promising product from ever becoming a truly professional tool. When one must constantly workaround design flaws in one's tools, it becomes an exercise in futility.

What really clinches it, however, is the fact that there is no truly viable alternative out in the marketplace. That alone will keep them from making any meaningful progress in the multitude of bugs and flaws "under the hood." Why should they? We're still using the program anyway!

-Mark.

 


Login to post a comment