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

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.


 

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

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?

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? 

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.



lines.svg lines.svg
1.47 KB

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.   


the lines in your file, Ian, work fine in videoscribe. 
But my drawing isn't.


OKE I found out that with the following approach and settings work GOOD for me.


In illustrator. size of drawing area 1920 x 1080 

This is HD format. And as I want every frame to draw in full screen size, this works best for me. (although Sparkol says it shouldn't be bigger than 400)


And now the crucial part.... LINE SIZE 3 px


Save as SVG with the following settings (see attached screenshot)


It doesn't matter how you resize the image within Videoscribe. It keeps drawing the lines right. For me at least.  Hope this will help someone and end some frustration.  


Thanks Jake


This is a great example: the key is that the strokes were GROUPED.


Here's what I did:

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


Have you tried my approach Jake? As described 2 comments above.

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.

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



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.


Any ideas, anyone? Thanks in advance! 



Login to post a comment