.SVG File Format – Gradients and patterns

Scalable Vector Graphics

A paint server is an element that supplies the paint for fill or stroke: fill="url(#id)". A reference to something that is not a paint server, or to an id that does not exist, is an error; a fallback colour after the address (url(#id) red) is used when the server cannot be found.

Elements

ElementAttributesDefaults
linearGradientx1, y1, x2, y2, gradientUnits, gradientTransform, spreadMethod, href / xlink:hrefThe vector runs from (0%, 0%) to (100%, 0%), left to right. gradientUnits is objectBoundingBox, spreadMethod is pad.
radialGradientcx, cy, r, fx, fy, fr (SVG 2), plus the same units, transform, spread and hrefCentre and radius default to 50%. The focal point defaults to the centre. A focal point outside the circle is moved onto it in SVG 1.1; SVG 2 draws a cone.
stopoffset; properties stop-color and stop-opacityA child of a gradient. offset is a number 0 to 1 or a percentage, clamped to that range, and never lower than the previous stop’s. stop-color is black, stop-opacity 1.
patternx, y, width, height, patternUnits, patternContentUnits, patternTransform, viewBox, preserveAspectRatio, overflow, href / xlink:hrefThe tile is repeated across the plane. patternUnits is objectBoundingBox and patternContentUnits userSpaceOnUse. A zero width or height disables the pattern.

Gradient behaviour

  • With no stops, nothing is painted. With one stop, the area is painted with that stop’s colour.
  • spreadMethod: pad keeps the end colours going, reflect mirrors the gradient, repeat starts over.
  • gradientUnits="objectBoundingBox" makes coordinates fractions of the painted element’s bounding box; a shape with a zero-width or zero-height box (a horizontal line) cannot be painted by such a gradient.
  • href on a gradient names another gradient whose attributes and stops it inherits where it has none of its own. A linearGradient and a radialGradient can inherit from each other for stops and common attributes. Chains are followed; a loop is an error. Editors write one gradient with the stops and others with only vector and units that point at it.
  • The colours between stops are interpolated in sRGB by default; color-interpolation="linearRGB" changes that.

Draft SVG 2 and other paint servers

An SVG 2 draft had meshgradient, meshrow, meshpatch, hatch and hatchpath; no browser shipped them, though Inkscape writes mesh gradients. SVG Tiny 1.2 has solidColor, which paints one colour. The explorer lists these as draft or Tiny elements and warns that renderers other than the editor ignore them.

Not described

This page is partial.

  • Reference: written without the specification text open. The SVG 2 focal-circle rules for radialGradient, the draft mesh and hatch elements and solidColor are named, not described. Gradient colour interpolation details are not described.
  • Viewer: lists each gradient and pattern with its stops and checks the references to it. It does not resolve href inheritance chains into effective values, and does not draw them.