Sparkol Help

Topic not covered?

Start a new topic

Convert Illustrator image to SVG

I have purchased licenced Illustrator images and wish to convert these into SVG to use in my VideoScribe.  
When I use Illustrator to 'save as' SVG and insert this new SVG file into my VideoScribe, all I get is a black box.  I suspect there is a step I need to use with the .ai image to flatten it out or make it less complicated, but have only the very basics of knowledge in Illustrator.

Can someone help me please?  I have purchased a substantial licenced images and wish to use these in a series of scribes.

Hi,
That image is not exactly ideal for drawing in videoscribe because it is composed of filled paths and videoscribe draws stroked paths. (If that sounds confusing, you may want to google something like "illustrator stroked paths vs filled paths" for more information.)

However,
Refer to tip #7 in the following thread for starters: Making SVG Images Draw Well (2015 update)
the save settings provided there will help you fix the black blobs.  You can read the rest of the tips for more information about how videoscribe works and what types of drawings work best in videoscribe.

-Mike (Videoscribe user)

 

Hi Mike Thanks very much for your reply, I sincerely appreciate your help and advice. I'll check out those threads Julie
That other thread is a bit long, but don't feel overwhelmed, start with tip 7 and see how that works, then you can go back and look at the other tips gradually if you want to find out more :)

 

Hi Mike, thanks for your help.  I think I'm getting a general idea.  


Is it possible to just replace the filled paths with strokes?  I have done a bit of research, it seems like there's something simple I can do but I struggle with knowing the terminology to use when searching for tutorials on how?  

It's frustrating, silly me I spent so much time and money to find the right images in .AI thinking I could easily transform them into .SVG and make a series of animated whiteboards.  Now if I can't use these images, I'll have to start over.

I found it quite tricky to find good quality .SVG images without paying a total bomb for them.  I've attached a sample .AI file of the character I'm want to build a range of animations on 


Any tips at all are helpful. 


Thanks 

Julie



I can't think of an easy way to make this draw well in videoscribe. There are a lot of overlapping shapes and maybe 5 or 10 other issues to fix and it would require pages and pages of explanation if you aren't already familiar with videoscribe and illustrator.

You could use "move-in" instead of "draw" in videoscribe if you want the easiest solution. The next easiest solution might be to divide the image into 3 SVGs (the blue grid, the red arrow, and the guy) and move them in separately in videoscribe.

NOTE: the blue grid is going to have some black edges in videoscribe (unless you add a stroke or change the paths) because of a known bug

using the save settings mentioned earlier will fix the black blob problem, and then you can see how videoscribe will lightly trace the edges of each shape, including overlapping parts.

If you want to try to rework your images to draw better in videoscribe, I'd suggest that you start with the simplest image you have. If necessary take an image like this one and break it into 3 separate SVGS (the blue grid, the red arrow, and the guy) and try working on just one SVG like the red arrow.


-Mike (videoscribe user)




 

Hi Mike, 

I got a simple answer to my issue :)  Support Desk at Video Scribe sent me this message in relation to using the 'save as' option to convert to SVG - it works a treat :) ... see attached



If you want to convert JPG image files to SVG file format online for free. Use Convert JPG's online JPG to SVG converter. It will convert your JPG to SVG in a few seconds and you will get quality output. Go and make free JPG conversions at convertjpg.io.


Login to post a comment