← Blog

SVG filters — rasterized on conversion

SVG filters compute pixels from inputs; PDF has no equivalent — the filtered region rasterizes Filter primitives in SVG feGaussianBlur blur with given stdDeviation feOffset shift pixels by dx, dy (for shadows) feColorMatrix multiply by a 4×5 color matrix feMerge composite multiple filter outputs feTurbulence Perlin noise generation (textures) feComponentTransfer per-channel curves feMorphology dilate / erode shapes feConvolveMatrix arbitrary convolution kernel feDisplacementMap warp by another image's pixel values feFlood / feImage solid fill / external image as filter input

SVG filters are powerful: per-pixel image processing operations expressed declaratively. Drop shadows, blurs, color grading, embossing, displacement effects — all available without touching pixel data. The catch: PDF has no equivalent. When converting, any region affected by a filter must be rasterized (rendered to pixels) and embedded as a raster Image XObject.

How SVG filters work conceptually

A filter is a chain of pixel-processing primitives. Each primitive takes a named input (the source graphic, the source alpha, the result of a previous primitive) and produces a named output. The final primitive's output replaces the original element in the rendering.

Example — a simple drop shadow:

<filter id="shadow">
  <feGaussianBlur in="SourceAlpha" stdDeviation="2" result="blur"/>
  <feOffset in="blur" dx="2" dy="2" result="shifted"/>
  <feMerge>
    <feMergeNode in="shifted"/>
    <feMergeNode in="SourceGraphic"/>
  </feMerge>
</filter>

This blurs the alpha channel of the source, offsets the blurred result by 2 pixels right and down, then composites the original on top. The visible result is the shape with a soft drop shadow.

Why PDF can't express filter chains

PDF's graphics model has shapes, fills, strokes, clipping paths, and "transparency groups" (which can apply uniform alpha and a few blend modes). It does not have:

The closest PDF equivalent is the Smooth Shading (axial / radial gradient) and image masks, which together can render gradient-style effects but not arbitrary filter chains.

What happens with filters during conversion

For each element with a filter property, the renderer rasterizes the affected region (the element's bounding box, expanded as needed to include filter overflow such as blur radius or drop-shadow offset) and embeds it as a PDF Image XObject at the original location. The rest of the SVG — elements not affected by the filter — remains vector. The result is a hybrid PDF page: vector content for unfiltered shapes, raster patches where filters apply.

Resolution of filter rasters

The rasterization resolution is the renderer's choice and is typically tuned for screen viewing rather than print. Filter regions look correct on screen but may pixelate when zoomed or printed at high resolution.

To get higher-resolution filter rasters, pre-process the SVG to render at a higher target DPI in a desktop SVG editor (Inkscape, Illustrator, Affinity Designer all let you set export DPI). Render the filter-heavy regions to PNG at the desired DPI, replace the filter elements with embedded raster references, and convert the resulting SVG. The conversion preserves embedded rasters at their declared resolution.

Common filter use cases

Drop shadow. The most-used filter. Modern design tools export drop shadows as filter chains. The result in the PDF is a vector shape over a small raster shadow patch.

Glow. Similar to drop shadow but symmetric. Same handling.

Blur for de-emphasis. Background elements blurred to focus attention on foreground. The blurred region becomes a raster.

Color grading. Tinting an element with feColorMatrix. Same handling — the colored region rasterizes.

Texture / noise. feTurbulence generates Perlin noise procedurally. Always rasterizes; sometimes results in large file sizes if the noise covers a large area.

Alternative: drop the filters before conversion

If filter raster regions are unacceptable for your use case (they make the PDF larger, less editable, less crisp at high zoom), the cleanest workaround is to remove filters from the SVG before conversion. Open the SVG in a desktop editor and delete or simplify the filter effects on each element; some editors expose this directly as "Remove filters" or "Flatten effects".

For drop shadows specifically, you can replace them with a duplicate, slightly-offset, semi-transparent darker copy of the element. The result is fully vector — no raster — and looks similar to a soft shadow at typical viewing distance.

Filter regions and PDF size

A vector-only SVG of a few hundred shapes converts to a PDF of similar bytes — typically 5–20 KB. The same SVG with a single drop-shadow filter on a single shape grows the PDF by ~10–50 KB (the rasterized shadow patch). Multiple filters compound.

For SVG icons and logos, this is rarely a problem. For complex illustrations with dozens of filtered elements (typical of modern UI-design SVGs), the PDF can balloon to several megabytes — much larger than expected from a "vector" image.

Inspecting which filters an SVG uses

Open the SVG in a desktop editor's "XML Editor" or "Source View" panel — every filter element appears as <feGaussianBlur>, <feOffset>, <feMerge>, etc. Counting them gives a sense of how filter-heavy the file is. SVGs from modern UI-design tools often have dozens of filter elements; SVGs from technical-diagram tools usually have none.

Your files are automatically deleted after one hour.