Meta Vector (M.Vector) User Guide & SVG Illustration | MetaFile Cloud
Professional Scalable Vector Graphics, Cubic Bezier Pen & Pathfinder Studio.
Overview
Meta Vector (M.Vector) is a professional graphic design, branding, and vector illustration studio running directly in your web browser. Built on an advanced SVG rendering engine, M.Vector delivers the precision and flexibility of desktop vector suites like Adobe Illustrator without high subscription fees. It features a precision cubic Bezier Pen tool with independent handle manipulation, Boolean Pathfinder operations (Unite, Minus Front, Intersect, Exclude), multi-artboard workflows, linear/radial gradients, and an AI Vector generator that transforms text prompts into scalable, editable SVG code.
Core Capabilities & Features
Cubic Bezier Pen & Node Editor
Plot precision vector curves with smooth anchor points, corner points, and symmetrical or disconnected directional handles.
Boolean Pathfinder Operations
Combine simple shapes into intricate logos and brand icons using Unite, Minus Front (Subtract), Intersect, and Exclude path operations.
Multi-Artboard Canvas & Gradients
Design responsive icon sets, social banners, and branding kits across multiple artboards with customizable stroke caps, dashes, and linear/radial gradients.
AI Vector Graphic Synthesizer
Prompt the AI: "Create a modern flat vector icon of a cloud server with glowing cybernetic circuits" to generate cleanly structured SVG artwork.
Step-by-Step User Guide (How to Use)
Follow these simple steps to start working productively with M.Vector:
Create a Vector Canvas or Select an Icon Template
Open M.Vector from your workspace or pick our Cloud Architecture & Tech Infographic vector kit in storage.template to explore pre-built vector assets.
Draw Custom Shapes with Pen & Pathfinder
Use the Pen tool (P) to trace outlines. Apply Pathfinder Minus Front to punch holes. Use the gradient tool to blend modern cybernetic color transitions.
Export Clean Scalable SVG
Save to your private workspace with autosave, or export resolution-independent SVG and high-DPI PNG graphics for your website or app.
Interface & Ribbon Toolbar Reference
Detailed explanation of every button, menu action, and tool available on the interface:
| Tool / Action | Shortcut / Access | Detailed Functionality & How to Use |
|---|---|---|
| Selection Tool | V | Select, move, scale, and rotate whole shapes, groups, and artboards. |
| Direct Selection (Node) | A | Select and manipulate individual anchor points and Bezier curve handles. |
| Pen Tool | P | Click to create corner nodes; click-and-drag to pull out smooth Bezier tangent handles. |
| Shape Tools | M / L | Quickly insert rectangles, rounded boxes, circles, stars, and polygons. |
| Tool / Action | Shortcut / Access | Detailed Functionality & How to Use |
|---|---|---|
| Pathfinder Unite | Shift + Ctrl + U | Merges selected overlapping paths into a single unified compound vector. |
| Pathfinder Minus Front | Shift + Ctrl + M | Cuts the shape of the topmost object out of the bottom object. |
| Export SVG | Ctrl + E | Exports clean, minified, human-readable SVG code ready for web and mobile apps. |
Template Library (storage.template)
Explore standardized, professionally pre-designed templates stored in storage.template. You can click Preview (Read-Only) to inspect any template in view-only mode, or click Use / Edit Template to duplicate it directly into your private workspace.
Cloud Microservices Architecture Infographic
Scalable SVG vector illustration showcasing API gateways, tenant isolation, and AI compute nodes.
Keyboard Shortcuts Reference
| Keystroke | Action Executed |
|---|---|
| V | Activate Selection tool |
| A | Activate Direct Selection (node edit) tool |
| P | Activate Pen tool |
| M | Activate Rectangle shape tool |
| L | Activate Ellipse shape tool |
| Alt + Click Handle | Split Bezier handle into sharp corner |
Frequently Asked Questions
Yes. Upload your SVG file to your workspace. M.Vector preserves vector paths, fills, strokes, groups, and clip paths accurately.
Yes. The exporter produces standards-compliant W3C SVG with clean IDs, semantic path tags, and no proprietary vendor junk.