How to draw vector art

Vector art is drawn with shapes and lines instead of pixels, so it stays sharp at any size. Here is a simple way to draw a vector character or scene from scratch, using Scribl, a free drawing app that runs in your browser.

What makes a drawing "vector"?

A pixel image is a grid of colored squares; zoom in and it turns blurry. A vector image stores paths: points joined by curves, each with a color and a thickness. Because it is a description rather than a grid, it can be printed on a poster or shrunk to an icon without losing quality, and the file (usually SVG) stays small.

You don't need to think about points and curves to draw one. In Scribl you draw freehand and each stroke is turned into a smooth path for you.

1. Rough it out on its own layer

Start loose. Add a layer for the rough, turn its opacity down, and block in the big shapes: a circle for a head, a bean for a body, lines for the pose. Don't worry about neatness: hide or delete that layer when the drawing is done. Tracing over a photo or a scan? Paste the image in and draw on top; tracing images are never exported.

2. Ink the outlines

Add a new layer above the rough and draw your final lines over it with the brush (B). A few tips:

• Draw each line in one confident stroke. Turn up the stabilizer for smoother curves.
• Close your shapes: end a stroke near where it started and it joins up. That makes coloring easy.
• Hold still at the end of a stroke to snap it into a straight line, an ellipse or a rectangle. Hold Shift for a straight line.
• Press M to mirror what you draw, handy for faces and symmetrical characters.
• Try the tapered brush style for lines that thin out at the ends, or use a tablet with pen pressure.

Made a mess? The Trim tool (K) cuts overshooting line ends back to where they cross, and the Smooth sculpt brush (S) irons out wobbles.

3. Fill with flat color

Take the fill bucket (F) and click inside your shapes. The fill follows your lines exactly and always sits under them, so your outlines stay crisp. Small gaps are bridged automatically; set how big a gap to close in the tool options. Clicking an area that is already filled recolors it. Use the blob brush (P) to paint patches of color, like cheeks or spots.

A limited palette makes art look intentional. Scribl comes with a warm, friendly palette, and you can import your own (GIMP, Photoshop, paint.net, HEX or an image). Once a drawing is done, Recolor swaps one color everywhere at once, which is a quick way to try variations.

4. Add depth

Flat color reads well, but a little depth makes it pop. Use a new layer for shading, or open the layer effects: an outline around the whole character (like a sticker), a solid thickness, a drop shadow, and inner shade and highlight. They follow one light direction you set with a dial, and they update as you keep drawing.

5. Export

When you are happy, choose Export and download an SVG for the web or for further editing, or a PNG for sharing. You can crop to the artwork, drop the background, export only a selection, or copy the SVG code or image straight to the clipboard.

Keep practicing

Draw the same character a few times; each version gets cleaner. Keep your lines bold, your palette small and your shapes simple. Everything you draw is saved to your gallery automatically, so you can come back to it later.

More questions? See the FAQ or read about Scribl as a free SVG editor.

Try it now, it's freeFree · no account · works offline