SVG feColorMatrix: Đổi màu mà không thay màu tô

Bộ lọc SVG feColorMatrix thay đổi màu mà trình kết xuất hiển thị. Nó không viết lại giá trị fill trên các đường dẫn của bạn. Vì vậy, nó hữu ích cho hiệu ứng hình ảnh có thể hoàn tác, nhưng bản xem trước có bộ lọc và SVG có bảng màu mới được chỉnh sửa là hai sản phẩm bàn giao khác nhau.

Nếu cần bản xem trước trên web, hãy giữ bộ lọc và thử trang nơi nó chạy. Nếu người nhận cần chọn hình màu xanh rồi sửa màu tô xanh của hình đó, hãy thay đổi màu nguồn. Nếu nguồn là PNG, cả bộ lọc lẫn lớp bọc SVG đều không tạo hình vector có thể chỉnh sửa; việc đó cần một bước vector hóa riêng.

Ví dụ dưới đây dùng cùng họa tiết hai lá cho cả hai cách đổi màu. Bạn có thể lưu mã, kiểm tra nguồn và xóa bộ lọc để thấy chính xác những gì thay đổi.

Chọn kết quả đổi màu bạn cần

Hướng dẫn chỉnh màu SVG trình bày cách tìm màu tô, đường viền và quy tắc kiểu. Ở đây, câu hỏi cụ thể hơn là bộ lọc để lại gì trong tệp. MDN mô tả feColorMatrix là phép biến đổi các kênh màu pixel, còn hướng dẫn màu tô và đường viền mô tả màu được áp dụng lên các hình.

Ví dụ hai màu bạn có thể kiểm tra

Lưu đoạn này thành filtered-leaves.svg rồi mở trong trình duyệt. Lá thứ nhất bắt đầu với màu tô cam, #cc6633; lá thứ hai có màu tô xanh lá, #339966, với độ mờ đục bằng một nửa. Ma trận hoán đổi kênh đỏ và xanh lam, đồng thời giữ xanh lá và alpha.

<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 260 220" width="260" height="220">
  <defs>
    <filter id="swap-red-blue" color-interpolation-filters="sRGB">
      <feColorMatrix type="matrix" values="
        0 0 1 0 0
        0 1 0 0 0
        1 0 0 0 0
        0 0 0 1 0" />
    </filter>
  </defs>
  <g filter="url(#swap-red-blue)">
    <path fill="#cc6633"
      d="M40 125 C25 35 105 15 150 35 C165 105 120 150 40 125Z" />
    <path fill="#339966" fill-opacity="0.5"
      d="M100 175 C90 90 180 65 225 90 C230 155 175 200 100 175Z" />
  </g>
</svg>

Chúng tôi kết xuất bốn phiên bản của họa tiết gốc này trong trình duyệt: màu gốc, phiên bản có bộ lọc, bản sửa trực tiếp và bản đã xóa bộ lọc. Bản sửa trực tiếp đổi màu tô thứ nhất thành #3366cc và màu thứ hai thành #669933, không dùng bộ lọc. Cả hai cách đổi màu đều tạo họa tiết xanh lam và ô liu. Kiểm tra DOM của phiên bản có bộ lọc vẫn trả về các thuộc tính màu tô cam và xanh lá gốc. Xóa bộ lọc khôi phục bảng màu gốc.

Đây là minh họa nhỏ trên trình duyệt, không phải phép thử tương thích cho mọi trình chỉnh sửa hay định dạng xuất. Điểm kiểm tra bàn giao hữu ích rất đơn giản: tệp dùng bộ lọc vẫn phụ thuộc vào việc hiệu ứng đó được giữ lại và kết xuất. Phiên bản sửa màu tô trực tiếp mang bảng màu mới trên chính các hình.

Để lặp lại phép kiểm tra nguồn, mở SVG trong trình soạn thảo văn bản và tìm fill=. Sau đó chỉ xóa filter="url(#swap-red-blue)" khỏi nhóm rồi làm mới trình duyệt. Giữ tệp chưa sửa bên cạnh để so sánh kết quả.

Đọc bốn hàng mà không cần học thuộc ma trận

Với type="matrix", thuộc tính values chứa hai mươi số: bốn hàng, mỗi hàng năm số. Mỗi hàng tính một kênh đầu ra. Các cột dùng kênh đỏ, xanh lá, xanh lam, alpha đầu vào và một độ lệch hằng số. Tài liệu ma trận của MDN trình bày các phương trình và ma trận đơn vị.

Trong ví dụ của chúng tôi, hàng một lấy xanh lam làm đỏ mới. Hàng hai giữ xanh lá. Hàng ba lấy đỏ làm xanh lam mới. Hàng bốn giữ alpha:

0 0 0 1 0

Hàng cuối có nghĩa là “dùng alpha hiện có, không thêm độ lệch”. Thay hàng đó bằng các giá trị bằng không sẽ làm kết quả trở nên trong suốt. Thêm hằng số vào cột cuối thay đổi độ trong suốt ngay cả ở nơi nguồn vốn trong suốt, có thể tạo hình chữ nhật không mong muốn bên trong vùng bộ lọc.

Ma trận xử lý đầu vào đã kết xuất của bộ lọc. Nó không biết pixel nào đến từ lá, chữ, đường viền hay ảnh chụp được nhúng. Hãy áp dụng nó cho đúng nhóm hoặc đối tượng bạn muốn tác động. Nếu chỉ cần đổi một phần mang ý nghĩa riêng trong thiết kế, hãy chọn phần đó và sửa màu của nó.

Chọn sRGB khi các số lấy từ mẫu màu RGB

Các phần tử bộ lọc SVG mặc định dùng linearRGB. Mẫu màu như rgb(128, 128, 128) thường được chỉ định trong sRGB, nên hằng số ma trận 0.5 trong không gian bộ lọc mặc định không cho cùng màu xám hiển thị với giá trị nửa thang sRGB. Dùng color-interpolation-filters="sRGB" khi ma trận của bạn được thiết kế để xử lý các giá trị kênh sRGB đó. Thuộc tính này khác với color-interpolation; thay thuộc tính kia không chọn không gian màu của bộ lọc. MDN mô tả giá trị mặc định và sự khác biệt.

Với hình bao màu đặc #3366cc, các giá trị RGB chuẩn hóa là 51/255, 102/255 và 204/255, tức 0.2, 0.4 và 0.8. Bộ lọc sau bỏ các giá trị RGB đầu vào rồi đặt các hằng số đó, đồng thời giữ alpha đầu vào:

<filter id="solid-blue" color-interpolation-filters="sRGB">
  <feColorMatrix type="matrix" values="
    0 0 0 0 0.2
    0 0 0 0 0.4
    0 0 0 0 0.8
    0 0 0 1 0" />
</filter>

Tham chiếu bộ lọc này từ đối tượng bằng filter="url(#solid-blue)". Nó chủ động xóa sự khác biệt giữa các màu nguồn không trong suốt. Cách này phù hợp với hình bao, không phù hợp để giữ chi tiết sắc độ của ảnh chụp. Đặc tả Filter Effects định nghĩa phép biến đổi kênh và cách xử lý giá trị màu chưa nhân trước với alpha.

Chọn sRGB là chọn không gian tính toán, không bảo đảm màu giống nhau trên mọi màn hình hay khi in. Với chênh lệch màu rộng hơn khi bàn giao, dùng danh sách kiểm tra màu SVG sau khi xuất.

Kiểm tra tệp bàn giao, không chỉ bản xem trước

Việc đổi màu bằng bộ lọc vẫn có thể hoàn tác khi hình gốc và định nghĩa bộ lọc còn nguyên. Ảnh chụp màn hình hay bản xuất raster ghi lại kết quả nhìn thấy dưới dạng pixel. Bản thân cả hai thao tác đều không cung cấp bảng màu mới dưới dạng màu tô của đường dẫn có thể chỉnh sửa.

Trước khi bàn giao vector, hãy kiểm tra đích đến thực tế:

1. Mở SVG đã lưu theo đúng cách nhập hoặc xuất mà người nhận sẽ dùng.
2. So sánh màu và các mép bán trong suốt với bản xem trước trong trình duyệt.
3. Chọn một hình và kiểm tra màu tô. Nó chứa giá trị mới mong muốn hay màu gốc bên dưới hiệu ứng?
4. Lưu rồi mở lại một lần. Xác nhận định nghĩa bộ lọc và tham chiếu của nó vẫn còn nếu cần giữ hiệu ứng.
5. Nếu người nhận cần màu phẳng thông thường có thể chỉnh sửa, dùng bản sửa màu tô trực tiếp và xóa bộ lọc không còn cần thiết khỏi bản bàn giao đó.

Với chuyển sắc, đường viền, độ mờ đục hoặc phần chồng lấp được hòa trộn, ma trận toàn cục không phải công cụ tìm và thay thế tổng quát. Tái dựng diện mạo mong muốn dưới dạng màu nguồn có thể cần chỉnh sửa nhiều hơn vài giá trị hex. Nếu có thể bàn giao raster, xuất diện mạo đã kiểm tra thành PNG là một lựa chọn khác. Giữ riêng bản vector gốc.

Khi nào PerfectVector phù hợp với quy trình này

Nếu bạn đã có hai đường dẫn này, hãy sửa trực tiếp. Không có lý do gì phải raster hóa rồi đồ lại chúng để xóa bộ lọc màu.

PerfectVector hữu ích khi hình ban đầu là PNG hoặc JPG và bạn cần các vùng có thể chỉnh sửa. Dùng chuyển ảnh thành vector để chuẩn bị một bản vector để đánh giá, rồi kiểm tra ranh giới hình và chi tiết nhỏ trước khi đổi màu. Bộ lọc áp dụng lên bitmap có thể thay đổi diện mạo, nhưng bitmap vẫn là nội dung pixel. Kiểm tra raster nhúng giúp phân biệt trường hợp đó với đường dẫn bạn có thể chọn và chỉnh sửa.

Với ảnh chụp mà mục tiêu chỉ là phủ sắc màu, hãy giữ quy trình raster. Với logo có sẵn bản vector gốc, dùng bản gốc. Tổng quan vector hóa giải thích khi nào khôi phục hình học từ pixel là bước hữu ích.

Câu hỏi thường gặp

feColorMatrix có thay đổi giá trị fill trong SVG của tôi không? Không. Nó biến đổi các kênh màu được kết xuất. Thuộc tính màu tô nguồn vẫn giữ nguyên trừ khi bạn sửa riêng chúng.

Vì sao màu xám tôi chọn sáng hơn dự kiến? Kiểm tra không gian tính toán của bộ lọc. Các phần tử bộ lọc SVG mặc định dùng linearRGB. Đặt color-interpolation-filters thành sRGB khi hằng số ma trận biểu diễn giá trị mẫu màu sRGB đã chuẩn hóa.

Làm sao giữ độ trong suốt khi đổi màu? Giữ hàng alpha là 0 0 0 1 0. Nó giữ alpha đầu vào. Kiểm tra các mép bán trong suốt và tránh thêm độ lệch alpha trừ khi bạn muốn thay đổi độ trong suốt.

PNG có bộ lọc có thể trở thành vector chỉnh sửa được không? Bộ lọc màu thay đổi diện mạo, không thay đổi hình học. Để sửa từng hình vector, hãy lấy bản vector gốc hoặc vector hóa ảnh raster rồi kiểm tra các đường dẫn tạo ra.

Nguồn tham khảo

1. MDN: feColorMatrix — Định nghĩa hàng ma trận, kênh và các kiểu biến đổi có sẵn.
2. MDN: color-interpolation-filters — Giải thích linearRGB mặc định và cách chọn sRGB rõ ràng.
3. W3C: Filter Effects, feColorMatrix — Quy định hành vi biến đổi màu và alpha.
4. MDN: Màu tô và đường viền — Mô tả màu nguồn dùng bởi các hình SVG.

Nếu hình của bạn chỉ tồn tại dưới dạng pixel và cần các màu riêng có thể chỉnh sửa, hãy chuyển ảnh thành một bản vector để đánh giá. Kiểm tra đường dẫn, đổi màu nguồn rồi mở lại tệp bàn giao để kiểm tra cả diện mạo lẫn khả năng chỉnh sửa.