label-studio.git

---
title: Vector - Beta 🧪
type: tags
order: 430
meta_title: Vector Tag for Adding Vectors to Images

meta_description: Use the Vector tag by adding vectors to images for segmentation machine learning and data science projects.

The Vector tag is used to add vectors to an image without selecting a label. This can be useful when you have only one label to assign to the vector.

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

Tag parameters

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

Example

Basic labeling configuration for vector image segmentation

<View>
    <Vector name="line-1" toName="img-1" />
    <Image name="img-1" value="$img" />
</View>

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)

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
  }
}