Vector Editor In Zero Block

How to create your own vector images on Tilda

In Zero Block editor, you can create your own vector image in the built-in vector editor. To do this, click the plus button for adding new elements → Add Vector.

In Zero Block: the "Add Vector" option in the elements menu under the plus button in the upper-left corner.

Go to Element Settings and click the "Edit Vector" button. You can also start working with the vector by double-clicking the element.

Zero Block: the "EDIT VECTOR" button in the "ELEMENT SETTINGS" panel on the right.

The vector image editor will open. There are 4 tools available: Select Tool, Draw Tool, Bend Tool, and Edit Tool for anchor points.

Draw Tool

The Draw tool allows you to create a new vector by adding Bezier curves with anchor points (on click) and adjusting the curve handles. With this tool, you can create straight and curved lines.

If you hold down the Shift key, the next anchor point will be positioned horizontally, vertically, or diagonally at a 45-degree angle with respect to the previous point.

To close the path, add the last point over the first one. To keep the shape open, double-click the last point or use the ESC key.

Select Tool

The Select tool allows you to select, drag, scale, and rotate separate shapes you've created, as well as configure their settings—fill and stroke color and width.

Vector editor in Zero Block: a duplicated curved vector shape being moved and positioned on the canvas.

There are four scaling modes:

Free. The element is freely resized, and the aspect ratio is not maintained.
Proportional (Shift key held down). The element is resized, and the aspect ratio is maintained.
Resize from center (Alt/Option key held down). The element keeps its position relative to the central point. The aspect ratio is not maintained.
Resize proportionally from center (Shift + Alt/Option keys held down). The element keeps its position relative to the central point. The aspect ratio is maintained.

Examples of the 4 scaling modes

There are two ways to rotate elements:

Free. The element can be rotated arbitrarily by moving the cursor over the corner of the element.
Rotation with a 15-degree step (Shift key held down).

To reset rotation, right-click to open the context menu of the element and select "Reset rotation."

To mirror the element vertically or horizontally, use the context menu options: Flip Horizontal, Flip Vertical.

Zero Block Vector Editor: context menu for a selected vector shape with options to copy, paste, delete, arrange, and flip.

Bend Tool

The Bend tool allows you to change separate curve segments and the angle of the curve handles for the anchor points after you've created a vector.

Vector editor in Zero Block: the top toolbar with drawing tools, "FILL", "STROKE", and "SAVE & CLOSE" button over an edited shape.

Edit Tool

The Edit tool allows you to edit anchor points (move them around and edit Bezier curves) and modify segments between two anchor points. To enable this tool, double-click the element you want to edit.

Zero Block: vector editor toolbar at the top and an editable curved path with anchor points on the canvas.

Several Shapes In One Vector Image

You can create several shapes within one vector image. To place them above or below each other (as layers), open the context menu with the right-click on the element and select the "Bring to front" or "Send to back" option. You can also use the ] or [ shortcuts.

To delete an element, hit the Backspace key or use the context menu.

Vector editor in Zero Block: the context menu for a selected shape with options like "Bring to front", "Send to back", and flip settings.

SVG Files Import

Use the context menu, toolbar menu, or Cmd/Ctrl+l keyboard shortcuts to import an image. You can import any SVG image up to 20KB.

Zero Block vector editor: the three-dots menu on the top toolbar with the "Shortcuts" and "Import SVG" options.

The vector editor in Zero Block with a context menu showing the "Paste here", "Import SVG here", and "Save and close" options.

Converting a vector element to an image and back

To convert a vector element to an image in SVG format, select the element on the artboard and click on the Convert to Image button in the right settings panel.

In Zero Block: the "Convert to Image" option in the "VECTOR EDITOR" section of the "ELEMENT SETTINGS" panel.

After conversion, the vector element will be displayed in the layers list as Image, and the file title and extension will be displayed in the element settings.

To edit the received SVG file, click on Edit — the vector editor will open. Once you exit the editor, the element will be saved and converted to an SVG file again.

To convert the SVG file back to a vector element — select the element and click on to Vector.