SVG Generator

How the SVG Generator works

SVG generator: shapes as markup

SVG is text, which means simple graphics never need a drawing application. A hexagon badge, a star rating glyph, a circular avatar mask, a rounded card background: each is a handful of attributes on a single element. The trouble is remembering the attribute names and, for polygons and stars, working out the point coordinates. This generator does that arithmetic and writes a tidy, minimal document.

The document. Every output starts with <svg xmlns="http://www.w3.org/2000/svg">, a viewBox matching the width and height, and explicit width and height attributes. The namespace is required when the file is opened on its own or used as a data URI; the viewBox is what lets the graphic scale to any size in CSS while keeping its proportions; the explicit dimensions give a default size when the SVG is inlined without styling. Remove width and height if you want the graphic to fill its container.

Shapes. Rectangle uses <rect> with optional rx for rounded corners. Circle and ellipse use their native elements, sized to fit the canvas. Polygon and star both use <polygon> with computed points: vertices are placed on a circle inscribed in the canvas, starting from the top, and rotated by the angle you give. A star alternates between the outer radius and an inner radius, and the ratio field controls how spiky it is — 0.38 is a classic five-pointed star, 0.7 is a soft badge. Line draws a diagonal across the canvas as a starting point for dividers.

Stroke. When the stroke width is greater than zero the shape is inset by half the width so the stroke is not clipped at the edge of the viewBox — a common mistake when hand-writing SVG where the outer half of the stroke vanishes. The stroke corner style maps to stroke-linejoin; round softens sharp polygon and star tips, which is usually what you want at small sizes.

Colour values. Fill and stroke accept anything SVG does: hex, rgb(), hsl(), named colours, none, or currentColor. currentColor is the trick for icons that should inherit text colour when inlined in HTML: set the fill to currentColor, inline the markup, and the shape follows the CSS color of its parent.

Accessibility. If the graphic carries meaning, give it a title. It is emitted as a <title> element, which screen readers announce and browsers show as a tooltip. Purely decorative shapes should have no title and, once inlined, an aria-hidden="true" attribute added by hand.

The CSS data URI. The stats panel includes the whole document URL-encoded as a background-image value. This is the right way to use a generated shape as a decorative background without an extra HTTP request; it works in every browser and, unlike base64, stays readable in the stylesheet. The dedicated SVG data URI tool on this site can re-encode any SVG you edit afterwards.

Related tools