Sparkol Help

Topic not covered?

Start a new topic

Intersecting lines appearing in SVG

I have created SVG's using the pencil tool in Illustrator. When I import them to VideoScribe the points where the lines intersect appears before that section is drawn. Is there any way to avoid this? I have attached a screenshot so you can see what I mean.

I'm only using the trial version so this may be a limitation.

Thanks


1 person has this question

Matthew,  Has there been any progress on this issue? I'm still getting this behavior with VideoScribe 2.2.2 (and Illustrator CC 2014 and 2015). This is a pretty significant problem for me. I'd be happy to work with a beta if there's a beta that fixes the problem.

This appears to be an issue with the settings you are using in the SVG, not the version of Illustrator being used. I have had one of our technical team look at the SVG and they seem to have fixed the issue. To do this the SVG was scaled up and then the stroke width was set to a specific value for the whole SVG instead of being variable.

Depending on the image different stroke thicknesses will work better than other. We recommend using a consistent stroke thickness for the whole SVG where possible. I have attached a fixed copy of the SVG for you.


I've been having the same issue and it seems like a serious limitation if all of the stroke widths need to be the same. That makes for some pretty dull drawings. I have tried all of these things with Illustrator and am still getting the artifacts. 

Hi Michael, 

Do you have an example SVG you can attach so we can take a look at it?

Hi everyone,
This is just a bit of a summary comment and a request for clarification. SVGs made in Adobe Illustrator Creative Cloud or newer may display the symptom of noticeable artifacts at line intersections while the lines are being drawn (and the lines drawing thinner than their true stroke thickness):

There MAY be some save settings that will work properly in CC. Based on the images, comments, and files provided in this thread, I don't see any definite evidence that any CC save settings will solve the intersection problem. I see at least one comment from another user indicating that the problem is not solved by using the CC settings provided in this thread. I don't have CC so I cannot test it myself.

Saving in older versions of inkscape, or Adobe CS6 or earlier does seem to resolve the problem of intersecting lines showing up. Just to illustrate the symptom that occurs in CC, here is a short video:

 

image 1: Tim Harland's original SVG made in Illustrator CC 2104

image 2: Same SVG opened and re-saved in Illustrator CS4

image 3: 3 copies of the same stroked path with different stroke sizes saved in CS4


If anyone can take the CC2014 SVG provided near the beginning of this thread and resave it in CC (or newer) with settings that eliminate the intersection problem, please attach the fixed file and a screenshot of the settings used, and mention the version of illustrator here.


Thanks,

Mike (videoscribe user)

Mike Metcalf,

you are the VideoScribe master. 

Whether you are answering my own posts, or I find an answer
you left for someone else, you have made using this software
so much easier and so much more versatile for me.

Thanks, man!

 

Thanks Brian!

 

I am not able to edit my previous posts but I think the below screenshot (provided by Matthew Cook in another thread) shows the currently recommended save settings for SVGs in Adobe Illustrator creative cloud (and newer):



Some of the settings may not be absolutely necessary, but this is a good starting point if you want to be sure to avoid the intersecting line problem.


I don't have CC myself, so if anyone with creative cloud 2015 wants to test these settings with intersecting lines and report your results, that would be great.


Thanks,

Mike (videoscribe user)

Dear Mike, 
I tried your settings in CC, but it still gives outline until the drawing is finished. 


I would love to draw my own drawings! Does anyone know a solution? Hope so! 
Hi Jose,
That problem is the result of using the paintbrush tool instead of the pen or pencil tool in Illustrator to draw your lines.

The simplest option is to draw your SVG images using the pencil or pen tool instead of the paintbrush.

If you want your svg lines to have the style of the paintbrush, there are a few extra steps that will make  a paintbrushed SVG draw correctly: add a zero-opacity stroke over your paintbrush stroke.

related threads:
imported SVG line art not rendering correctly
how to make SVG images that draw well.

-Mike (videoscribe user)

 

Hi there,

I also had the same issues with intersecting lines with drawings made in the latest version of inkscape (0.91). I've opened the svg files with a text editor (e.g. notepad++) and tried to identify the difference between a working and a non-working svg file.

All non-working files have a tag in the form of:
viewBox="0 0 744.09449 1052.3622"

For me, I fixed the problem of intersecting lines by simply removing the viewBox tag and saving the file again. I hope this simple fix works for you as well.

Regards
Tobias

 

Hi Tobias -

Can you provide further details on the process of removing the viewBox tag?

(to eliminate the intersecting line problem of InkScape files).

Thanks for your insight on this!

Hi David,

You should be able to just open the SVG in a text editing program such as wordpad. For example, you could (make a backup copy first, then)  change the file name from filename.svg to filename.txt, then edit it in any text editor, then save and rename back to filename.svg

Keep a backup copy in case you screw up the file in the text editor.

-Mike (videeoscribe user)

 

Hi David


To remove the viewBox tag, just do the following:

1) create a backup copy

2) open your svg file with a text editor (e.g. notepad)

3) remove the viewBox tag (remove the highlighted line in the attached image below)

4) save the file



Hope this helps

-Tobias

Thanks Tobias!

That fixed it.  I was really struggling with the intersecting line issue.  So glad you offered this solution.

Genius!  I am back in business now....


Best

- David S.


Login to post a comment