Add a shape

The shape tools let you draw basic geometric shapes -- ovals, rectangles, and lines -- in the document workspace. Along with the Pen tool, the shape tools create content as SVG elements.

Google Web Designer versions 1.9.1 and older use a canvas tag for shapes. Newer versions of Web Designer will automatically convert canvas shapes to SVG. Converted ovals with an inner radius may appear differently and need adjustment.

To add a shape to your project:

  1. Click and hold the Pen tool in the toolbar. (If you've used another shape tool, it may be displayed in the toolbar instead.)
  2. Select the shape you want to use from the pop-up menu.
  3. Optionally, customize the shape by changing the stroke and color attributes in the tool options panel. You can also adjust the corner radius of rectangles, and the inner radius of ovals.
  4. Click within the document workspace and hold down the mouse button, dragging the cursor until the shape reaches the size you want. You can press the Shift key while drawing the shape to constrain it as follows:
    • Oval - Shift + drag to constrain the shape to a circle.
    • Rectangle - Shift + drag to constrain the shape to a square.
    • Line - Shift + drag to constrain angles to increments of 45°.

After drawing a shape, you can modify its properties in the Properties panel.

Oval shapes can only have their width and height specified in pixels, not as percentages. If you need to use percentage-based dimensions, you can draw a rectangle shape with rounded corners to simulate an oval.
Was this article helpful?
How can we improve it?