# Areas
You can define the design area by resizing and repositioning the area rectangle
![](/optimized/productdesigner/images/areas-1x.webp)
That way, when the customer adds a design item, this item will be adjusted to the area instead of the whole image.
![](/optimized/productdesigner/images/area-display-1x.webp)
The area can also be used to crop the final SVG
In this case, the SVG will have this layout
![](/optimized/productdesigner/images/area-only-1x.webp)
← Image groups Fields →