VectorPaint getting started: build an icon from shapes and export SVG

For a first icon: New Canvas → Add Shapes → Adjust Fill and Stroke → Export SVG. A simple circle-and-rectangle design is easier for understanding vector objects than beginning with complex photo tracing.

Based on VectorPaint 1.0.7 public information and feature entry points, this introduction suits first-time vector designers.

Before you start

• Install VectorPaint; the checked version requires iOS / iPadOS 17.0 or later.
• Choose a theme expressible in two or three shapes, such as a sun, window or geometric badge.
• Choose delivery purpose: SVG for editable paths; PNG for webpage images.

1. Create a canvas

In the gallery, choose New Canvas, select a preset or custom dimensions, then Create Canvas. A square is convenient for icon composition.

Check dimension units. Canvas size and final PNG pixels are separate settings; one editor number alone does not establish output size.

2. Build structure with a few shapes

Open Shapes & Path Tools, add a circle and simple shapes such as rectangles to build a design. For each object, adjust position and size before colour.

For a sun, use a circle and narrow rectangles as rays. This exercise needs neither image assets nor complex node editing first.

Use the pen and Bézier nodes later for curves. First learn basic shapes, selection and movement.

3. Distinguish fill and stroke

Select an object; Fill changes its interior, while Stroke controls outline colour and width. Begin with two or three colours so structure stays the focus.

If the intended object does not change, check selection and the property target. Locked or hidden layers also affect editing and display.

Use alignment, distribution, grids and guides for consistent arrangement. Manage complex designs with layers or groups.

4. Choose export format by purpose

Open Export & Share and choose:

Format	Suitable use	Points to note
SVG vector	Continue editing paths or use an SVG-capable workflow.	Embedded raster artwork may remain raster.
PNG image	Webpages, chat and artwork previews	Check final pixel dimensions; choose transparency if needed.
PDF document	Printing and artwork delivery	Can contain both vector and raster content
Editable original	Return to VectorPaint for further edits	Keep alongside the finished file

Export PNG for a shared preview and SVG separately for continued path use. Transparent export does not delete solid background shapes you drew.

5. Inspect the result and retain the original

Open the export and check edges, colours, text and background. For SVG delivery, inspect objects and images in the receiving software, not merely the extension.

Save an editable VectorPaint original for later layer, object and layout changes. Versions, backups and Recently Deleted help manage projects but do not replace checking final deliverables.

For the first exercise, fix dimensions, objects and colours

Set a small goal: on a 512×512 px square canvas, make a sun from a roughly 180-unit circle and four short rectangles. Centre it and leave about 48 canvas units around the edges. These are comparison starting points; geometry dimensions and final PNG pixels need separate checks.

First adjust position and size without gradients. Try a dark circle and lighter rays, or one colour for all shapes, then reduce the image to check recognition. Increase gaps if they disappear. Move the whole sun if too near an edge instead of shifting parts independently. Once structure is clear, compare two palettes.

Group related parts in a second pass, move them together and undo, checking for a missed sunray. A white rectangle background remains artwork content and needs separate handling for transparency. A white-looking editor does not prove a white background object was drawn.

Export a 512×512 PNG and an SVG, then save the original. PNG checks actual display, SVG continues path use and the original retains the creative project. Purpose-based names such as “sun_512_preview” and “sun_editable” are easier to find than calling everything final.

Continue according to the problem

• For smoother shapes, read Pen-curve tutorial.
• Complex artwork makes selection difficult: read Layers and groups tutorial.
• A white background remains after export: read Transparent PNG tutorial.

Frequently asked questions

Does importing PNG and exporting SVG complete vectorisation?

No. SVG can contain raster images. For editable outlines, use Image Vectorisation, inspect the preview and confirm generated paths.

Which images suit vectorisation better?

Line art, logos and flat-colour artwork suit initial tracing. Photos are quantised to the chosen colour count; details depend on the source, with no lossless-reproduction guarantee.

Why is an enlarged PNG less sharp than SVG?

PNG has fixed pixel dimensions and can blur when enlarged beyond them. SVG paths rerender at the target size, but embedded raster images retain their resolution limits.

Where should I start with hand-drawn watercolour-style illustration?

For brush marks, overlapping colour and pixel layers, read Aquarell getting-started tutorial.

Sources and scope

Public tool and format capabilities come from VectorPaint App Store description, with the version checked through Apple's public lookup API checked on October 22, 2026. Control names follow the project’s canvas, editor and export entry points; layouts may change by device and version.

Back to the VectorPaint introduction.