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

Đâ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. 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.

Đổi hiệu ứng và kéo slider — rồi mới đọc cách pipeline được nối dây.

Mở demo đầy đủ:

Mô hình tư duy: một pipeline các primitive

Một <filter> chứa một dãy filter primitive — các element tên fe… (“filter effect”). Mỗi primitive:

1. nhận đầu vào qua in (đồ hoạ gốc, hoặc output của bước trước),
2. làm một thao tác (blur, dời, đổi màu…),
3. đặt tên đầu ra qua result, để bước sau dùng.

Hai input đặc biệt con sẽ dùng liên tục:

• element với màu của nó.
• 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 — con ngựa thồ

Blur là nền tảng của shadow và glow, nên làm chủ nó trước. stdDeviation điều khiển bán kính mờ — cao hơn = mềm hơn.

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

Một drop shadow thật (chuỗi kinh điển)

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>

Đọc như công thức: 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.

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.

Bẫy vùng filter

Để ý x="-50%" y="-50%" width="200%" height="200%" trên filter. 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. Mở rộng vùng là cách sửa lỗi số 1 “shadow của tôi bị cắt”.

Phát sáng neon

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 — đổi màu mọi thứ

feColorMatrix là bộ não màu. 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 -->

Để 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. Kéo slider saturation trong demo từ 0 (xám) tới 2 (rực).

Filter SVG vs filter của CSS

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 còn cho tham chiếu filter SVG: filter: url(#glow). 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).

Lời cảnh báo của sư phụ

• Mở rộng vùng filter hoặc blur/shadow/glow bị cắt.
• 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.
• 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.

Luyện tập, không thì coi như chưa học

1. Shadow thẻ kiểu Material: dựng shadow bốn bước, rồi tái tạo bằng một <feDropShadow>.
2. Biển neon: cho text phát sáng lime, rồi animate stdDeviation chậm để nó nhấp nháy.
3. Khử màu khi hover: feColorMatrix saturate(0) mặc định, chuyển sang đủ màu khi hover qua đổi class.

Phần tiếp theo

Filter thêm chiều sâu và không khí. 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. Ở 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.