Free Fun and Games

Free family-friendly activities, games, clipart and information.

Online Paint - a free Drawing Program

Many of the clip art sketches I have made have been created in SVG-Edit/Online Paint. These are free programs which work in your browser. Here are some examples of simple sketches I have made in this program:

    

 

SVG-Edit is an open-source free program using vector drawing. Online Paint had this program with a few more features added in, such as extra options to save drawings. However, I have since found the Online Paint version to be less effective, and now use and recommend the latest SVG-Edit version, 2.5.1, available HERE. You may also like to look at the SVG-Edit Home Page. There are some demo videos for earlier versions of SVG-Edit.

As I can't find much in the way of tutorials or other help on the internet for this program, I thought I should share my experiences in case they help others. There are no doubt many more ways to use it, but for the kinds of simple pictures I was wanting to produce, the program is easy and effective. 

Getting Started

 

Go to SVG-Edit version 2.5.1 The SVG-edit screen will open as below. If you like to use layers, the button for them is on the right. I don’t bother, as I find them more confusing... I’m just focusing on basic, simple designs.

The main buttons on the left are for drawing lines and shapes and for adding text or images. At the bottom is the basic colour selection for filling shapes and for lines (also line thickness and styles). There are undo/re-do arrows at the top.

At the top left is the icon for the main menu, with options to open a new image or a previous image and to save your drawing as a PNG or SVG file.

 

 When you have drawn some lines or shapes, you can select one (using the arrow at top left or double click) and some more buttons will appear at the top. The main buttons here will let you clone or delete your object, move it up or down (as in to the front or back), and convert it to a path so that you can use vectors to alter the lines /shape. 

 

Once you have selected Convert to Path, you can double click on your object again to open up more options (adding/deleting nodes, changing sections to straight or curve, etc) - see the Basic Guides below.

 

 

*************************************************************************************

 

If you want to use the online Paint version (though I now recommend SVG-Edit 2.5.1), you need to have Google Chrome installed as a web browser (you may want to remove the Google toolbar – I found it annoying and intrusive).

 

To find it, look in the Google Chrome Web StoreVector Paint (formerly Online Paint) is in the  Collections-Art and Design section.  It’s free, and easy to install. It  says it installs a button on your tool bar,  but if you don’t have that, it’s easy enough to open... just open a new tab in your Google Chrome browser, and you’ll find your installed apps listed. Click on the Online Paint option. 

 

 

Background

As a primary school teacher, I use a lot of "clipart" images when preparing  worksheets and games for my students. I prefer simple, clean images with clear outlines. These are not always easy to come by, so I had been looking for a way to draw simple clipart images. 

I have the old Microsoft 2000 Photodraw 2 program on my computer still (I installed it on my new laptop - I love this program). Photodraw is very useful for adding text, borders etc. to photos . I have also been using it to “cut out” or erase the background from photos of animals, plants etc to make clipart-style image (see Cathy’s Clipart Collection 1 and 2). These are useful for some purposes, but I still wanted to draw simple images.  Photodraw was good for many types of drawing, but it lacked really clean curves.

I had tried using Gimp and Paint.net, which are free programs, but neither suited my purposes and both are harder to use than my Photodraw. I found out about SGV-edit, an open-source drawing program which uses vectors for creating smooth curves. I tried this, but had difficulty saving my work.

Then I found a free Google Chrome app, Online Paint. As I had Google chrome installed as a web browser, it was very easy to add this app. It uses the open-source SGV-edit, but with some extra features. I found it very good, and was writing up the first guides below,  when the program I was using began to develop problems. The next day when I opened it, the layout had changed and the save options had vanished.

I went back to the SVG-Edit home page and found that the latest version there now had all the features I had been using in online paint... so my guides will now apply to SVG-Edit 2.5.1 even though they're titled Online Paint.

PLEASE NOTE: When I'm typing, I often type "SGV" instead of "SVG"... I try to notice and correct myself, but note that SVG is the correct extension!!

Updates on Online Paint 

22 May 2011-

Not only has the Online Paint layout changed, but it's now called Vector Paint; still available for free, through the Google Chrome webstore.

Here is the new layout:

       

The main problem I have found with this new version is that the cursor seems to be out of alignment. In the screenshot above, my cursor was at the top left, but my drawing appeared in the middle.

If I place my cursor in the middle of the drawing area, my drawing will appear way down at the left, out of sight!  I find this very frustrating, so I'm going back to SVG-Edit 2.5.1 for now...until I see if a new version of  Vector Paint addresses this issue.

 

Saving options have also changed in Vector Paint- there are various options for saving online, which could be handy, or you can save as an SVG file on your computer.

However, there is now no option to export to your computer as a PNG file. This means you can't open it easily to use on your computer unless you use a program like the GIMP.   

 

Basic Guides to using Online Paint/ SVG-Edit

These guides are based on my own experiences. I am in no way an expert on any drawing program, and I am sure there are many aspects that could be covered - but these may help someone who is just starting to use this kind of program ( I would have liked something like this when I started). I apologize for any errors.

The guides are in .PDF format, as it's easier to add screenshots where I want them, to illustrate each step.

Please feel free to leave any constructive comments or queries in my guestbook or my new forum!.

1. Drawing a Simple Shape with Online Paint

2. Online Paint Guide 2: Change colour, lines

 These guides apply also to SVG-Edit except for a few small details

 

July 2017 Update - apologies for missing images below- they have been stored in Photobucket who will now no longer display them unless I pay a monthly fee, which I cannot afford as I make no money from this site. I am hoping I will be able to find another way of storing and displaying the images if I can get them back from Photobucket  

 

SVG-Edit guides: 

 

SVG-Edit guide 1.  Draw a simple shape and colour it  

                      

SVG-Edit 2.5.1 Guide 2. Colour gradients  - Make a ball

 

 

                     

                       

SVG-Edit 2.5.1 Guide 3. Linear  gradients 

        SVG-Edit 2.5.1 Guide 4. Draw a bunch of balloons 

 

Saving Your Image

(I won't do this as a PDF with illustrations, until I find a stable version of one of the programs)

 In brief for now: TO SAVE YOUR DRAWING in SVG-Edit *:

(*for Online Paint/Vector Paint, see box below)

Go to main menu at top left, select Export as PNG. The image should open in a new tab, and you can right click and select Save image as.. If it doesn't open, go back and try again. It can take a few tries at times.

If you want to be able to open the image in the program again, select Save Image [S]. You should be able to right click and select Save image as, then type in .svg as the file extension... but it doesn't always work. 

Another option is to open the  <SVG> button at the top, next to the main menu, and copy and paste the code onto a Notepad or Word document. Then, when you open the program again, you can just paste it back into the same place. This seems work for me- it's worth a try. 

HELP KEEP THIS SITE OPEN

Due to the high number of visitors and downloads, this site has exceeded its permitted bandwidth. To prevent its closure and to keep these free resources available, I am having to pay for Premium bandwidth. 

If you have found the resources on this site useful, you may like to donate a few dollars towards keeping it open. Even $2 is useful!

Please click on the DONATE button below if you'd like to help out and can afford it!

Donations

  • Support Free-Fun-n-Games 2 donations

Clipart 2