About Compare All Tools

SVG Shape Generator

Create editable SVG shapes, polygons, stars and badges in seconds.

SVG shape generation

Create editable SVG shapes, polygons, stars and badges.

Pick a shape, set the size, colors, stroke and rotation, then generate clean, editable SVG you can use as a UI accent, badge, icon base, sticker, label or simple vector asset. Every shape is centered and generated locally in your browser. Nothing is uploaded and no external assets are referenced.

Local only Centered shape Editable SVG No upload
Settings

Shape settings

Adjust the controls and click Generate Shape. Randomize fills in a safe combination; Reset restores the defaults.

Shape—
Canvas—
Shape size—
Stroke—
SVG size—
Status—
Preview

Live shape preview

Click Generate Shape to preview the result.

Generated locally Editable SVG Centered shape Transparent background: off No upload No external assets
Output

SVG markup

The generated SVG appears here. It is editable, dependency-free markup — copy it into your project or download it as a file.

How It Works

SVG Shape Generator creates editable SVG shapes entirely in your browser. Unlike the Edit and Manipulate tools, it does not take an existing SVG as input — instead it builds brand new SVG markup from the settings you choose. Pick a shape type (circle, ellipse, rectangle, rounded rectangle, triangle, diamond, pentagon, hexagon, octagon, star, heart, arrow, speech bubble or badge / seal), set the canvas size and shape size, choose fill, stroke and background colors, stroke width, opacity, rotation, corner radius and the number of points or sides, then click Generate Shape. The tool computes the geometry from your settings — using native SVG circle, ellipse and rect elements for the basic shapes, calculated polygon points for the regular polygons, stars and badges, and clean Bezier or line paths for the heart, arrow and speech bubble — and centers the result inside the canvas. If you set a rotation, the shape is wrapped in a group that rotates around the canvas center. The output appears as clean, readable SVG markup you can copy or download. Everything is deterministic: the same settings always produce the same SVG. There is no upload, no API, no AI and no external assets — the markup is self-contained and stays editable.

Use Cases

  • Creating a star, badge or seal shape to use as the base for a discount sticker, award ribbon or 'new' label in a UI
  • Generating a hexagon, pentagon or diamond as an icon background or avatar frame for a design system, exported as a small inline SVG
  • Producing a speech bubble or arrow as a callout or annotation element for documentation, onboarding screens or diagrams
  • Building a simple heart, circle or rounded rectangle as a button background, chip or decorative accent that scales crisply at any size
  • Prototyping color and geometry options quickly with Randomize, then exporting the editable SVG to fine-tune the points or colors by hand in your own project

FAQ

Does SVG Shape Generator need an SVG file as input?

No. This is a generator, not an editor. It does not take an existing SVG and does not show a source input box. You choose the shape settings and the tool produces brand new SVG markup from scratch. The only SVG you will see is the generated output, which you can copy or download.

Which shapes are supported?

The first release includes fourteen shapes: circle, ellipse, rectangle, rounded rectangle, triangle, diamond, pentagon, hexagon, octagon, star, heart, arrow, speech bubble and badge / seal. Basic shapes use native SVG elements, the polygons, stars and badges are computed from a center point and radius, and the heart, arrow and speech bubble use simple paths.

How does the transparent background option work?

When Transparent background is enabled, the generated SVG does not include the solid background rectangle at all — only the shape is drawn. The output is therefore truly transparent and will show whatever sits behind it when placed on a page. In the preview you can toggle a checkerboard backdrop to see the transparency clearly; that checkerboard is only a preview aid and is never written into the SVG.

Is the shape always centered, and what happens when I rotate it?

Yes. Every shape is centered inside the canvas based on the canvas width and height. When you set a rotation, the shape is wrapped in a group with a transform that rotates around the exact center of the canvas, so it spins in place. At large rotations a shape sized close to the canvas may extend slightly beyond the edges; reduce the shape size if you need it fully contained.

Can I edit the generated SVG afterwards?

Absolutely. The output is plain, readable SVG markup using standard elements and attributes. You can change colors, adjust coordinates, swap the fill or stroke, or drop the shape into a larger document. Generated SVG shapes are deterministic from the selected settings, so you can copy, edit, and reuse the markup in your own projects.

Is anything uploaded to a server?

No. SVGTrim generates SVG shapes locally in your browser. No files are uploaded, and the output remains editable SVG markup. There is no API call, no AI involved and no external asset is referenced by the generated file.