Bản đồ dịch chuyển SVG: làm méo bản xem trước logo

Bộ lọc SVG feDisplacementMap làm méo hình ảnh mà bộ kết xuất hiển thị bằng cách dùng một ảnh khác làm bản đồ lấy mẫu. Nó giữ nguyên dữ liệu đường dẫn nguồn. Hãy dùng cho bản xem trước logo có thể hoàn nguyên hoặc hình minh họa web, và giữ một bản chính không có bộ lọc để chỉnh sửa và bàn giao.

Để có ví dụ đầu tiên dễ dự đoán, đặt in="SourceGraphic", chọn bản đồ được đặt tên cho in2, chỉ định kênh ngang và dọc, rồi đặt color-interpolation-filters="sRGB". Tài liệu tham khảo về dịch chuyển của MDN giải thích hai đầu vào và công thức lấy mẫu. Một hình trông bị uốn trên màn hình không tự động trở thành đường viền mới có thể chỉnh sửa.

Quyết định bạn cần tệp nào

Ví dụ bên dưới dùng một huy hiệu vuông do chúng tôi tạo với phần giữa để trống. Các cạnh thẳng giúp dễ so sánh độ méo. Đây là họa tiết minh họa, không phải logo của khách hàng hay đầu ra từ công cụ vector hóa.

Bản xem trước tách biệt với nguồn

Để chỉ đổi màu bản xem trước, dùng đổi màu bằng feColorMatrix. Dịch chuyển giải quyết vấn đề không gian: ảnh kết xuất được lấy mẫu ở đâu.

Sao chép ví dụ SVG tĩnh có kiểm soát

Lưu mã này thành SVG và mở trong trình duyệt. Nó chứa một đường dẫn, một nguồn nhiễu cố định, một ma trận giữ kênh ngang biến thiên trong khi giữ kênh dọc trung tính, cùng tỷ lệ dịch chuyển 36.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
  <defs>
    <filter id="warp" x="-25%" y="-25%" width="150%" height="150%" primitiveUnits="userSpaceOnUse"
            color-interpolation-filters="sRGB">
      <feTurbulence type="fractalNoise" baseFrequency="0.035"
                    numOctaves="1" seed="8" result="noise"/>
      <feColorMatrix in="noise" type="matrix" values="1 0 0 0 0
        0 0 0 0 0.5
        0 0 0 0 0
        0 0 0 0 1" result="map"/>
      <feDisplacementMap in="SourceGraphic" in2="map" scale="36"
                         xChannelSelector="R" yChannelSelector="G"/>
    </filter>
  </defs>
  <path d="M42 42H158V158H42Z M78 78H122V122H78Z" fill="#e76b50" fill-rule="evenodd" filter="url(#warp)"/>
</svg>

feTurbulence cung cấp biến thiên được tạo theo thủ tục. Tài liệu tham khảo về nhiễu của MDN mô tả các tùy chọn tần số, số octave, seed và loại. Ở đây chúng tôi giữ các giá trị đó cố định để khi đổi scale, bạn so sánh cường độ trên cùng bản đồ.

Ma trận giữ kênh đỏ của nhiễu, đặt xanh lá thành 0.5, xanh lam thành 0 và alpha thành 1. Đầu ra của nó là bản đồ điều khiển, không phải bảng màu mới cho huy hiệu màu san hô. Tài liệu tham khảo về ma trận của MDN giải thích phép biến đổi kênh. Kênh đỏ sau đó điều khiển lấy mẫu ngang, còn xanh lá đóng góp độ lệch dọc trung tính.

Để so sánh cường độ, chỉ đổi scale="36" thành scale="12" rồi scale="0". Giữ nguyên đường dẫn, seed, ma trận bản đồ, không gian màu và viewBox. Cách này cô lập lựa chọn bạn đang đánh giá.

Hiểu scale là độ lệch lấy mẫu

Với các kênh bản đồ được chọn, vị trí lấy mẫu nguồn là:

sampleX = x + scale × (horizontalChannel - 0.5)
sampleY = y + scale × (verticalChannel - 0.5)

Đặc tả dịch chuyển của W3C định nghĩa phép ánh xạ ngược này: mỗi vị trí đầu ra hỏi cần lấy mẫu nguồn ở đâu. Độ lệch lấy mẫu dương không phải chỉ dẫn di chuyển một nút đường dẫn theo hướng đó.

Ở tỷ lệ 36, kênh ngang tạo các độ lệch lấy mẫu sau:

Ví dụ dùng primitiveUnits="userSpaceOnUse", nên các giá trị này tham chiếu đến hệ tọa độ người dùng của SVG. Chúng không được bảo đảm là khoảng cách pixel CSS sau khi viewBox được co giãn. Đặc tả cũng định nghĩa tỷ lệ 0 là không có hiệu ứng dịch chuyển.

Giá trị xanh lá cố định giữ việc lấy mẫu dọc trung tính trong ví dụ này. Để khám phá độ méo hai trục sau đó, hãy chủ đích thêm biến thiên ở xanh lá. Đừng đổi đồng thời các kênh và bản đồ khi chẩn đoán kết quả ngoài dự kiến.

Chỉ rõ không gian màu cho xám trung tính

Trung tính nghĩa là giá trị kênh được chọn bằng 0,5 trong không gian làm việc dùng cho bản đồ. Điều này không có nghĩa mọi ô màu trông xám vừa đều trung tính ở mọi thiết lập bộ lọc.

Không gian làm việc mặc định của bộ lọc là linearRGB, trong khi ví dụ này dùng sRGB một cách rõ ràng. Màu được viết là rgb(50%,50%,50%) không có giá trị số 0,5 sau khi chuyển sang RGB tuyến tính. Tài liệu tham khảo color-interpolation-filters của MDN mô tả giá trị mặc định và các lựa chọn tường minh.

Để có bản đồ hằng phục vụ chẩn đoán, thay phần tử tạo nhiễu và ma trận bằng:

<feFlood flood-color="rgb(50%,50%,50%)" result="map"/>

Giữ phần tử dịch chuyển, các bộ chọn kênh và sRGB tường minh trên bộ lọc. Tài liệu tham khảo feFlood của MDN mô tả ảnh màu không đổi dùng ở đây. Đối chứng này giúp phân biệt biến thiên của bản đồ với sự dịch chuyển do không gian màu.

Trong mẫu kiểm thử Chrome của chúng tôi, huy hiệu dùng bản đồ hằng sRGB trông thẳng hàng với huy hiệu không có bộ lọc. Bỏ thiết lập không gian màu tường minh khiến cùng huy hiệu với bản đồ xám đó dịch chuyển thấy rõ. Đây là quan sát trong trình duyệt, không phải khẳng định kết xuất giống nhau từng pixel giữa các bộ máy. Giữ thiết lập không gian màu khi áp dụng công thức này cho hình của bạn; kiểm tra các quy tắc CSS ghi đè nó.

Kiểm tra cùng huy hiệu ở hai kích thước

Chúng tôi kết xuất huy hiệu gốc ở 120 × 120 và 300 × 300 pixel CSS trong Chrome. Mỗi kích thước hiển thị cùng bản đồ cố định ở các tỷ lệ 0, 12 và 36, dùng cùng viewBox 0 0 200 200.

Hiệu ứng nhìn thấy ở cả hai kích thước; bản xem trước lớn hơn giúp kiểm tra lỗ và cạnh dễ hơn. DOM trình duyệt vẫn chứa một đường dẫn trong mỗi mẫu của sáu mẫu, với các giá trị d giống hệt. Ba đối chứng bổ sung 200 pixel so sánh huy hiệu không có bộ lọc với bản đồ xám hằng trong sRGB tường minh và linearRGB mặc định.

Đây là các mẫu SVG được tạo độc lập. Chúng xác lập hành vi của mẫu này trong trình duyệt đã kiểm thử và việc hình học nguồn không thay đổi. Chúng không phải kiểm thử trình chỉnh sửa gốc, đầu ra PerfectVector hay khảo sát tương thích.

Với logo của bạn, trước tiên hãy kiểm tra kích thước hiển thị thực tế nhỏ nhất. Một khoảng trống hay góc bị méo có thể thay đổi cách người xem nhận ra biểu trưng dù bản chính sạch vẫn nguyên vẹn.

Chẩn đoán dịch chuyển, hiệu ứng yếu hoặc cạnh bị cắt

Toàn bộ huy hiệu dịch chuyển thay vì uốn cong. Thử đối chứng bản đồ hằng với sRGB tường minh. Kiểm tra các kênh được chọn và xem bản đồ có thực sự biến thiên trong các kênh đó không. Một giá trị được chọn không đổi nhưng không trung tính tạo ra độ lệch lấy mẫu đồng đều.

Hiệu ứng vẫn yếu. Xác nhận in2="map" khớp với tên result của ma trận. Tăng tỷ lệ dần với cùng seed và tần số. Sau đó, nếu cần, thử một bản đồ khác. Seed mới thay đổi mẫu không gian, nên đó là phép so sánh riêng.

Cạnh dọc có hành vi bất ngờ. Ví dụ này được thiết kế cho dịch chuyển ngang: xChannelSelector="R" và yChannelSelector="G", với G cố định ở 0,5. Kiểm tra hàng ma trận và cách viết tên kênh trước khi thêm biến thiên hai trục.

Đường bao bị uốn bị cắt mất. Kiểm tra vùng bộ lọc trước khi sửa đường dẫn nguồn. Ví dụ chừa thêm chỗ bằng x="-25%", y="-25%" cùng chiều rộng và chiều cao 150%. Tài liệu tham khảo filter của MDN mô tả những thuộc tính vùng đó. Hiệu ứng mạnh hơn có thể cần vùng khác, và khung nhìn bao quanh có thể áp đặt một ranh giới riêng. Làm theo các bước kiểm tra cắt xén bộ lọc và khung nhìn SVG nếu tăng vùng không khôi phục phần đầu ra bị mất.

SVG mất hiệu ứng ở nơi nhận khác. Mở đúng tệp đã bàn giao ở nơi đó. Bản xem trước trong trình duyệt không xác lập hành vi của trình chỉnh sửa, bộ xuất PDF hay máy cắt. Giữ sẵn bản chính sạch thay vì hứa rằng bộ lọc sẽ được chuyển nguyên vẹn.

Bàn giao bản chính sạch riêng

Để có phiên bản không dùng bộ lọc, xóa filter="url(#warp)" khỏi đường dẫn và xóa định nghĩa bộ lọc không còn dùng. Giữ nguyên d gốc, fill-rule="evenodd", màu tô và viewBox. Mở tệp kết quả và xác nhận khoảng trống vuông cùng các cạnh thẳng khớp với bản chuẩn sạch.

Dùng tên tệp riêng cho bản chính sạch và phiên bản có hiệu ứng hiển thị. Nếu lặp SVG có bộ lọc dưới dạng nội tuyến trên một trang, hãy đặt ID riêng cho từng bộ lọc và cập nhật tham chiếu url(#...). Kiểm tra phương thức nhúng cuối cùng và các trình duyệt bạn dự định hỗ trợ.

Nếu bản thân đường viền bị méo cuối cùng phải có thể chỉnh sửa, hãy chuẩn bị hình học đó như một công việc đồ họa riêng. Bộ lọc này không cố định bản xem trước thành các lệnh đường dẫn mới. Đồ lại bản xem trước đã raster hóa cũng là một lần chuyển đổi mới với các bước kiểm tra độ chính xác và dọn dẹp riêng; nó không khôi phục bản chính gốc vốn không thay đổi về mặt toán học.

PNG được đặt bên trong SVG lại là một khác biệt hoàn toàn khác. Xem các tệp SVG chứa ảnh raster trước khi cho rằng tên tệp bảo đảm có các đường dẫn logo chỉnh sửa được.

Khi nào vector hóa logo hữu ích

Nếu logo gốc sạch chỉ còn ở dạng PNG hoặc JPG, hãy vector hóa logo nguồn đó, rồi kiểm tra dáng bao, lỗ và các vùng màu có thể chỉnh sửa trước khi thêm bộ lọc hiển thị. PerfectVector xử lý chuyển raster thành vector; sơ đồ dịch chuyển trong hướng dẫn này là một cách xử lý SVG riêng. Nó không biến bản xem trước bị méo thành đường viền được bảo đảm dùng cho sản xuất.

Nếu đã có bản chính đường dẫn sạch, hãy dùng tệp đó trực tiếp. Với chuẩn bị nguồn và dọn dẹp logo, hướng dẫn vector hóa logo trình bày bước khôi phục thay vì làm méo trong trình duyệt.

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

feDisplacementMap có thay đổi các đường dẫn SVG của tôi không? Bộ lọc này thay đổi ảnh được kết xuất thông qua lấy mẫu theo bản đồ. Trong mẫu kiểm thử trình duyệt gốc, sáu mẫu cường độ giữ một đường dẫn có các giá trị d giống hệt nhau.

Tại sao bản đồ dịch chuyển xám vẫn làm hình của tôi di chuyển? Trung tính là giá trị kênh 0,5 trong không gian màu làm việc của bản đồ. Màu xám sRGB 50% không có giá trị số 0,5 sau khi chuyển sang không gian linearRGB mặc định. Dùng thiết lập không gian màu tường minh và phép thử bản đồ hằng có kiểm soát.

Scale 36 trong ví dụ này nghĩa là gì? Với đơn vị phần tử userSpaceOnUse, giá trị kênh được chọn từ 0 đến 1 cho độ lệch lấy mẫu từ -18 đến +18 đơn vị người dùng SVG. Khoảng cách hiển thị phụ thuộc vào việc co giãn viewBox của SVG.

Tôi có thể đưa SVG bị méo thẳng cho máy cắt không? Độ méo hiển thị không phải hình học cắt mới có thể chỉnh sửa. Giữ bản chính đường dẫn không có bộ lọc và kiểm tra đích thực tế; chuẩn bị đường bao được uốn vĩnh viễn riêng nếu công việc cần chúng.

Nguồn tham khảo

1. MDN: feDisplacementMap — Đầu vào nguồn và bản đồ, các kênh và hành vi lấy mẫu.
2. W3C: Bộ lọc dịch chuyển — Ánh xạ ngược, tỷ lệ và tọa độ phần tử.
3. MDN: feTurbulence — Các tùy chọn bản đồ thủ tục cố định.
4. MDN: feColorMatrix — Giá trị kênh tường minh của bản đồ điều khiển.
5. MDN: color-interpolation-filters — linearRGB mặc định và sRGB tường minh.
6. MDN: feFlood — Đối chứng bản đồ màu không đổi.
7. MDN: filter — Các thuộc tính vùng bộ lọc.

Nếu bản gốc sạch chỉ tồn tại ở dạng raster, hãy chuyển logo của bạn thành SVG, kiểm tra dáng bao và lỗ, rồi lưu bản chính đó trước khi tạo một bản sao hiển thị bị méo riêng.