Create custom SVG shapes – rectangle, circle, ellipse, line, polygon, polyline. Live preview & code
Want to embed this SVG shape generator on your website? Use this code:
The viewBox, coordinate system, and how to position shapes.
Read Tutorial →How to use colors, gradients, and patterns in SVG.
Read Tutorial →| Feature | Our Tool | Tool A | Tool B |
|---|---|---|---|
| Free & unlimited | ✅ | ✅ | ❌ (limit) |
| 6 shape types | ✅ | ✅ | ✅ |
| Live preview | ✅ | ✅ | ✅ |
| Dynamic shape fields | ✅ | ❌ | ✅ |
| Preset polygons (triangle, star, etc.) | ✅ | ✅ | ❌ |
| Download SVG file | ✅ | ❌ | ✅ |
| Client-side / private | ✅ | ❌ | ✅ |
SVG (Scalable Vector Graphics) is an XML‑based format for vector images. It scales perfectly to any size without losing quality and can be styled with CSS and manipulated with JavaScript.
You can copy the code and paste it directly into your HTML. You can also download the SVG file and use it as an image.
For a rectangle, x and y are the top‑left corner coordinates. For a circle, cx and cy are the center coordinates. All coordinates are relative to the SVG viewBox.
This tool focuses on basic shapes. For complex paths, you would need a full vector editor. But you can combine multiple shapes from this generator.
SVG is the standard for vector graphics on the web. It's lightweight, scalable, and interactive. Use it for icons, logos, illustrations, and data visualizations that must look sharp on any screen.
SVG scales seamlessly – no pixelation.
Often smaller file size than raster images.
Change colors with CSS, animate with JavaScript.
Tools to master SVG