How to make SVGs draw well?

  • QUESTION: What is the best way to make SVG images for videoscribe? (problem: SVG draws in the wrong order or draws outlines or draws things that are not visible or parts just appear, strokes don't draw etc.)


    ANSWER: (Tips are for Adobe Illustrator but may work similarly in inkscape or other programs) I believe the tips below will give you the BEST results and the fewest problems. Breaking one or more of the "rules" may cause unexpected drawing results or may contribute to slow downs, freezing, crashing or failure to save, load, or render.


    1) USE THE PEN OR PENCIL TOOL: They create stroked paths and that is what videoscribe "draws" by default. The paintbrush tool makes fills instead of paths.

    If you want to use the paintbrush tool for your lines, you can make videoscribe seem to draw fills the same as stroked paths by drawing a stroked path over the paintbrush line and then making the stroked path transparent, similar to this tutorial: http://help.videoscribe.co/support/solutions/articles/1000033717-fill-an-image-with-colour-using-the


    2) SIMPLER IS BETTER:  Properly made SVGs will generally be well under 100KB and contain only stroked paths and/or filled paths. It may be best to avoid problematic data like embedded images, or masking or clipping paths, or glows or other effects which may contribute to freezes or crashes. A hand drawn SVG will generally draw better than an jpg that has been "auto traced" to become vector art. If you auto trace, try to adjust the settings to provide smoother lines instead of hundred and hundreds of nodes.


    3) DRAWING ORDER and color fills: In general, videoscribe will draw lines (stroked paths) in the same order that they were drawn when the SVG was made. If you use auto trace to convert an image to stroked paths then the drawing order may seem somewhat arbitrary. Using groups or any type of subfolders may affect the drawing order. filled areas appear last by default. You can use the trick mentioned in tip #1 to make videoscribe "draw" the filled colors. another related link is at the bottom of this list.


    4) GROUPS, SUBFOLDERS, NESTED LAYERS etc: It may be best to just to avoid them because they may affect the drawing order in unexpected ways. Drag all paths out of subfolders/sub layers/groups into the root folder/layer


    5) DELETE ALL HIDDEN LAYERS:  from SVGs when you make them. (hidden layers increase file size. larger file sizes require more memory to process.) Also there are are some youtube tutorials (not official videoscribe tutorials) that mention leaving embedded JPGs or pngs or other images in your SVG files but I wouldn't recommend that. They may contribute to freezing and crashing.


    6) WIDE IMAGES: if the image is about as wide as it is high, it will probably import at a good size. If it is twice as wide as it is high, it will probably import at a good size. If it is REALLY wide and not very high (like a horizontal line), it will import HUGE.  for really wide images, it can be helpful to rotate them 45 degrees so they will have more "image height" and then you can import them and rotate them back to horizontal in videoscribe


    7) SAVING:

    recommended SVG save settings for illustrator:


    EDIT: Regarding Embed or Link: If you happen to have a jpg or png or other images in your SVG, selecting "Embed" will include them in the saved SVG, which can be a useful, simple way to incorporate a photo or shaded illustration with your own vector line art. (However, be aware that embedding images increases file size and might possibly contribute to slowdowns or freezes, so you may want to use it sparingly or at least only embed images with smaller file sizes. ). Selecting "Link" instead of "embed" will essentially kick out any inserted images and save them as separate files which will make your SVG smaller, but videoscribe will not display linked images. My suggestion based on personal experience is to use only paths, strokes and fills in your SVG and to delete any extra images. That way it won't matter if you choose embed or link because there will be nothing to embed or link. (just my opinion- I'm just a user)


    8) illustrator CC (creative cloud) has some new features that cause new problems with stroked paths. For example strokes draw several sizes smaller than they should, with very obvious thickening where the strokes intersect and then all the strokes thicken when the drawing finishes: http://help.videoscribe.co/support/discussions/topics/1000033902/page/last#post-1000058430


    official support post: "Create your own images"

    official support post: "Fill an image with color using the hand"


    Hope that helps,

    Mike (videoscribe user)



    1 person has this question
  • Thanks for the advice Mike.

    You can also take a look at our SVG tutorial if you need to know the basics.

    http://help.videoscribe.co/support/solutions/articles/1000033754

    Thanks, Joe

  • new note:
    (can't edit my own posts currently... hope that option will be returned at some point)

    the "output fewer <tspan> elements" setting may have an effect in the export of SVGs from Illustrator CC. It may be best to uncheck that option if using CC. I don't have CC so I can't test this to be certain. The matter is discussed briefly at the link in item 8 in my post above.

    -Mike (videoscribe user)

     

  • SVGs made with illustrator creative cloud may appear solid black in videoscribe as a result of some newer formatting that videoscribe does not recognize.


    A solution quoted from:  a related thread


    If you are using Illustrator CC 2015 use the following save settings and your SVGs will work normally in VideoScribe:


    The main setting to look out for is the CSS Properties in the Advanced section. This should be set to either Style Attributes or Presentation Attributes.


    -Mike (videoscribe user)

  • Thanks for this Mike, I was having the blackout problem and couldn't understand why.

    I used your settings above which solved the problem.

    Cheers, 

    Trevor (VideoScribe user)

  • Great! Thanks for posting your results.

    I'm gonna have to give credit to Matthew from Sparkol who provided the screenshot of the settings :)

     

  • But I don't like the plain pen stroke of illustrator. So I'm using photoshop brush strokes al the time. I save the photoshop file as PNG than import it in illustrator and save it as SVG. Which obviously doesn't do any thing. And my scribes keep crashing within the minute I start working in them.
    Is there a way I can still use images which are not plain illustrator pentool lines?
    With previous versions of videoscribe (or creative cloud) it worked a lot smoother.

    I think it should be told clearly that the program can't handle transparant images if it can't. It would have saved me a LOT of time and frustration.

    https://youtu.be/QOQEBo-X3OI

     

  • Hi Lisette,
    1) It's fine to use photoshop brush strokes. As you noted, importing a PNG into illustrator and just saving t as an SVG does not create a working SVG that will "draw" the same as a library image. You would have to create transparent strokes in illustrator to give the videoscribe hand a path to follow. The process is basicly described in the links already provided
    fill-an-image-with-colour-using-the- hand
    create-your-own-images )

    2) If the SVGs you make are crashing videoscribe, you could upload one of your problem images for some feedback.

    3) If you preferred the drawing method for PNGs that was used in videoscribe version 1 you could look for a suggestion thread (or start a new one) to either bring back that drawing method or make version 1 available again (I still use version 1).

    4) I'm not sure what you mean about transparent images. Videoscribe CAN handle transparent png images fine and SVGs with transparent backgrounds. However, it does not understand certain things like individual layers in an SVG set to "darken" or "multiply" and it does not like layer masks or some types of effects like glows or other things that greatly increase the file size. Also transparent GIFS will not display correctly. Those should have a white background.

    5) The colored painting in the video you attached was made using the process described in the links above with multiple transparent PNGs imported into illustrator or inkscape and transparent paths added to tell the videoscribe hand how to move.

    Hope that helps,
    Mike (videoscribe user)

     

  • Thanx for your response Mike. Yes I know how to make the pixel images drawable with transparant paths. The attached scribe in the link was made by me. It's just that I think I have to many pngs in use in the scirbe I'm working on right now. I don't want everything drawn, just sliding in. But the images are constantly broken when I edit for example the size. And Videoscribe keeps crashing when I change hands.
    But the supportteam is helping me optimizing it. So we're working on it.

     

  • Just to add more information and resources to this thread, here is a link to another thread which includes links to a good blog and more tutorials from making videoscribe SVGs:  "Using My Own Drawings?"

    -Mike (videoscribe user)

     

  • Hi All,


    Please use this settings for CC users. It helps to solve issue.




  • Thanks Mike Metcalf!


    Your comments were useful! 

  •  Thank you Montse!

    In case anyone is interested, a slightly newer version of the thread is here: Making SVG Images Draw Well (2015 update)

    Most of the information is the same, but I tried to improve the wording and I think it contains a few more links and  workarounds for known bugs.

    -Mike (videoscribe user)

  • A tip for anyone exporting SVGs from Xara Designer Pro. I had an issue with text items being positioned in random places far from the source Xara design when using the SVG in VideoScribe. Right clicking on the text object in the design document and choosing Convert to editable shape (and then re-exporting) solved it. 


    -Matt

  • That's a good tip! 
    Same for illustrator and inkscape. Convert your fonts to paths.

     

Login to post a comment