Add a shape

The shape tools let you draw basic geometric shapes—ovals, rectangles, and lines—on the stage. Along with the Pen tool, the shape tools create content as SVG elements.

Shapes Overview

Google Web Designer versions 1.9.1 and older use a canvas tag for shapes. Newer versions of Web Designer automatically convert canvas shapes to SVG. Converted ovals with an inner radius may appear differently after conversion 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 bar at the top. You can also adjust the corner radius of rectangles, and the inner radius of ovals.
4. Click the stage 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 - Press Shift + drag to constrain the shape to a circle.
   • Rectangle - Press Shift + drag to constrain the shape to a square.
   • Line - Press Shift + drag to constrain angles to increments of 45°.
   To center the shape at a particular point, hold the Alt key and start dragging from the center point.

After drawing a shape, you can modify its properties in the Properties panel. Learn more about resizing SVG shapes.

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.