SVG Import and Image Vectorization

About 4 min

SVG Import and Image Vectorization

WebCAD provides SVG import and image vectorization features, supporting the conversion of SVG files and raster images into editable vector graphics.

IMPORTSVG - Import SVG

Import an SVG file or paste SVG content into the current drawing.

Command name: IMPORTSVG

Command: IMPORTSVG

Description

After executing the command, the SVG import dialog opens, supporting:

File selection: Click the "Choose File" button to select a local SVG file
Content paste: Paste SVG content directly in the text box
Live preview: The left side shows the original SVG, the middle shows the WebCAD conversion result

Import Options

Option	Description
Display Line Weight	Whether to preserve line weight information from the SVG
Enable Fill	Whether to convert filled areas into fill patterns
Line Weight Scale	Adjust the line weight scale factor (0.1-10)
Allow Scaling	Allow interactive scaling specification during import
Allow Rotation	Allow interactive rotation angle specification during import

Color Handling

For white and black colors in SVG, different processing methods can be selected:

Mode	Description
Keep Original	Keep the original color unchanged
Auto Invert	White becomes black, black becomes white (suitable for dark backgrounds)
Filter Exclude	Do not import graphics of that color (suitable for filtering background color)

API Usage

import { getWebCadCoreService, CadDocument, Engine, Point2D, regen } from 'vjcad';

// 1. Initialize WASM service
const wasmService = getWebCadCoreService();
await wasmService.initWasm();

// 2. Parse SVG to WebCAD data
const webcadData = await wasmService.parseSvgToWebcad(
    svgContent,       // SVG content string
    0,                // whiteColorProcessing: 0=keep, 1=invert, 2=filter
    0,                // blackColorProcessing: 0=keep, 1=invert, 2=filter
    1,                // enableFill: 0=no, 1=yes
    1,                // displayLineWeight: 0=no, 1=yes
    1.0               // lineWeightScale: line weight scale factor
);

// 3. Parse data
const parsedData = JSON.parse(webcadData);
const entities = parsedData.entities || [];

// 4. Build document and insert entities
const docData = {
    appName: "WebCAD SVG Import",
    docVer: 0.3,
    dbBlocks: {
        "*Model": {
            blockId: "*Model",
            name: "*Model",
            isLayout: false,
            basePoint: [0, 0],
            items: entities
        }
    },
    dbLayers: [{
        name: "0",
        layerId: "0",
        layerOn: true,
        color: 7,
        lineType: "Continuous",
        lineWeight: -3
    }]
};

const symbolDoc = new CadDocument();
await symbolDoc.fromDb(docData);

// 5. Merge into current document
const modelBlock = symbolDoc.blocks.itemByName("*Model");
for (const entity of modelBlock.items) {
    if (!entity.isAlive) continue;
    Engine.pcanvas.addEntity(entity.clone());
}

regen();

parseSvgToWebcad Parameters

Parameter	Type	Description
`svgContent`	`string`	SVG content string
`whiteColorProcessing`	`0 \| 1 \| 2`	White processing: 0=keep, 1=invert, 2=filter
`blackColorProcessing`	`0 \| 1 \| 2`	Black processing: 0=keep, 1=invert, 2=filter
`enableFill`	`0 \| 1`	Enable fill: 0=no, 1=yes
`displayLineWeight`	`0 \| 1`	Display line weight: 0=no, 1=yes
`lineWeightScale`	`number`	Line weight scale factor

INSERTIMAGE - Image to Vector

Convert a raster image to vector graphics and import it into the current drawing.

Command name: INSERTIMAGE

Command: INSERTIMAGE

Tip

This command is provided by the insert-plugin plugin. Make sure the plugin is loaded.

Description

After executing the command, the image-to-vector dialog opens, supporting:

Drag and drop import: Drag and drop image files into the preview area
Paste import: Use Ctrl+V to paste images from the clipboard
File selection: Click the "Choose File" button to select a local image
Live preview: The left side shows the original image, the middle shows SVG/WebCAD conversion result

Supported Image Formats

PNG
JPG/JPEG
GIF
WebP
Other image formats supported by the browser

Conversion Settings

Clustering Settings

Option	Description	Value Range
Clustering Mode	Color mode selection	Black & White / Color
Hierarchy Mode	Hierarchy handling in color mode	Cutout / Stacked
Speckle Filter	Threshold for filtering small speckles	0-128 pixels
Color Precision	Number of colors in color mode	1-8
Gradient Step	Gradient smoothness in color mode	0-128

Curve Fitting

Option	Description	Value Range
Curve Mode	Path simplification method	Pixel / Polygon / Spline
Corner Threshold	Corner detection in spline mode	0-180°
Segment Length	Segment length in spline mode	3.5-10
Splice Threshold	Curve joining in spline mode	0-180°

Import Options

Option	Description
Enable Fill	Whether to convert areas into fill patterns
Allow Scaling	Allow interactive scaling specification during import
Allow Rotation	Allow interactive rotation angle specification during import

VectroizeConfig Configuration Details

interface VectroizeConfig {
    /** Color mode: color=color, binary=black & white */
    colorMode: 'color' | 'binary';
    
    /** Hierarchy mode: stacked=stacked, cutout=cutout */
    hierarchical: 'stacked' | 'cutout';
    
    /** Path mode: pixel=pixel, polygon=polygon, spline=spline curve */
    pathMode: 'pixel' | 'polygon' | 'spline';
    
    /** Speckle filter threshold (pixels), default 4 */
    filterSpeckle: number;
    
    /** Color precision (1-8), default 6 */
    colorPrecision: number;
    
    /** Gradient step (0-128), default 16 */
    layerDifference: number;
    
    /** Corner threshold (0-180 degrees), default 60 */
    cornerThreshold: number;
    
    /** Segment length threshold (3.5-10), default 4 */
    lengthThreshold: number;
    
    /** Splice threshold (0-180 degrees), default 45 */
    spliceThreshold: number;
    
    /** Path precision (0-8), default 8 */
    pathPrecision: number;
}

Parameter Details

colorMode - Color Mode

color: Preserves the original image color information, suitable for color images
binary: Converts to black and white binary image, suitable for line drawings, signatures, etc.

hierarchical - Hierarchy Mode

Only effective in color mode:

stacked: Color regions are layered by hierarchy, lower layers are covered by upper layers
cutout: Upper color regions are cut out from lower layers

pathMode - Curve Mode

pixel: Preserves original pixel edges, outputs jagged paths
polygon: Uses line segment fitting, outputs polyline paths
spline: Uses Bézier curve fitting, outputs smooth curves

API Usage

The image-to-vector feature is provided by VectroizeService:

// Import service from plugin
import { getVectroizeService } from 'insert-plugin';

// Get service instance
const service = getVectroizeService();

// Method 1: Convert from image URL
const result = await service.convertImageUrlToSvg(imageUrl, {
    colorMode: 'color',
    hierarchical: 'stacked',
    pathMode: 'spline',
    filterSpeckle: 4,
    colorPrecision: 6
});
// result.svg - Converted SVG string
// result.width - Image width
// result.height - Image height

// Method 2: Convert from File object
const result = await service.convertFileToSvg(file, config);

// Method 3: Convert from Canvas
const result = await service.convertCanvasToSvg(canvas, config);

// Method 4: Convert from pixel data
const svg = await service.convertToSvg(
    pixelData,    // Uint8Array - RGBA pixel data
    width,        // Image width
    height,       // Image height
    config        // VectroizeConfig
);

VectroizeService API

Method	Description
`convertToSvg(data, width, height, config)`	Convert from pixel data
`convertCanvasToSvg(canvas, config)`	Convert from Canvas
`convertImageUrlToSvg(url, config)`	Convert from image URL
`convertFileToSvg(file, config)`	Convert from File object

Use Cases

SVG Import

Icon import: Import SVG icons as CAD graphics
Logo import: Import vector logos into drawings
Graphic reuse: Import SVG graphics exported from other software

Image to Vector

Scanned drawing processing: Convert scanned drawings into editable vector graphics
Hand-drawn sketch digitization: Convert hand-drawn sketch photos into vector lines
Logo vectorization: Convert raster logos into vector format
Signature digitization: Convert signature images into vector paths

Best Practices

SVG Import:
- Ensure SVG content format is correct before importing
- Choose the appropriate color processing mode based on the background color
- Complex SVGs may require line weight scale adjustments
Image to Vector:
- High-contrast images yield better results
- Black and white mode is recommended for line drawings
- Spline curve mode is recommended for color images
- Adjusting the speckle filter can reduce noise

Next Steps

File Operations - DWG import and export
System Commands - Other system commands
Symbol Commands - Symbol management