Vector. New Element In Tilda's Zero Block

February 21, 2023

Vector. New Element In Zero Block (beta)

You can now create and edit vector elements in Zero Block. With the new vector editor, you can design any kind of shapes and basic illustrations for the website, as well as refine imported SVG files.

Vector Editor: 4 Tools

Draw (D)

This tool allows you to draw an element. You can draw with straight and curved lines. If you want to draw an open shape, use ESC or double-click on the final point of the drawing. If you close the shape, the drawing is automatically completed and you switch to the Select tool.

If you don't have enough control points on the completed shape, you can add them using the Draw tool.

Select (S)

Using the Select tool, you can specify the fill and stroke color, as well as the stroke width. You can also move, rotate, and zoom in and out your drawing as a single vector element using this tool. Additional options are available in the context menu which opens with a right-click.

A quick tip: To make it easier to work with the composition, create an independent vector element for each shape or illustration. If you have a complex illustration or many small shapes that are linked together, it's better to work on the composition inside the vector editor.

Edit (E / double-click on the element)

The Edit tool allows you to modify vectors using anchor points, segments, and Bezier curves. Modify vectors using anchor points, segments, and Bezier curves. Double-click on a point to round or sharpen the edge and right-click to open the context menu. Just like with the Select tool, you can change colors and the width of strokes.

Modifications of the element's shape, color, and other parameters are applied to all screen resolutions at once, no matter what screen layout you're editing.

Bend (B)

Use the Bend tool to curve existing lines and work with anchor points. This tool is for vector outline modifications—design parameters can be adjusted using the Select and Edit tools.

How To Import SVG Files

Right-click on the artboard and select "Import SVG here" in the context menu. For a smooth experience, it is recommended to upload SVG files no larger than 20KB.

Gradient and mask transfer will be available in the future updates.

The vector editor can be useful if you need unique shapes, free icons, or small drawn elements, such as underlines or arrows. It can also be easier to improve an imported SVG element directly in Tilda.

The Vector element is in beta. If you encounter any unexpected behavior of the element, please contact our support or email us at team@tilda.cc. This will help us make prompt improvements.