SVG 过滤效果生成器
指导
SVG 过滤效果生成器
Design SVG <filter> effects visually. Pick a filter primitive — Gaussian blur, color matrix variants (hue rotate, saturate, luminance to alpha), turbulence with displacement, drop shadow, or a convolve matrix preset (emboss, engrave, sharpen, edge detect) — and tune its parameters with sliders while watching a live SVG preview on text, shapes, or your own uploaded photo. Copy the generated <filter> XML block and a ready-to-paste CSS usage snippet.
如何使用
- Pick a filter primitive from the 筛选 dropdown.
- Set a unique Filter ID — it becomes the
idon the<filter>element and the target ofurl(#…). - Tune the parameters that appear for the chosen primitive (sliders, color picker, noise type, etc.).
- Switch the Preview Target between text, shapes, or photo — upload your own image to see the effect on real content.
- 复制生成的 SVG Filter XML into your page (it can live anywhere — even inside a hidden, zero-size SVG).
- Apply it in CSS with the included snippet: either the native shorthand (when available) or the
filter: url(#filterId)引用。
特征
- Seven filter primitives — Gaussian blur, hue rotate, saturate, luminance to alpha, turbulence + displacement, drop shadow, and convolve-matrix presets (emboss, engrave, sharpen, edge detect).
- 实时SVG预览 — instant visual feedback as you drag sliders; no rebuild step, no flicker.
- Three preview targets — apply to crisp text, primitive shapes, or your own uploaded photo to see how the filter behaves on real content.
- Two outputs — the full
<filter>XML block (ready to paste into any SVG) and a CSS usage snippet with the native shorthand where available. - Drop shadow with opacity — combines
feDropShadow是快速路径，但它对属性处理不一致，且在边缘情况中可能丢失数据。在处理SOAP响应的生产环境中，建议使用flood-opacity, which the native CSS shorthand cannot express. - Sanitized filter IDs — keeps your
idvalues safe forurl(#…)引用。
常问问题
-
What is the difference between a CSS filter and an SVG filter?
CSS filter shorthands (blur, hue-rotate, drop-shadow, etc.) are a fixed catalogue of effects that the browser maps to underlying SVG filter primitives. An SVG <filter> gives you direct access to those primitives — feGaussianBlur, feColorMatrix, feTurbulence, feDisplacementMap, feConvolveMatrix, and more — and lets you compose them into effects (warps, noise, embosses, channel manipulation) that the shorthand cannot express. Anything you can do in CSS, you can do in SVG, but the reverse is not true.
-
What does the stdDeviation attribute mean on feGaussianBlur?
stdDeviation is the standard deviation of the Gaussian distribution used to weight neighbouring pixels. A larger value spreads the weighting across more pixels, producing a blurrier result. You can pass one number (uniform blur in both axes) or two space-separated numbers (different blur amounts on X and Y) for directional softness.
-
How does feTurbulence work, and why pair it with feDisplacementMap?
feTurbulence procedurally generates Perlin-style noise into an SVG image, controlled by baseFrequency (noise scale) and numOctaves (detail levels). The noise on its own is just a coloured texture. feDisplacementMap takes that noise as in2 and uses its R/G channels to offset the pixels of your source graphic, producing organic warping, smoke, water ripple, and distortion effects. The scale attribute controls how far each pixel can be displaced.
-
What is a kernel matrix, and how does feConvolveMatrix produce emboss or edge effects?
feConvolveMatrix slides a small matrix (the kernel) over every pixel, multiplying each cell by the corresponding neighbour pixel and summing the result. Different kernels produce different effects: a kernel that subtracts top-left from bottom-right neighbours creates the directional shading we read as emboss; a kernel with -1 around a positive centre amplifies differences and produces edge detection or sharpening. The order attribute sets the kernel size (typically 3 for a 3x3 matrix), and divisor/bias normalize the output.
-
Why does my SVG filter not work when applied with CSS filter: url(#id)?
Three common causes: (1) the <filter> element is not in the DOM when the CSS rule applies — make sure the filter SVG is embedded inline in the page, not loaded from an external file the browser blocks. (2) The id you reference does not match the id on the <filter> element (case sensitive, must be unique). (3) The element you are filtering has zero size or is clipped by the default filter region — set explicit x, y, width, height on the <filter> (often x="-30%" y="-30%" width="160%" height="160%") so effects like blur or drop shadow that extend past the source bounds are not cut off.
