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
VGTools Pro homepage
Table of Contents

What's Inside

01 vgtools.pro/brickbuilder

Brick Builder

Design and build 2D brick structures with a drag-and-drop canvas. Snap to grid, group elements, export as print-ready SVG.

SVG ExportDrag & DropGrid SnapGroupingLayers
v2.3.0
vgtools.pro/brickbuilder
Brick Builder screenshot
How to use
01
Select a brick
Choose any shape — bricks, slopes, arches — from the sidebar panel.
02
Place & snap
Click the canvas to place. Items snap to grid automatically.
03
Move & resize
Drag to reposition. Type exact values in the Properties Panel for pixel-perfect sizing.
04
Multi-select & color
Shift+click or drag a marquee to select multiple bricks, then apply one color to all at once.
05
Group elements
Press Ctrl+G to lock pieces together so they move as one unit.
06
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.
02 vgtools.pro/svgrecolor

SVG Recolor

Analyze any SVG and recolor it by hue family. Swap individual swatches or shift entire color groups with one slider.

Hue GroupingBatch ShiftPresetsPowerPoint-Ready
v1.0.0
vgtools.pro/svgrecolor
SVG Recolor screenshot
How to use
01
Drop your SVG
Upload a file — all colors are detected and auto-grouped by hue family.
02
Review groups
Colors appear in buckets: Reds, Oranges, Yellows, Greens, Cyans, Blues, Purples, Magentas, Grays.
03
Swap a swatch
Click any color circle to open the picker and replace that exact color.
04
Batch shift
Drag the Hue Shift slider per group to rotate that entire family across the spectrum.
05
Save preset
Hit Save to store slider positions — reload on any future file with one click.
06
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.
03 vgtools.pro/moodboards

Moodboard Studio

Assemble stunning visual boards for clients. Drag in images, add a logo, and let the tool extract a color palette automatically.

Auto PaletteLogo UploadPNG ExportClient-Ready
v1.0.0
vgtools.pro/moodboards
Moodboard Studio screenshot
How to use
01
Drag in images
Drop image files onto the canvas, or click + to browse your files.
02
Add a logo
Use the Logo button to place a brand logo on the board (optional).
03
Enter client name
Fill the Client field to label the presentation correctly.
04
Review auto palette
Colors extract from your images automatically. Click any swatch to override.
05
Reset palette
Click Reset to discard overrides and regenerate from the current images.
06
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.
04 vgtools.pro/blobs

Blob Studio

Generate smooth, organic SVG blob shapes procedurally. Dial in complexity, softness, and wildness — every click is unique.

ProceduralLive PreviewURL SharingSVG Export
v1.0.0
vgtools.pro/blobs
Blob Studio screenshot
How to use
01
Set Points
Number of anchor points. More = more complex, jagged edges.
02
Set Smoothness
How soft the curves between points are. Higher = pillowy and round.
03
Set Variance
How irregular and asymmetric the shape is. Higher = wild and organic.
04
Generate
Click Generate — every click produces a completely new unique shape.
05
Share via URL
The blob is encoded in the page URL. Copy it to save or share.
06
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.
05 vgtools.pro/jigsaws

Jigsaw Generator

Design and export custom vector jigsaw puzzle grids. Full control over rows, columns, gap, and tab size. Laser-cutter ready SVG output.

ProceduralLaser-Cut ReadySVG Export100% Local
v1.0.0
vgtools.pro/jigsaws
Jigsaw Generator screenshot
How to use
01
Set Columns
Number of horizontal pieces across the puzzle.
02
Set Rows
Number of vertical pieces down the puzzle.
03
Set Gap
Spacing between pieces in the exported SVG.
04
Set Tab Size
Controls how large the interlocking tab protrusions are.
05
Generate
Click Generate — tab shapes randomize every single time.
06
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.
06 vgtools.pro/iconfactory

Icon Factory

Build custom icons by layering frame and particle shapes. Save a collection and download all as individual SVGs in one ZIP.

Shape BuilderCollectionSVG ZIPClipboard Copy
v1.0.0
vgtools.pro/iconfactory
Icon Factory screenshot
How to use
01
Choose a Frame
Select the outer base shape from the Frame panel on the left.
02
Choose a Particle
Select the inner overlay from the Particle panel.
03
Preview
The combined icon renders live in the canvas area.
04
Add to Collection
Click + Add to collection to save the current icon.
05
Build your set
Keep swapping shapes — build as many icons as needed.
06
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.
07 vgtools.pro/qrcodes

QR Code Generator

Create custom QR codes for URLs, emails, phones, SMS, WiFi networks, and vCards. All generated locally — nothing leaves your browser.

6 QR Types100% LocalInstant DownloadPrivate Data
v1.0.0
vgtools.pro/qrcodes
QR Code Generator screenshot
How to use
01
Select type
Choose from URL/Text, Email, Phone, SMS, WiFi Network, or vCard.
02
Fill the fields
Each type shows only the fields it needs — no clutter.
03
Generate
Click Generate to render the QR code.
04
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.
08 vgtools.pro/palettes

Color Mixer

Generate harmonic color palettes and beautiful live gradients from a single base color. Copy CSS directly or export the full palette.

4 Palette TypesLive GradientsCSS ExportLock Colors
v2.0
vgtools.pro/palettes
Color Mixer screenshot
How to use
01
Pick a base color
Use the color picker to choose your starting hue.
02
Choose palette type
Analogous, Monochromatic, Triadic, or Complementary.
03
Generate
Click Generate for the full palette and gradient swatch set.
04
Lock a color
Click the lock icon to keep a swatch fixed during regeneration.
05
Cycle gradients
Click any gradient swatch to cycle through style variants.
06
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.
09 vgtools.pro/notes

Notepad & Kanban

Capture ideas fast as freeform notes, then drag them into a Kanban workflow with To Do, In Progress, and Done columns. Auto-saves locally.

Auto-SaveDrag & DropJSON ExportLocal Storage
v1.0.0
vgtools.pro/notes
Notepad & Kanban screenshot
How to use
01
Write a note
Type in the New Note or Task field at the top of the page.
02
Add as Note
Click Add as Note to save it to the freeform holding area.
03
Drag to Kanban
Drag any note card onto To Do, In Progress, or Done to track it.
04
Move columns
Drag cards across columns as work progresses over time.
05
Search & filter
Use the search bar to find specific notes or cards instantly.
06
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.
10 vgtools.pro/locator

Locator

Type a list of locations and visualize them as markers on an interactive world map. Geocoding runs locally. Export as scalable SVG or PNG.

Batch GeocodingWorld MapFill CountriesSVG & PNG Export
v2.1
vgtools.pro/locator
Locator screenshot
How to use
01
Enter locations
Type city names, addresses, or landmarks in the input field.
02
Separate entries
Use a new line or semicolon (;) between multiple locations.
03
Add to Map
Click Add to Map to geocode and plot all entries at once.
04
Fill Countries
Toggle to highlight entire country shapes instead of point markers.
05
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.
11 vgtools.pro/signatures

Signature to SVG

Convert a photo or scan of a handwritten signature into a clean, scalable SVG vector. Powered by Potrace with real-time preview.

Potrace EngineReal-Time PreviewClipboard PasteSVG Download
v1.0.0
vgtools.pro/signatures
Signature to SVG screenshot
How to use
01
Upload signature
Drop an image, click to browse, or paste from clipboard with Ctrl+V.
02
Adjust Threshold
Controls the black/white cutoff. Raise to capture more ink; lower to clean up.
03
Adjust Denoise
Removes small speckles and noise artifacts from the traced result.
04
Adjust Fit Curves
Controls how tightly the SVG paths follow the original pen strokes.
05
Check the preview
The SVG result updates live on the right as you adjust each slider.
06
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.
12 vgtools.pro/any2svg

Any2SVG

Convert Adobe Illustrator, Photoshop, PDF, and more to SVG — powered by a browser-based conversion engine. Fully offline, no uploads.

Multi-Format100% LocalNo UploadBrowser Engine
v1.0.0
vgtools.pro/any2svg
Any2SVG screenshot
How to use
01
Wait for engine
On first use the engine loads in the background. Use Reload Engine if it stalls.
02
Select source file
Click Source File to choose your AI, PSD, PDF, or other supported file.
03
Convert
Click Convert to SVG. A preview appears when the conversion is complete.
04
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.
13 vgtools.pro/bgremover

Background Remover

AI-powered background removal running 100% in your browser. Upload any photo, isolate the subject instantly — no data ever leaves your device.

AI Model100% LocalTransparent PNGNo Upload
v1.0.0
vgtools.pro/bgremover
Background Remover screenshot
How to use
01
Wait for model
The AI model initializes on first use — takes a few seconds to load.
02
Upload image
Click the area, drag a file onto it, or paste from clipboard.
03
Auto-removal
The AI analyzes the image and removes the background automatically.
04
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.
14 vgtools.pro/wordclouds

Word Cloud Generator

Transform any block of text or a word frequency table into a beautiful, scalable word cloud visualization powered by D3.js.

Full Text ModeFreq Table ModeD3.js PoweredSVG Export
v1.0.0
vgtools.pro/wordclouds
Word Cloud Generator screenshot
How to use
01
Choose input type
Full Text auto-calculates frequencies. Word/Size Table uses your own values.
02
Paste content
Full Text: paste any block of text. Table: copy two spreadsheet columns (word, size) and paste.
03
Set word count
In Full Text mode, control how many unique words appear in the cloud.
04
Generate
Click Generate Cloud to render the visualization.
05
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.
15 vgtools.pro/sankey

Sankey Diagram

Create professional flow diagrams where arrow widths are proportional to values. Visualize budgets, energy flows, and multi-stage processes beautifully.

Flow VisualizationMulti-LevelProportional WidthsSVG Export
v1.2.0
vgtools.pro/sankey
Sankey Diagram screenshot
How to use
01
Define a flow
Type a connection: Source → Target, then a numeric value for the flow size.
02
Add more
Each row defines one connection. Larger values = thicker arrows.
03
Add levels
Click + Add Next Level to build multi-stage flows with additional columns.
04
Preview
The diagram renders and updates live as you add data.
05
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.
16 vgtools.pro/mockups

Device Mockups

Wrap your UI screenshots inside realistic device frames. Choose from phones, tablets, laptops, watches, and monitors. Export as transparent PNG.

5 Device TypesFrame ColorsDrag to PositionTransparent PNG
v1.0.0
vgtools.pro/mockups
Device Mockups screenshot
How to use
01
Upload screenshot
Drop or click to upload the UI image you want displayed.
02
Choose a device
Select from Phone, Tablet, Laptop, Watch, or Monitor.
03
Choose frame color
Pick a frame color that fits your brand or presentation.
04
Position the image
Drag to reposition inside the screen. Scroll to zoom in or out.
05
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.