label-studio.git

---
title: VectorLabels - Beta 🧪
type: tags
order: 433
meta_title: Vector Label Tag for Labeling Vectors in Images

meta_description: Use the VectorLabels tag and label vectors in images for semantic segmentation machine learning and data science projects.

The VectorLabels tag is used to create labeled vectors.

Use with the following data types: image.

Screenshot

Path and point basics

Action	Instruction
Add points	Click on empty space.
Add points to path segments	Press `Shift` while clicking on a segment that is between two points.
End or exit the path	Press `Esc` or click on the last point you added to the path.
Move points	If you are actively creating the path, simply backtrack and click a point and drag to reposition. If you have already exited the path, first select it again and then click an existing point to drag.
Delete points	Press `Alt` or `Option` and click on an existing point.

!!! note
Several options require you to complete the path and then re-select it as a region.

To do this, you must first exit the path and then reselect it by clicking on a segment within the path or by clicking it under the **Regions** panel. 

Selected paths are highlighted red. For this reason, you should avoid red when choosing label colors for your vector paths.

Advanced

Multi-select

With multi-select, you can drag multiple points to reposition or rotate them.

Screenshot

Action	Instruction
Select multiple points	To select all points in the path, press `Cmd` or `Ctrl` and then click any point in the path. To select individual points in a path, first select the path as a region (see the note above). Then press `Cmd` or `Ctrl` as you click points.
Transform selection	Use transformer handles for rotation, scaling, and translation
Clear selection	Click on any point or press `Esc`.

Bézier curves

To use Bezier curves, you must enable them using the curves="true" parameter in your labeling configuration. Control points are shown when editing bezier points.

Screenshot

Action	Instruction
Create a curve	As you click to add a point, hold while dragging your cursor.
Create a new curve point	Press `Shift` while dragging a control point.
Adjust a curve	First exit the path and then re-select it as a region. Then you can click and drag control points.
Convert a point to a curve	Press `Shift` and click the point once.
Asymmetric curves	By default, the control points move in sync. To create asymmetric curves (only move one control point), press `Alt` or `Option` before clicking the control point.

Closed paths

You can create closed paths to create polygon shapes. To create closed paths, use the closable="true" parameter in your labeling configuration.

Screenshot

Action	Instruction
Break closed path	Press `Alt` or `Option` and click on a segment in a closed path to reopen it.

Skeleton

You can create skeleton vectors using the skeleton="true" parameter in your labeling configuration.

When enabled, new points connect to the active point and not the last added point.

Screenshot

Usage examples

Basic vector path

<View>
 <Image name="image" value="$image" />
 <VectorLabels name="labels" toName="image">
   <Label value="Road" />
   <Label value="Boundary" />
 </VectorLabels>
</View>

Polygon with Bezier support

<View>
 <Image name="image" value="$image" />
 <VectorLabels
   name="polygons"
   toName="image"
   closable="true"
   curves="true"
   minPoints="3"
   maxPoints="20"
 >
   <Label value="Building" />
   <Label value="Park" />
 </VectorLabels>
</View>

Skeleton mode for branching paths

<View>
 <Image name="image" value="$image" />
 <VectorLabels
   name="skeleton"
   toName="image"
   skeleton="true"
   closable="false"
   curves="true"
 >
   <Label value="Tree" />
   <Label value="Branch" />
 </VectorLabels>
</View>

Keypoint annotation tool

<View>
 <Image name="image" value="$image" />
 <VectorLabels
   name="keypoints"
   toName="image"
   closable="false"
   curves="false"
   minPoints="1"
   maxPoints="1"
 >
   <Label value="Eye" />
   <Label value="Nose" />
   <Label value="Mouth" />
 </VectorLabels>
</View>

Constrained drawing

<View>
 <Image name="image" value="$image" />
 <VectorLabels
   name="constrained"
   toName="image"
   closable="true"
   curves="true"
   constraintoBounds="true"
   snap="pixel"
   minPoints="4"
   maxPoints="12"
 >
   <Label value="Region" />
 </VectorLabels>
</View>

Tag parameters

{% insertmd includes/tags/vectorlabels.md %}

Result parameters

Kind: global typedef
Returns: VectorRegionResult - The serialized vector region data in Label Studio format
Properties

Name	Type	Description
original_width	`number`	width of the original image (px)
original_height	`number`	height of the original image (px)
image_rotation	`number`	rotation degree of the image (deg)
value	`Object`
value.vertices	`Array.<Object>`	array of point objects with coordinates, bezier curve information, and point relationships
value.closed	`boolean`	whether the vector is closed (polygon) or open (polyline)
value.vectorlabels	`Array.<string>`	array of label names assigned to this vector

Example results JSON export

{
  "original_width": 1920,
  "original_height": 1280,
  "image_rotation": 0,
  "value": {
    "vertices": [
      { "id": "point-1", "x": 25.0, "y": 30.0, "prevPointId": null, "isBezier": false },
      { "id": "point-2", "x": 75.0, "y": 70.0, "prevPointId": "point-1", "isBezier": true,
        "controlPoint1": {"x": 50.0, "y": 40.0}, "controlPoint2": {"x": 60.0, "y": 60.0} }
    ],
    "closed": false,
    "vectorlabels": ["Road"]
  }
}