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
Thank you Tobias!
I had the same issue with inkscape 0.91.
Applied the same workaround and fixed it!


 

Just a reminder, if you don't want to manually edit every inkscape SVG file,  simply use the older version of inkscape (version 0.48.5) available on their downloads page: https://inkscape.org/en/download/

-Mike (videoscribe user)

 

 

 Hi,


There are several symptoms that occur for people who are using Adobe Illustrator CC (2013 or newer)  or the newest version of inkscape (approximately 2013 or newer). There are workarounds, but I will explain the symptoms first.


The new (2013 to current) versions of those two programs use updated pen and pencil tools, and the results are:


1) Artifacts at Intersecting Lines or with nearby lines and fills. As videoscribe draws stroked paths, it will also reveal a bit of any line or fill that either comes very close to or intersects the stroked path that is being drawn.

2) sometimes color fills appear as oversized black blobs in videoscribe. (see link earlier in this thread)

3) slightly larger SVG file sizes than you would get with older versions of inkscape or illustrator

4) I'm not certain, but I think the additional SVG data may contribute to a freeze, crash or failure to render in videoscribe in some cases



The workarounds or solutions are:
1) use a version of illustrator or inkscape older than 2013.

or
2) use the following SAVE AS settings in illustrator CC:

or
3) run your SVG thorough a program like SVGCleaner that simplifies the SVG code. Here's a link to svg cleaner and other tools.

or

4) you can manually edit the SVG code in a text editor to remove a tag containing the word "viewbox" (see previous posts in this thread for more details.




Here is a video of the "intersecting lines bug". The first SVG in the video was saved in Illustrator CC and the rest of them were saved in CS4:


Here is a video showing the "nearby fills/strokes bug":



-Mike (videoscribe user)

Read this thread with great interest... Is there anyway to get VS just to draw the strokes as is in order and not as a reveal path of the final image? If you you have crossing strokes - parts of the "laters" strokes are shown when the "former" strokes are drawn. 

It seems to me that VS should just draw the strokes and the strokes not reveal the final image.

David William Edwards (former user of another doodle program).

Hi David,


If you are discussing an SVG images, Yes, as described in my previous replies, if you make your SVG correctly, it will draw correctly without revealing any little intersections, extra lines or bits of color that are supposed to appear later.


(if you are talking about importing a photo or other type of raster image and getting videoscribe to sketch out some of the details but not let the full photo appear after the sketching is done... no, that is not an option. you should prepare the image to be the way you want it to look before importing it into videoscribe.)


If you need specific help with an SVG, please attach the SVG.


-Mike (videoscribe user)

I'm concerning not about the little intersections but revealing the colors of other paths in the path before they should be drawn. 

David William Edwards


ohhhhh!
thanks. the SVG makes your question much more clear!

When videoscribe draws a stroked path, it reveals everything the stroke intersects from the bottom layer all the way to the top layer, you will never see parts that are hidden beneath something else.

The typical videoscribe drawing involves black line art being drawn first and then colors being filled in, so you would never encounter problems like the one you are asking about.

for your example, there are (at least) two ways to make it work:

1) the easiest way is to put your cyan, red and green squiggles in one SVG (none of them overlap each other), and then put your black squiggle in another SVG. That will allow all of the colors to draw in the proper order without overlap problems.

2) you actually CAN make this all work in one SVG but it would be a little more complicated, and the black line would be drawn first, so it's probably not worth explaining. It would involve converting some colors to fills and using a second transparent stroked path to reveal them.

-Mike (videoscribe user)

 

Coming for other "scribe" software - I've wondered why VideoScribe just doesn't draw the vectors as they appear in the SVG?

Putting two different SVGs into VS has it's problems because of the sizing issue. They never come in at relatives sizes to one other - unless I'm missing another trick.


David William Edwards

please provide an example video of your image being drawn in the other scribe software so we can discuss the matter further.

-Mike (videoscribe user)

That's just the point - the other software doesn't use the vectors from the SVG as VS does, but I was hoping for a simpler, but more robust implementation. If it's a line, just drawn the - if it's a closed shape, drawn the shape and then fill - in the order of the SVG from back to front. 

Here's some of the types of things I'm working...


Dave Edwards


Is there a way to get items on the "board" to come in at the same relative size? VS resizes objects on insertion based on zoom level. 


Dave Edwards

I agree that overlapping colors are handled in a way that seems odd. If videoscribe automatically drew your whole green squiggle with no black bits, and then drew the black squiggle over it, that would provide a more pleasing viewing experience. My approach has been to learn how SVGs work in videoscribe and prepare them with that information in mind, and I have not felt limited or disappointed by the results.

If you are getting your SVGs from other sources, then videoscribes rules do become more of a problem.

Yes, videoscribe can import two or more related SVGs perfectly aligned and scaled if you prepare them to work that way:  related link 1...  related thread 2

You mentioned closed shapes and color fills(yes videoscribe can do that), but the example images you attached contain neither closed shapes nor color fills (the vette is composed of disconnected straight lines, and is also  a HUGE file size for some reason...), so maybe that is part of the problem you are having. SVGs can be constructed in MANY different ways that may look similar at first glance, but produce different results in videoscribe.

If you are interested in reading more about how SVGs work in videoscribe: Making SVG Images Draw Well (2015 update)

If you want to suggest changes to the program , you can search the "Videoscribe ideas and feature requests"section for a related topic or start a new topic there.

-Mike (videoscribe user)









 

Thanks for your help... I'm just learning as you such how best to create the SVG and how VideoScribe handles them. My "attempted" uses for program are a little our of the main, so I'm probably hoping for something which VS was never intended for.

The file attached is the output of a 3D hidden line file and you're right - it has no fills, but many others I'm working with do. The file is big because there are a lot of artifact lines in it which come from the hidden process which could be removed. I'm working on optimizing the output before the conversion to SVG. Which is why I'm having to determine exactly how VS draws objects so I can better feed it the path information most suited for it. 


I'll look into the scaling issue and thanks for the suggested links - having that open up different possibilities for what I'm trying to accomplish. One my biggest failings is finding a way to optimize path data in order to minimize hand movements. I've been looking into optimization routines used for CAM (laser, waterjet cutting) applications, but without much luck.

Thanks again...


David William Edwards

P.S. It's "Doodly" I've been playing with, in case you were wondering.

Actually some of this makes a lot more sense now. VideoScribe doesn't display vectors from an SVG - it rasterizes everything. This is why the paths reveal the entire image even if composed of vectors and also explains why objects pixelate when zoomed in. 


David William Edwards

If I am not mistaken, videoscribe uses a flash-type plugin to draw the art as vectors and then AFTER the drawing is complete, it is replaced with a raster image.  That is why you may sometimes notice lines become slightly blurred or slightly thicker or darker a split second after the drawing is finished.

- related thread: Reduced quality during drawing proces.

-Mike (videoscribe user)

 


Login to post a comment