How To Guide

VGTools Pro How To Guide

A practical guide to the core VGTools Pro workflows, controls, exports, and browser-based tools.

16Guides

100%Client-Side

0Installation

SVGExport Ready

vgtools.pro

Table of Contents

What's Inside

Brick Builder Design and build 2D brick structures with a drag-and-drop ca… → 02

SVG Recolor Analyze any SVG and recolor it by hue family. Swap individua… → 03

Moodboard Studio Assemble stunning visual boards for clients. Drag in images,… → 04

Blob Studio Generate smooth, organic SVG blob shapes procedurally. Dial … → 05

Jigsaw Generator Design and export custom vector jigsaw puzzle grids. Full co… → 06

Icon Factory Build custom icons by layering frame and particle shapes. Sa… → 07

QR Code Generator Create custom QR codes for URLs, emails, phones, SMS, WiFi n… → 08

Color Mixer Generate harmonic color palettes and beautiful live gradient… → 09

Notepad & Kanban Capture ideas fast as freeform notes, then drag them into a … → 10

Locator Type a list of locations and visualize them as markers on an… → 11

Signature to SVG Convert a photo or scan of a handwritten signature into a cl… → 12

Any2SVG Convert Adobe Illustrator, Photoshop, PDF, and more to SVG —… → 13

Background Remover AI-powered background removal running 100% in your browser. … → 14

Word Cloud Generator Transform any block of text or a word frequency table into a… → 15

Sankey Diagram Create professional flow diagrams where arrow widths are pro… → 16

Device Mockups Wrap your UI screenshots inside realistic device frames. Cho… →

vgtools.pro/brickbuilder

How to use

Select a brick

Choose any shape — bricks, slopes, arches — from the sidebar panel.

Place & snap

Click the canvas to place. Items snap to grid automatically.

Move & resize

Drag to reposition. Type exact values in the Properties Panel for pixel-perfect sizing.

Multi-select & color

Shift+click or drag a marquee to select multiple bricks, then apply one color to all at once.

Group elements

Press Ctrl+G to lock pieces together so they move as one unit.

Export SVG

Click Export SVG to download. Opens in Illustrator, Figma, or goes straight to print.

Keyboard Shortcuts

VSelect tool

HPan / Hand tool

DDuplicate

RRotate

DelDelete

Ctrl+Z / YUndo / Redo

Ctrl+GGroup selection

Ctrl+Shift+GUngroup

Ctrl+ASelect all

+ / −Zoom in / out

0Reset zoom

?Show shortcuts panel

⚡

Pro Tip

Right-click any brick for a speed context menu — Flip, Rotate, Color — faster than the panel for quick edits.

vgtools.pro/svgrecolor

How to use

Drop your SVG

Upload a file — all colors are detected and auto-grouped by hue family.

Review groups

Colors appear in buckets: Reds, Oranges, Yellows, Greens, Cyans, Blues, Purples, Magentas, Grays.

Swap a swatch

Click any color circle to open the picker and replace that exact color.

Batch shift

Drag the Hue Shift slider per group to rotate that entire family across the spectrum.

Save preset

Hit Save to store slider positions — reload on any future file with one click.

Export

Click Export to download the fully recolored SVG.

Controls

Click swatchReplace one specific color via picker

Hue Shift sliderRotate an entire color family

SaveStore current slider state as a named preset

ResetReturn all colors to the original

ExportDownload the recolored SVG file

🎨

Pro Tip

Exported SVGs are fully PowerPoint-compatible — paste directly into slides with zero quality loss.

vgtools.pro/moodboards

How to use

Drag in images

Drop image files onto the canvas, or click + to browse your files.

Add a logo

Use the Logo button to place a brand logo on the board (optional).

Enter client name

Fill the Client field to label the presentation correctly.

Review auto palette

Colors extract from your images automatically. Click any swatch to override.

Reset palette

Click Reset to discard overrides and regenerate from the current images.

Download

Click Download to export the board as a high-resolution PNG.

Controls

Drag imageAdd directly to the canvas

+ buttonBrowse and add image files

Click swatchOverride a palette color manually

ResetRegenerate palette from images

DownloadExport the full board as PNG

🖼️

Pro Tip

Images that share a coherent visual direction produce the most harmonious auto-palettes.

vgtools.pro/blobs

How to use

Set Points

Number of anchor points. More = more complex, jagged edges.

Set Smoothness

How soft the curves between points are. Higher = pillowy and round.

Set Variance

How irregular and asymmetric the shape is. Higher = wild and organic.

Generate

Click Generate — every click produces a completely new unique shape.

Share via URL

The blob is encoded in the page URL. Copy it to save or share.

Download SVG

Click Download to save the shape as an SVG file.

Sliders

PointsAnchor count — controls shape complexity

SmoothnessCurve tension between anchors

VarianceDegree of irregularity / asymmetry

GenerateCreate a brand new random shape

URLShape is encoded here — copy to preserve it

💾

Pro Tip

Copy the page URL before closing — the blob lives there and is permanently lost if you don't save it.

vgtools.pro/jigsaws

How to use

Set Columns

Number of horizontal pieces across the puzzle.

Set Rows

Number of vertical pieces down the puzzle.

Set Gap

Spacing between pieces in the exported SVG.

Set Tab Size

Controls how large the interlocking tab protrusions are.

Generate

Click Generate — tab shapes randomize every single time.

Download

Export as SVG. Import directly into Lightburn or any laser cutter software.

Parameters

ColumnsHorizontal piece count

RowsVertical piece count

GapSpacing between pieces

Tab SizeSize of interlocking tab protrusions

GenerateRandomize and apply a new tab shape layout

🧩

Pro Tip

Click Generate multiple times — tab shapes are randomized each time. Find the style before downloading.

vgtools.pro/iconfactory

How to use

Choose a Frame

Select the outer base shape from the Frame panel on the left.

Choose a Particle

Select the inner overlay from the Particle panel.

Preview

The combined icon renders live in the canvas area.

Add to Collection

Click + Add to collection to save the current icon.

Build your set

Keep swapping shapes — build as many icons as needed.

Download ZIP

Click Download Collection to export all icons as SVGs in a ZIP archive.

Actions

+ Add to collectionSave the current icon to your set

Copy to ClipboardCopy the SVG code for the current icon

CleanClear the canvas without touching the saved collection

Download CollectionExport all saved icons as a ZIP archive

📦

Pro Tip

Use Copy to Clipboard to grab a single icon's SVG code instantly — no need to download the full ZIP.

vgtools.pro/qrcodes

How to use

Select type

Choose from URL/Text, Email, Phone, SMS, WiFi Network, or vCard.

Fill the fields

Each type shows only the fields it needs — no clutter.

Generate

Click Generate to render the QR code.

Download

Click Download to save the image file.

QR Types

URL / TextAny link or plain text content

EmailPre-filled To, Subject, and Body

PhoneTap-to-call link

SMSPre-filled text message to a number

WiFiSSID, password, encryption type (WPA/WEP/None)

vCardFull contact card saved to phone address book

📱

Pro Tip

WiFi QR codes let guests join your network without ever seeing the password — perfect for venues.

vgtools.pro/palettes

How to use

Pick a base color

Use the color picker to choose your starting hue.

Choose palette type

Analogous, Monochromatic, Triadic, or Complementary.

Generate

Click Generate for the full palette and gradient swatch set.

Lock a color

Click the lock icon to keep a swatch fixed during regeneration.

Cycle gradients

Click any gradient swatch to cycle through style variants.

Copy CSS

Shift+Click any gradient to copy its CSS string to the clipboard.

Interactions

Click gradientCycle through gradient style variants

Shift+Click gradientCopy CSS gradient code to clipboard

Lock iconPin a swatch so it survives regeneration

DownloadExport the full palette file

🌈

Pro Tip

Shift+Click any gradient for instant CSS code — ready to paste into your stylesheet.

vgtools.pro/notes

How to use

Write a note

Type in the New Note or Task field at the top of the page.

Add as Note

Click Add as Note to save it to the freeform holding area.

Drag to Kanban

Drag any note card onto To Do, In Progress, or Done to track it.

Move columns

Drag cards across columns as work progresses over time.

Search & filter

Use the search bar to find specific notes or cards instantly.

Export backup

Click Export Data to download everything as a JSON file.

Data Management

Export DataDownload all notes and cards as a JSON file

Import DataRestore from a previously exported JSON backup

Clear All DataPermanently erase everything from local browser storage

⚠️

Pro Tip

Export Data regularly — clearing your browser cache permanently deletes all notes and tasks.

vgtools.pro/locator

How to use

Enter locations

Type city names, addresses, or landmarks in the input field.

Separate entries

Use a new line or semicolon (;) between multiple locations.

Add to Map

Click Add to Map to geocode and plot all entries at once.

Fill Countries

Toggle to highlight entire country shapes instead of point markers.

Download

Export as SVG (fully scalable) or PNG for quick sharing.

Controls

New line or ;Separates multiple location entries

Add to MapGeocodes and plots all listed entries

Fill CountriesSwitches between point markers and country fills

Download SVGFully scalable vector — ideal for print

Download PNGRaster export for quick sharing

🗺️

Pro Tip

SVG export is ideal for print-ready reports and further editing in Illustrator or Inkscape.

vgtools.pro/signatures

How to use

Upload signature

Drop an image, click to browse, or paste from clipboard with Ctrl+V.

Adjust Threshold

Controls the black/white cutoff. Raise to capture more ink; lower to clean up.

Adjust Denoise

Removes small speckles and noise artifacts from the traced result.

Adjust Fit Curves

Controls how tightly the SVG paths follow the original pen strokes.

Check the preview

The SVG result updates live on the right as you adjust each slider.

Download SVG

Click Download SVG to save the clean vector file.

Settings

ThresholdInk detection cutoff — raise to capture more, lower to clean

DenoiseRemove small noise artifacts from the trace output

Fit CurvesPath tightness relative to original strokes

Ctrl+VPaste a signature image from clipboard directly

✍️

Pro Tip

Scan at 300 DPI on a clean white background — the cleaner the source, the sharper the vector output.

vgtools.pro/any2svg

How to use

Wait for engine

On first use the engine loads in the background. Use Reload Engine if it stalls.

Select source file

Click Source File to choose your AI, PSD, PDF, or other supported file.

Convert

Click Convert to SVG. A preview appears when the conversion is complete.

Download

Save the resulting SVG from the preview area.

Supported Formats

AIAdobe Illustrator source files

PSDAdobe Photoshop documents

PDFBest results with vector-based PDFs

Reload EngineForce the conversion engine to reinitialize if stalled

🪄

Pro Tip

Vector-based PDFs convert cleanly. Raster-heavy PDFs produce large, complex SVG output.

vgtools.pro/bgremover

How to use

Wait for model

The AI model initializes on first use — takes a few seconds to load.

Upload image

Click the area, drag a file onto it, or paste from clipboard.

Auto-removal

The AI analyzes the image and removes the background automatically.

Download

Save the result as a transparent PNG, ready to use anywhere.

Inputs

Click areaOpen file browser

Drag & dropDrop an image file directly onto the area

Ctrl+VPaste from clipboard

DownloadSaves a transparent PNG with alpha channel

🤖

Pro Tip

The model stays loaded for the session — subsequent images process significantly faster after the first.

vgtools.pro/wordclouds

How to use

Choose input type

Full Text auto-calculates frequencies. Word/Size Table uses your own values.

Paste content

Full Text: paste any block of text. Table: copy two spreadsheet columns (word, size) and paste.

Set word count

In Full Text mode, control how many unique words appear in the cloud.

Generate

Click Generate Cloud to render the visualization.

Export SVG

Click Export as SVG to download the final result.

Input Modes

Full TextPaste any text — word frequencies are calculated automatically

Word/Size TableTwo spreadsheet columns: word | size value — full manual control

Number of WordsControls how many terms appear in Full Text mode

☁️

Pro Tip

Table mode gives full control — decide exactly which words appear and how large each one renders.

vgtools.pro/sankey

How to use

Define a flow

Type a connection: Source → Target, then a numeric value for the flow size.

Add more

Each row defines one connection. Larger values = thicker arrows.

Add levels

Click + Add Next Level to build multi-stage flows with additional columns.

Preview

The diagram renders and updates live as you add data.

Download SVG

Click Download SVG to export at full vector resolution.

Syntax

→ or ->Separator between source and target nodes

Numeric valueControls the proportional arrow width

+ Add Next LevelAdds a new stage column to the flow diagram

📊

Pro Tip

Try 3+ levels for complex budget or process breakdowns — multi-level Sankeys make distributions immediately clear.

vgtools.pro/mockups

How to use

Upload screenshot

Drop or click to upload the UI image you want displayed.

Choose a device

Select from Phone, Tablet, Laptop, Watch, or Monitor.

Choose frame color

Pick a frame color that fits your brand or presentation.

Position the image

Drag to reposition inside the screen. Scroll to zoom in or out.

Download Mockup

Click Download Mockup to export as a transparent PNG.

Controls

DragReposition the screenshot inside the device screen

ScrollZoom the screenshot within the frame

Phone / Tablet / LaptopTouch and desktop device options

Watch / MonitorWearable and large-screen options

Frame ColorCustomize the device housing color

📱

Pro Tip

Transparent PNG output layers perfectly over any background in Figma, Photoshop, or Illustrator.