SVG: gradients as real paint

Each cell states what it should look like.

1. The ramp is smooth

A single wide band. The old triangle-mesh approximation showed this as a row of flat vertical strips with visible steps between them; there must be no banding and no seams.

black to white, continuous — no strips, no seams

2. objectBoundingBox units follow the shape

One gradient, three shapes of different sizes and positions. The default units are fractions of each shape's own bounding box, so all three show the WHOLE ramp end to end — not a slice of a shared one.

each rectangle runs the full red→blue ramp across its own width

3. userSpaceOnUse is shared

The same three shapes with gradientUnits="userSpaceOnUse" and the vector spanning x=0..300. Now the ramp belongs to the drawing, so each shape shows only the SLICE of it that it covers: the small rectangles are nearly flat, and the top-left one is red while the bottom-right one is blue.

top-left reddish, bottom-right bluish, wide bar the full ramp

4. Direction and stop placement

Four two-stop gradients differing only in their vector, then one with an off-centre middle stop.

left→right · top→bottom · corner to corner · right→left · last one stays white for four fifths, then dives

5. spreadMethod

The same gradient over x=0..0.25 of the box, with the three spread methods. pad holds the end colour, reflect mirrors, repeat restarts with a hard edge at each period.

row 1: one ramp then flat dark · row 2: four mirrored bands, no hard edges · row 3: four bands with a hard white/dark edge between each

6. Radial gradients

Default (concentric), an off-centre focal point, a smaller radius, and one on a non-square box — where objectBoundingBox units make the circle an ELLIPSE, which is what the spec asks for.

even glow · highlight up and left · small bright core, wide dark rim · the rectangle's highlight is a TALL ellipse, not a circle

7. Stop opacity

A gradient fading to nothing, over a background bar. This needs per-stop alpha, not just per-shape: the left end must be opaque and the right end fully see-through.

solid red on the left, the yellow bar showing through on the right

8. gradientTransform

The same horizontal gradient rotated, skewed and scaled by gradientTransform. The transform composes with the bounding-box mapping, so it is applied in the box's own space.

horizontal · vertical · diagonal · the ramp finishes halfway across, then holds dark

9. Inheriting stops through href

One gradient defines the stops; the others reference it with xlink:href and only override the geometry. All three must be coloured — a failure here paints nothing at all, since a paint reference that resolves to no stops means "not rendered".

same two colours four ways: left→right, top→bottom, right→left, radial — none of them blank

10. Gradients on strokes

A gradient as stroke rather than fill, including one shape that has a gradient on both. The first line is a trap: a horizontal line has a bounding box of zero height, and with the default objectBoundingBox units SVG says such an element is NOT RENDERED. The second line states the same gradient in user space, where there is no box to be degenerate, and does paint.

NOTHING at the top left (zero-height box) · below it the same ramp in user space, red→blue · the ring's ramp runs round it · the square has a green fill and a red→blue border

11. Holes survive

The case the triangle mesh got wrong: a path of several subpaths with fill-rule="evenodd". The gradient must fill the ring and the counter of the letter must stay open — not be flooded into a solid blob.

an annulus and a square frame, both with a hole right through and a continuous ramp across them

12. Gradients under a transform

The same shape and gradient at three scales, inside transformed groups. The ramp is anchored to the shape, so all three look identical apart from size — the gradient must not stay behind at the origin or shear.

three spheres lit the same way, differing only in size

13. Degenerate gradients

None of these may make the shape vanish. SVG names the colour each degenerate case takes: a zero-length vector and a zero radius are painted with the LAST stop, which is why the middle two are white and not mid-grey.

one stop (purple) · zero-length vector (WHITE, the last stop) · zero radius (WHITE) · two stops at the same offset (black) — four flat squares, all present. The fifth references an id that does not exist and is correctly NOT rendered.

14. Many stops

A ten-stop ramp, to check the stops arrive in order and none is dropped.

a full spectrum sweep, red through blue to purple, in that order

15. Gradient plus clip and dash

The combination real artwork uses: a gradient fill inside a clip, with a gradient-stroked dashed ring over it.

a gradient disc (square corners clipped away) with a dashed blue→pale-blue ring on it