Gradients, masks, clip paths in PDF output

Three SVG features that render fully vector in PDF output: linear gradients, radial gradients, and clipping paths. Unlike filters (which rasterize), these have direct PDF equivalents and stay scalable. Masks are the trickier cousin — sometimes vector, sometimes rasterized.

Linear gradients

SVG's <linearGradient> defines a color progression along a straight line, with stops marking color positions. Used for:

• Flat backgrounds with a gentle gradient (sky, water, paper texture).
• Button rounded-rectangle fills (depth/dimension).
• Subtle shading on graphics.

PDF supports linear gradients via "shading type 2" (axial shading). The PDF shading dictionary holds:

• The shading domain (start and end coordinates).
• A function mapping 0–1 to color triples.
• Optional extension flags (extend before / after the domain).

SVG stops translate to PDF function entries. Three stops in SVG become a stitching function in PDF (Type 3) — a chain of piecewise-linear segments (Type 2); smooth interpolation between stops is preserved exactly. The visual result is bit-identical to browser rendering of the SVG.

Radial gradients

SVG's <radialGradient> defines a color progression from a center point outward. Used for spotlight effects, glows, ball/sphere shading.

PDF's "shading type 3" (radial shading) is the direct equivalent. The shading dictionary holds two circles (the inner and outer extents); colors interpolate radially between them. Most SVG radial gradients use a degenerate inner circle (radius 0 at the focus point), which PDF supports natively.

Mesh gradients and conic gradients

SVG 2 (and CSS) added more sophisticated gradient types:

• Conic gradients: color sweeps angularly around a center.
• Mesh gradients: color values at arbitrary control points, smooth interpolation.

PDF has matching shading types (4–7 cover free-form, lattice, and Coons-patch meshes), but a typical general-purpose renderer doesn't emit these advanced shading types — complex gradients are rasterized instead. The conversion inherits this limitation: regions painted with mesh or conic gradients usually become raster patches in the output PDF.

For SVGs using only linear and radial gradients (most authored content), output stays fully vector. For SVGs with conic or mesh gradients, those regions become rasters.

Clipping paths

SVG's <clipPath> defines a region; only content inside that region is visible.

PDF has a clipping operator: any path can be set as a clip path with the W operator (or W* for even-odd fill rule). Subsequent drawing is restricted to the clipped region. This maps directly to SVG's clipPath element.

Clipping is preserved as vector. A logo composed of a complex path clipped to a circle remains both elements (clip path + clipped content) in the PDF; zooming in shows crisp boundaries.

Masks — the harder case

SVG's <mask> is more general than clipPath: instead of a binary in/out test, the mask uses pixel luminance (or alpha) to control transparency continuously. A mask with a soft gradient produces a soft-edged element.

PDF has soft masks via the Image XObject's /SMask entry, but applying them to vector content requires rendering the mask to a raster image. Vector + soft mask doesn't have a fully native PDF expression.

How a renderer maps an SVG mask to PDF depends on its sophistication. Binary masks (black-or-white, no gradients) often translate cleanly to PDF clipping paths and stay vector. Soft masks (mask with gradient or alpha content) typically rasterize the masked element and apply a soft mask in PDF — this matches PDF's /SMask mechanism but produces a raster patch rather than vector content.

The practical result for soft-masked content is a small raster patch, similar to how filters are handled. For binary masks (rarely written manually but common in tools that export SVG from layered designs), output stays vector.

Opacity and blend modes

Simple transparency (e.g. opacity="0.5") is fully vector in PDF: each shape can have its opacity set in the graphics state. The PDF reader composites at render time without rasterizing.

CSS-style blend modes (mix-blend-mode: multiply, screen, overlay) map onto PDF's transparency model with the BM (blend mode) state. PDF supports a fixed set: Normal, Multiply, Screen, Overlay, Darken, Lighten, ColorDodge, ColorBurn, HardLight, SoftLight, Difference, Exclusion, Hue, Saturation, Color, Luminosity. SVG's CSS blend modes match this set; mappings are direct.

For exotic blend modes added more recently in CSS (plus-darker, plus-lighter), PDF doesn't have direct equivalents — these typically fall back to a closer standard mode (often Normal) during conversion.

Output size impact

Linear and radial gradients in PDF are encoded as small dictionaries (a few hundred bytes per gradient). Compared to rasterizing the gradient, this is dramatically smaller and stays sharp at any zoom.

Clipping paths take roughly the same bytes as the equivalent path drawn unclipped — minimal overhead.

Soft masks that rasterize add the size of a raster Image XObject (typically 5–50 KB for a small region at default DPI).

When to flatten before conversion

If your SVG uses sophisticated masking, mesh gradients, or other features that rasterize through this conversion, try a desktop SVG editor's "Save as PDF" command first. Some desktop editors implement more thorough vector preservation in edge cases (especially complex masks); the resulting PDF can then be combined or further processed if needed.