VectorCraft Tutorial

Click Open VectorCraft. The first visit downloads the app (about 56 MB, much less when compressed); later visits load from your browser cache.

VectorCraft uses WebGPU when available and falls back to WebGL2. A current desktop Chrome, Edge, Firefox or Safari works best. The interface follows your system language.

Export SVG for the web, PDF for print, or PNG/JPEG/WebP images. Your browser saves the file to your device.

Need a quick change later? Use the SVG tools to recolor, optimize or convert the exported file.

Start with a simple icon or a few shapes so you can check the whole workflow before moving to a complex illustration. Keep an original copy of any imported SVG. Change one thing at a time: dimensions, color or path geometry. Zoom in to inspect edges, then zoom out to see whether the image still reads at its intended display size.

Choose SVG for a scalable asset when your destination supports it. Choose PNG when you need a fixed pixel image, and set dimensions for the actual screen or document rather than exporting the largest possible file. Check transparency against the final background. An SVG containing a small embedded bitmap will still contain that bitmap’s limited detail even at a large export size.

Open the downloaded file in the destination application. Check fonts, gradients, clipped shapes and colors, especially if the source references external resources. If a file looks different, make required assets self-contained or outline important lettering in an appropriate editor. Keep the editable source separate from optimized delivery copies so you can revisit the project later.

This VectorCraft tutorial works best as a short trial project. Start with two overlapping shapes, give them different fills, and test a combination operation on a copy. Export one SVG and open it again before investing time in a larger illustration. This confirms that drawing, saving and reopening work in your browser and gives you a small reference file when comparing later changes.

If the workspace does not open, wait for its initial application download and check the loading message. Use a current desktop browser with graphics support. A slow connection can delay the first visit even when the surrounding website appears quickly. If loading fails, use the workspace reload control and read its confirmation before continuing. Keep a downloaded copy of unfinished artwork before reloading or clearing browser data; the browser session should not be your only copy.

For a blank or unexpected export, inspect the selected artwork, document bounds and transparency. Check the downloaded image against both a light and a dark surface. When importing an existing SVG, compare text, gradients and clipping with the original instead of assuming every application supports the same effects. The focused SVG tools are useful for a later size, palette or file-size adjustment. Keep those delivery outputs separate from the source you intend to edit in the full workspace.