Topic not covered?

How to keep line thickness in SVG

T

Toon van der Struijk

Started a topic Tue, 3 Jun, 2014 at 5:40 PM

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.

Andy Hardyman

On Wed, 4 Jun, 2014 at 9:23 AM

Hi

If you increase the Image Quality in the advanced options for the element it will draw better.

The maximum is 4000 and the minimum is 400 and the default can be set in the system wide settings

Please get back to us if you have any further questions.

T

Toon van der Struijk

On Tue, 10 Jun, 2014 at 6:09 PM

Ok Andy. Thanks for the reply, but at the moment I'm testing VS 2. Where are the Image Quality settings for an individual SVG, I just cannot find it...

Ian Howlett

On Wed, 11 Jun, 2014 at 10:41 AM

Hi Toon.

That option is not in version 2 as it is not needed anymore.

Can you upload one of your images and one of us will take a look at what's happening with it for you?

L

Lisette Platjouw

On Tue, 15 Jul, 2014 at 1:03 PM

I'm going insane. I'm using version 2 now but I still have problems as described above. I use the pencil tool in illustrator, line size 1 px, I saved it with a canvas size from 1000px width and as 400 px width.. and everything in between. When I import the svg in videosribe it seems to give the image a random size. And almost always it draws very thin lines to just instantly pops up thicker and uglier when done drawing.

Almost always.... sometimes I just seem to have the right size or something. But since there are none references on the size of images within videoscribe.. I don't know.

Can someone help me with this?

Ian Howlett

On Tue, 15 Jul, 2014 at 3:56 PM

Hi Lisette

I hope this will help. I've attached a file here that shows lines drawn at different widths, with the pencil tool, in Illustrator. The lines are kept at 'basic' and, if imported into VideoScribe, you will see draw just as they are.

If this doesn't help your situation, feel free to post a problem SVG here and we can have a look for what's different.

I'm having the same issue with my drawings. The path gets drawn at 1px thickness, then it "fills out" immediately after being drawn. I'm attaching an example. The only difference I can see from your example, Ian is the type of end cap I have on the strokes.

-open the SVG in an editor (I used Illustrator but inkscape will do the same)

-select all

-select Object > Ungroup

-save as a new file: dotted_line_two_arrows_fixed.SVG

This made the lines draw correctly.

Note that, when saving the SVG I chose the option 'embed' for images. Though there are no bitmap images in this SVG, the difference with these two options was that the 'link' option left a lot of blank space on either side of the drawing where-as 'embed brought in the drawing nicely cropped.

Thank you for looking into to it, Ian. I was hoping that was the key, but when I followed the steps you listed, my drawing still behaves the same way. I loaded your fixed file and it worked fine, but the one I created on my machine is still doing the same thing. So what am I doing wrong? I'm using Illustrator CC 2014.

Hi Lisette, I just tried your approach and I'm happy to say it worked! I created a new document at 1920x1080 and copied the paths into it. Then I scaled the drawing up to fill the space. I saved using your suggested settings ,but I tested to see if it mattered whether I chose "Adobe CEF" or "SVG." Either one gave me the same outcome. Also, I played with the stroke width and had the same success with a heavier line. It seems that the secret here is to ungroup the paths, and render at a high resolution.

Ian, I'd still like to know what other magic you might have used to edit my example.

Ian Howlett

On Thu, 17 Jul, 2014 at 10:55 AM

Hi again

Lisette: I think I was typing at the same time as you!

Jake: all I've done with your SVG is open it and save it with 'embed' instead of 'link'. If this doesn't make any difference to you then I'll find someone with your version of AI:P I've on CS4

Note that I just use paper size of A4, which translates to about 500 pixels.

Note that I didn't change the 'font type' either. This may make a difference if you're making text into an image

M

Michael Klynstra

On Thu, 30 Oct, 2014 at 1:42 PM

I believe I've tried every combination of solutions in this thread and still cannot get the lines to draw faithfully. They always change thickness after drawing completes. Attached is an example file that isn't working.