SVG wave & blob generator

viewBox is the coordinate system, not the size

The single most useful thing to understand about SVG is the separation between viewBox and the element's rendered dimensions. The viewBox declares an internal coordinate space — 0 0 24 24 means the drawing occupies a 24-by-24 grid — while width, height or CSS decide how large that grid is painted. Every coordinate inside the file is expressed in viewBox units and scales automatically.

This is why an SVG icon set standardises on one viewBox: the paths can then be swapped freely and stroke widths stay consistent. It is also why an SVG copied out of a design tool at 1,024 units wide looks wrong beside icons drawn at 24 — the shapes are fine, the coordinate space is not.

When the viewBox aspect ratio differs from the rendered box, preserveAspectRatio decides what happens. The default, xMidYMid meet, scales to fit entirely and centres, leaving empty space. slice fills instead and crops the overflow, and none stretches the drawing non-uniformly. Setting it to none is occasionally what you want for a decorative divider, and almost never what you want for an icon.

Strokes are centred, which changes your dimensions

SVG strokes straddle the path: half the stroke width falls inside the shape and half outside. A 100-unit square with a 10-unit stroke therefore occupies 110 units, overflowing its own viewBox by 5 units on every side and getting visibly clipped at the edges.

Unlike CSS borders there is no stroke-align property in any shipping browser, so the fix is geometric: inset the shape by half the stroke width. Draw that square from 5,5 to 95,95 rather than 0,0 to 100,100 and the stroked result lands exactly on the intended bounds. For circles, reduce the radius by half the stroke.

Related gotcha: stroke-width scales with the drawing. An icon enlarged from 24 to 96 pixels gets a stroke four times thicker, which is usually right for a single icon and wrong when mixing sizes. vector-effect: non-scaling-stroke keeps the stroke at a constant device width regardless of scale, which is what you want for diagram rules and map outlines.

Path data, fill rules and file size

The d attribute is a compact command language. Uppercase letters take absolute coordinates and lowercase take coordinates relative to the current point, which is why exported paths are usually a wall of lowercase commands — relative values have fewer digits and compress better. M moves without drawing, L draws a line, C and Q draw cubic and quadratic Béziers, A draws an elliptical arc, and Z closes the current subpath.

When a path contains more than one subpath, fill-rule decides which enclosed regions count as inside. The default nonzero counts the winding direction of crossings, so an inner subpath drawn in the same direction as the outer one fills solid. evenodd counts crossings regardless of direction, so alternate regions become holes. A donut or a letter O that renders as a solid blob is nearly always a winding-direction problem, fixable either by reversing the inner subpath or by switching to evenodd.

For file size, coordinate precision is the biggest and easiest win — design tools routinely export six or more decimal places, and for a 24-unit viewBox two is generous. Stripping editor metadata, empty groups and redundant transforms typically halves the bytes with no visual change. Inlining an SVG in your HTML avoids a request and lets CSS restyle it with currentColor, which is what makes icons follow surrounding text colour automatically.

What this generator writes, and why it is small

A wave is one path per layer inside a 1440 × height viewBox with preserveAspectRatio="none", so it stretches to any container width without letterboxing. Each path is sampled from its profile function and fitted with a Catmull-Rom spline converted to cubic Béziers — the curve passes exactly through every sample rather than near it, which is what a chain of quadratics with control points sitting on the samples cannot do.

Sampling density is the file-size lever. Measured against the true sine with getPointAtLength, the fit at ten samples per period deviates by 0.25px on a 60px amplitude; at eight it is 0.53px, and at fourteen it is 0.09px for seventy per cent more bytes. Ten is the setting here, and every coordinate is rounded to two decimals — a 1440-unit grid has no use for the fourteen digits a naive interpolation produces. A two-layer sine divider lands around 1.5 KB.

Amplitude is expressed as a percentage of the wave's own height and the baseline is held at least that far from both edges, so no combination of the sliders can push a crest outside the viewBox and get it clipped. Blobs are fitted the other way round: the outline's true bounding box is solved from the cubic extrema of every segment, then scaled and centred so the shape touches its frame on the long axis. Fitting the control points alone is not enough, because a spline bulges outside its own control polygon — at three points that overshoot runs about ten per cent past the edge.

The CSS tab writes the shape as a data: URI. Attributes are single-quoted so the whole thing survives inside a double-quoted url(), and only the characters that actually break CSS parsing are percent-encoded — <, >, #, % and braces — which keeps it far shorter and far more readable than base64. The wave gets a concrete pixel width there rather than width="100%": a data URI with no intrinsic width falls back to the browser's 300×150 default, and background-size: 100% auto would then render a nine-to-one divider at two-to-one.