SVG from Zero to Senior · Part 7 — Filters: Blur, Shadow, Glow & Color

Here is where SVG reveals a hidden superpower most developers never touch: a built-in image-processing pipeline. {Đây là nơi SVG để lộ siêu năng lực ẩn mà đa số dev chưa từng động tới: một pipeline xử lý ảnh dựng sẵn.} SVG filters can blur, cast real shadows, glow like neon, desaturate, emboss, and warp — all declaratively, all in the browser, all GPU-accelerated. {Filter SVG có thể làm mờ, đổ bóng thật, phát sáng như neon, khử màu, dập nổi, và bóp méo — tất cả khai báo, trong trình duyệt, tăng tốc GPU.}

Switch effects and drag the sliders — then read how the pipeline is wired. {Đổi hiệu ứng và kéo slider — rồi mới đọc cách pipeline được nối dây.}

Open the full demo {Mở demo đầy đủ}: /tools/svg-filters-demo/.

The mental model: a pipeline of primitives {Mô hình tư duy: một pipeline các primitive}

A <filter> contains a sequence of filter primitives — elements named fe… (“filter effect”). {Một <filter> chứa một dãy filter primitive — các element tên fe… (“filter effect”).} Each primitive: {Mỗi primitive:}

1. takes an input via in (the original graphic, or a previous step’s output), {nhận đầu vào qua in (đồ hoạ gốc, hoặc output của bước trước),}
2. does one operation (blur, offset, recolor…), {làm một thao tác (blur, dời, đổi màu…),}
3. names its output via result, so the next step can use it. {đặt tên đầu ra qua result, để bước sau dùng.}

Two special inputs you’ll use constantly: {Hai input đặc biệt con sẽ dùng liên tục:}

• SourceGraphic — the element with its colors. {element với màu của nó.}
• SourceAlpha — the element’s silhouette (alpha only, black). Perfect for shadows. {bóng đổ của element (chỉ alpha, màu đen). Hoàn hảo cho shadow.}

<filter id="f">
  <feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
<rect filter="url(#f)" … />

feGaussianBlur — the workhorse {feGaussianBlur — con ngựa thồ}

Blur is the foundation of shadows and glows, so master it first. {Blur là nền tảng của shadow và glow, nên làm chủ nó trước.} stdDeviation controls the blur radius — higher = softer. {stdDeviation điều khiển bán kính mờ — cao hơn = mềm hơn.}

<feGaussianBlur in="SourceGraphic" stdDeviation="3" />

A real drop shadow (the classic chain) {Một drop shadow thật (chuỗi kinh điển)}

This four-step chain is worth memorizing — it appears everywhere. {Chuỗi bốn bước này đáng nhớ — nó xuất hiện khắp nơi.}

<filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
  <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur" />
  <feOffset in="blur" dx="6" dy="6" result="off" />
  <feFlood flood-color="#000" flood-opacity="0.6" result="color" />
  <feComposite in="color" in2="off" operator="in" result="shadow" />
  <feMerge>
    <feMergeNode in="shadow" />
    <feMergeNode in="SourceGraphic" />
  </feMerge>
</filter>

Read it as a recipe: {Đọc như công thức:} blur the silhouette → offset it down-right → flood a color and keep it only inside the blurred shape → stack the shadow under the original. {làm mờ bóng → dời xuống-phải → đổ một màu và chỉ giữ trong vùng hình đã mờ → xếp shadow dưới bản gốc.}

Shortcut: <feDropShadow dx="6" dy="6" stdDeviation="3" flood-color="#000"/> does this whole chain in one primitive. Use it for simple shadows; use the manual chain when you need to composite it with other effects. {Lối tắt: <feDropShadow …/> làm cả chuỗi trong một primitive. Dùng nó cho shadow đơn giản; dùng chuỗi tay khi cần ghép với hiệu ứng khác.}

The filter region trap {Bẫy vùng filter}

Notice x="-50%" y="-50%" width="200%" height="200%" on the filter. {Để ý x="-50%" y="-50%" width="200%" height="200%" trên filter.} By default the filter region is only 10% larger than the element’s bounding box, so blurs, shadows, and glows get clipped at the edges. {Mặc định vùng filter chỉ lớn hơn 10% so với bounding box của element, nên blur, shadow, glow bị cắt ở mép.} Expanding the region is the fix for the #1 “my shadow is cut off” bug. {Mở rộng vùng là cách sửa lỗi số 1 “shadow của tôi bị cắt”.}

Neon glow {Phát sáng neon}

A glow is a colored blur stacked behind and around the shape, often doubled for intensity. {Glow là một blur có màu xếp sau và quanh hình, thường nhân đôi cho đậm.}

<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
  <feFlood flood-color="#c8ff00" result="color" />
  <feComposite in="color" in2="SourceAlpha" operator="in" result="glowSrc" />
  <feGaussianBlur in="glowSrc" stdDeviation="5" result="glow" />
  <feMerge>
    <feMergeNode in="glow" />
    <feMergeNode in="glow" />     <!-- doubled = brighter -->
    <feMergeNode in="SourceGraphic" />
  </feMerge>
</filter>

feColorMatrix — recolor everything {feColorMatrix — đổi màu mọi thứ}

feColorMatrix is the color brain. {feColorMatrix là bộ não màu.} The friendly shortcuts: {Các lối tắt thân thiện:}

<feColorMatrix type="saturate" values="0" />        <!-- 0 = grayscale, 1 = normal -->
<feColorMatrix type="hueRotate" values="90" />       <!-- spin the hue -->

For full control you supply a 4×5 matrix mapping input RGBA to output — the basis of duotones, tints, and channel mixing. {Để kiểm soát hết con cấp một ma trận 4×5 ánh xạ RGBA vào ra — nền tảng của duotone, tint, và trộn kênh.} Drag the saturation slider in the demo from 0 (gray) to 2 (vivid). {Kéo slider saturation trong demo từ 0 (xám) tới 2 (rực).}

SVG filters vs CSS filter {Filter SVG vs filter của CSS}

CSS gives you filter: blur() drop-shadow() grayscale() — convenient one-liners that are actually defined in terms of these SVG primitives. {CSS cho con filter: blur() drop-shadow() grayscale() — các dòng tiện vốn được định nghĩa dựa trên các primitive SVG này.} CSS even lets you reference an SVG filter: filter: url(#glow). {CSS còn cho tham chiếu filter SVG: filter: url(#glow).} Senior call: reach for the CSS shorthand for simple cases; drop to the SVG <filter> when you need a custom multi-step pipeline (e.g. a goo/metaball effect with blur + a sharp alpha threshold). {Quyết định senior: dùng shorthand CSS cho ca đơn giản; xuống <filter> SVG khi cần pipeline nhiều bước tuỳ biến (vd hiệu ứng goo/metaball với blur + ngưỡng alpha sắc).}

The master’s warnings {Lời cảnh báo của sư phụ}

• Expand the filter region or your blur/shadow/glow gets clipped. {Mở rộng vùng filter hoặc blur/shadow/glow bị cắt.}
• SourceAlpha for shadows, SourceGraphic for the real thing. Mixing them up gives black blobs or no shadow color. {SourceAlpha cho shadow, SourceGraphic cho bản thật. Lẫn lộn cho ra cục đen hoặc shadow không màu.}
• Filters can be expensive. Big blurs over large areas hurt FPS — keep stdDeviation modest and avoid animating it every frame. {Filter có thể tốn kém. Blur lớn trên vùng rộng hại FPS — giữ stdDeviation vừa phải và tránh animate nó mỗi frame.}

Practice, or it didn’t happen {Luyện tập, không thì coi như chưa học}

1. Material card shadow {Shadow thẻ kiểu Material}: build the four-step shadow, then recreate it with one <feDropShadow>. {dựng shadow bốn bước, rồi tái tạo bằng một <feDropShadow>.}
2. Neon sign {Biển neon}: glow some text in lime, then animate stdDeviation slowly to make it flicker. {cho text phát sáng lime, rồi animate stdDeviation chậm để nó nhấp nháy.}
3. Hover desaturate {Khử màu khi hover}: a grayscale feColorMatrix saturate(0) by default, transitioning to full color on hover via a class swap. {feColorMatrix saturate(0) mặc định, chuyển sang đủ màu khi hover qua đổi class.}

What’s next {Phần tiếp theo}

Filters add depth and atmosphere. {Filter thêm chiều sâu và không khí.} Next we learn to hide and reveal parts of a drawing with surgical precision. {Tiếp theo ta học ẩn và lộ các phần của bản vẽ với độ chính xác phẫu thuật.} In Part 8 we cover clipping and masking: clipPath for hard, binary cutouts and mask for soft, gradient-based transparency — the difference between a cookie-cutter and a soft vignette, with a side-by-side lab. {Ở Phần 8 ta nói về clipping và masking: clipPath cho cắt cứng nhị phân và mask cho trong suốt mềm theo gradient — khác biệt giữa khuôn cắt bánh và lớp vignette mềm, với một lab so sánh cạnh nhau.}