ToolBunny LogoToolBunny
Back to Homepage
SVG Shape Generator

Design your SVG shape, then copy the code or download the file.

Controls
4px
100px
100px
Preview
Generated SVG Code
<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <rect width="100" height="100" fill="#3b82f6" stroke="#1e40af" stroke-width="4" />
</svg>
About This Tool

The SVG Shape Generator is a creative tool for quickly generating Scalable Vector Graphics (SVG) code for basic shapes. It's perfect for developers, designers, and hobbyists who need simple icons, placeholders, or graphical elements for their projects. You can choose from various shapes like rectangles, circles, stars, and polygons, and customize their properties—such as size, color, and stroke—with a live preview. Once you're done, you can copy the generated SVG code or download the shape as a `.svg` file.

How to Use
  1. Select a shape type from the tabs: Rectangle, Circle, Star, or Polygon.
  2. Use the controls on the left to customize the shape's properties. These controls will change depending on the selected shape (e.g., "Points" for a star, "Sides" for a polygon).
  3. Adjust common properties like "Fill Color," "Stroke Color," "Stroke Width," "Width," and "Height."
  4. The "Preview" card will update in real-time to show your customized shape.
  5. The "Generated SVG Code" box will display the raw SVG code for your shape.
  6. Click "Copy Code" to copy the SVG markup to your clipboard, or click "Download .svg" to save the shape as a file.