Topics

Vector Drawing

Draw and edit vector artwork directly in Sitely. Use simple shapes for icons and badges, paths for custom outlines, and sketches for hand-drawn marks.

One Vector Drawing can contain several shapes, each with its own geometry, fill and stroke. The examples below are native editable drawings, rather than screenshots.

Add shapes to a drawing

Insert a Vector Drawing, then use Add Shape in the Style inspector. Choose Sketch, Lines, Curve, Arrow, Rectangle, Ellipse, Squircle, Polygon, Star or Blob. Select an entry in the drawing’s shape list to edit it.

Left to right: polygon, rounded star, squircle, blob, curve and a variable-width sketch. All belong to the same drawing.

Adjust geometry

Rectangle and ellipse use position and size controls. Polygon adds Sides; Star adds Points and Inner Radius. Rounding softens corners where supported. Squircle controls the transition between square and rounded contours. Blob uses point count, randomness and a seed: change the seed for another variation of the same idea.

Geometry is measured relative to the drawing’s canvas. Resize the whole element to scale the composition, or select a shape to adjust that shape inside it. Leave enough room for its stroke around the edges.

Edit paths on the canvas

Select a Curve or Lines shape and choose Edit Path to work with its points. Drag a point to change the outline, double-click a point to remove it, or use its context menu for the available point operations. A Curve interpolates a smooth path through its points; Lines joins them with straight segments.

An Arrow has three control points for its ends and bend. Use Transform to move or resize the selected path as a whole. Switch to Draw when you want to add freehand strokes instead of changing existing points.

Draw a sketch

Add Sketch and enter its drawing mode. Draw with a mouse, trackpad or Apple Pencil. On supported iPad hardware, Pencil pressure and tilt give the stroke a more natural width and direction. Enable variable width when the mark should retain those changes.

Choose a solid or gradient stroke for a clean line, or Brush for a textured mark. The drawable brush choices are Brush, Pencil and Pastel; Ink is the plain stroke treatment. Stroke width sets the drawing’s base thickness.

On iPad, supported Apple Pencil gestures give quick access to editing tools and the quick palette. Use the visible tool controls when your Pencil model does not offer a gesture.

Set fill, stroke and opacity

Enable Fill for a colored interior and Stroke for the outline. Both can use a solid color, a linear gradient or a radial gradient. Set the stroke width and overall opacity separately. Close a path when its outline should join back to its starting point.

The arrow and badge below combine a gradient fill with a contrasting stroke. Reordering shapes in the drawing changes which one appears in front.

A gradient badge, a curved arrow and a layered ellipse: separate shapes with independent styling.

Reuse and refine the artwork

Duplicate a shape to reuse its styling, reorder it to change the stack, or delete it from the list. Convert a geometric shape to a path or sketch when you need direct point editing; its former procedural controls may no longer apply after conversion.

Vector geometry exports as SVG and scales with the drawing. Textured brush marks can include image-based texture, so inspect them at the size visitors will see. Add a useful accessibility description when the artwork communicates information; keep essential wording in ordinary text elements.

Check the full drawing in Preview after resizing or changing a path. See Color and Gradients for the site palette and Accessibility for descriptions and reading order.

Please report any shortcoming in this documentation and we’ll fix it as soon as possible!

Updated for Sitely 8