Vì sao màu SVG đổi sau khi xuất: tìm nguyên nhân

SVG đổi màu sau khi xuất khi hình thức trong nguồn và tệp bàn giao được diễn giải khác nhau. Công cụ xuất có thể chuyển đổi giá trị màu. Trang web có thể ghi đè fill bằng CSS hoặc lấy currentColor từ phần tử cha. Chuyển sắc, thiết lập độ không trong suốt (opacity), chế độ hòa trộn hoặc bộ lọc có thể phụ thuộc vào tính năng mà nơi nhận xử lý khác. Đôi khi mã đã xuất hoàn toàn đúng và chỉ một công cụ nhập là ngoại lệ.

Đừng bắt đầu bằng thay mọi giá trị hex. Trước tiên tìm thời điểm hình thức thay đổi. Điều đó cho biết nên sửa SVG, thay cách xuất, đơn giản hóa bản bàn giao hay giữ tác phẩm ở định dạng khác.

Đối chiếu triệu chứng với bước kiểm tra đầu tiên

Nên kiểm tra ở đâu trước

Khoanh vùng vấn đề trong năm phút

1. Giữ nguyên bản gốc chỉnh sửa được

Lưu bản sao để thử. Đừng làm phẳng hiệu ứng, chuyển mọi đối tượng thành đường dẫn tô kín hoặc thay màu trong bản duy nhất chỉnh sửa được. Những thay đổi đó có thể che nguyên nhân và khiến tệp khó sửa về sau.

2. Mở SVG đã xuất ở hai nơi

Dùng trình duyệt hiện tại làm đối chứng trung lập, rồi mở hoặc nhập cùng tệp ở nơi sử dụng thực tế. So sánh cả hai với tác phẩm nguồn trên cùng nền.

• Nếu cả hai bản xem tệp đã xuất đều sai, kiểm tra công cụ xuất hoặc mã SVG đã ghi.
• Nếu trình duyệt mở riêng đúng nhưng nơi nhận sai, kiểm tra cách nhúng, CSS hoặc hỗ trợ công cụ nhập.
• Nếu chỉ vùng trong suốt hoặc hòa trộn khác, thử nền và hiệu ứng trước khi đụng màu tô đơn.

Trình duyệt là đối chứng hữu ích, không phải bằng chứng rằng mọi ứng dụng thiết kế hoặc sản xuất đều nhập cùng bộ tính năng.

3. Kiểm tra chỉ dẫn màu tô

Mở SVG trong trình chỉnh sửa văn bản và tìm:

fill=
stroke=
currentColor
url(#
opacity=
fill-opacity=
mix-blend-mode
filter=

Bạn đang tìm cấu trúc, chưa viết lại. fill="#2F6BFF" trực tiếp dẫn đến nhánh chẩn đoán khác với fill="currentColor" hoặc fill="url(#paint0)".

Nếu lần đầu mở mã SVG, hướng dẫn tổng quát về chỉnh sửa SVG giải thích cách làm bằng mã và trình chỉnh sửa trực quan.

4. Rút gọn một đối tượng lỗi

Sao chép đối tượng nhỏ nhất vẫn bị đổi vào tài liệu mới rồi xuất. Bỏ từng tính năng: trước tiên bộ lọc, rồi chế độ hòa trộn, chuyển sắc và cuối cùng độ không trong suốt (opacity) của nhóm. Lần bỏ đầu tiên sửa được kết quả xác định tính năng không được hỗ trợ hoặc phụ thuộc ngữ cảnh.

Phép thử rút gọn an toàn hơn làm phẳng toàn bộ minh họa vì cho bạn một giới hạn bàn giao cụ thể.

Nguyên nhân 1: công cụ xuất chuyển đổi không gian màu

Màu hex và cú pháp rgb() quen thuộc mô tả màu sRGB. CSS hiện đại cũng có thể biểu diễn không gian gam rộng hơn như Display P3 qua color(), theo CSS Color Module cấp 4. Vì vậy ứng dụng thiết kế có thể giữ màu nguồn cần chuyển đổi trước khi thành giá trị hex sRGB, và chuyển đổi đó có thể thay số hoặc giới hạn màu ngoài gam.

Kiểm tra theo thứ tự:

1. ghi lại không gian màu của tài liệu nguồn và giá trị số của đối tượng đã chọn;
2. xuất một đối tượng màu phẳng không có độ trong suốt hoặc hiệu ứng;
3. mở SVG dưới dạng văn bản và đọc fill hoặc stroke đã ghi;
4. so sánh số đã xuất với nguồn;
5. thử cùng tệp ở nơi nhận.

Nếu giá trị đổi trong tệp, việc chuyển đổi xảy ra khi xuất. Chọn có chủ đích không gian màu đích rồi xuất lại. Nếu giá trị không đổi nhưng hình thức khác, chuyển sang kiểm tra CSS, hiệu ứng, nền hoặc hành vi công cụ nhập.

Với công việc in cần tách CMYK, màu pha hoặc công thức màu đen cụ thể, giữ bản gốc làm chuẩn màu cho in ấn trong định dạng gốc của ứng dụng thiết kế và bàn giao định dạng nhà in yêu cầu, thường là PDF. SVG vẫn có thể hữu ích cho màn hình, nhưng không nên mặc nhiên thành chuẩn màu cho quy trình mà nó không mô tả đáng tin cậy.

Nguyên nhân 2: currentColor hoặc CSS thay màu tô

SVG có thể được định kiểu bằng CSS. Đặc tả định kiểu SVG 2 cho biết các thuộc tính trình bày như fill tham gia cơ chế phân tầng CSS với độ đặc hiệu của bộ chọn (specificity) bằng không, nên CSS của tác giả có thể ghi đè. SVG nội tuyến cũng dùng chung tài liệu với trang xung quanh, nghĩa là tên lớp chung có thể xung đột với kiểu của trang.

currentColor là cách tham chiếu gián tiếp có chủ ý. Tài liệu thuộc tính màu SVG của MDN giải thích rằng nó cung cấp giá trị cho fill, stroke, điểm dừng chuyển sắc và các thuộc tính màu tô khác. Điều này hữu ích cho biểu tượng cần theo màu chữ xung quanh, nhưng cũng nghĩa là tệp không có màu cố định tại chỗ đó.

Dùng một trong hai cách bàn giao:

• Với biểu tượng web đổi theo giao diện, giữ currentColor và đặt color rõ ràng trên SVG hoặc phần tử cha dự định.
• Với tài nguyên độc lập phải giữ bảng màu riêng, ghi màu tô và đường viền cụ thể, đồng thời đặt tên các lớp nội bộ trong phạm vi riêng để không xung đột.

Khi nhiều SVG nội tuyến chứa ID như paint0, clip0 hoặc gradient1, làm các ID đó duy nhất và cập nhật tham chiếu cùng lúc. Đừng chỉ đổi id; mọi url(#id) vẫn phải trỏ đúng.

Nếu mục tiêu là chủ động đổi màu thay vì khôi phục màu lệch khi xuất, dùng hướng dẫn riêng về đổi màu SVG an toàn.

Nguyên nhân 3: chuyển sắc hoặc tham chiếu màu tô bị hỏng

Chuyển sắc và mẫu trong SVG là các nguồn cung cấp màu tô. Hình trỏ đến chúng qua tham chiếu như fill="url(#brandGradient)", còn định nghĩa chuyển sắc thường nằm trong <defs>. Đặc tả nguồn màu tô SVG 2 cũng định nghĩa cách tọa độ và phép biến đổi chuyển sắc ảnh hưởng kết quả.

Ba bước phát hiện phần lớn lỗi cấu trúc:

1. mọi url(#id) có định nghĩa khớp;
2. ID vẫn duy nhất sau khi kết hợp nhiều SVG vào một trang hoặc tài liệu;
3. nơi nhận giữ được loại màu tô, đơn vị, phép biến đổi và điểm dừng chuyển sắc mà tệp dùng.

Nếu màu tô đơn giản nhập đúng nhưng chuyển sắc sai, giữ chuyển sắc trong bản gốc và tạo bản bàn giao cho nơi nhận. Thử chuyển sắc tuyến tính hoặc xuyên tâm đơn giản hơn trước. Nếu nơi nhận vẫn không tái tạo được và hình thức chính xác quan trọng hơn màu tô chỉnh sửa được, dùng định dạng hoặc tài nguyên đã làm phẳng mà quy trình nhận hỗ trợ. Ghi nhãn bản đó rõ để không thay thế nguồn chỉnh sửa được.

Nguyên nhân 4: độ không trong suốt (opacity) và hòa trộn đổi kết quả nhìn thấy

Điểm ảnh nhìn thấy không phải lúc nào cũng là màu tô được lưu. fill-opacity tác động lên phần tô của hình, opacity của nhóm được áp dụng sau khi các phần tử con được kết hợp, và chế độ hòa trộn trộn nguồn với nền phía sau. Đặc tả tổng hợp và hòa trộn W3C định nghĩa thứ tự dựng hình và công thức hòa trộn phụ thuộc nền.

Điều đó có hai hệ quả thực tế:

• Cùng SVG có thể trông khác trên trang trắng, đen hoặc có màu mà không đổi giá trị màu nào.
• Chuyển thiết lập opacity từ nhóm sang từng phần tử con có thể đổi vùng chồng nhau vì thứ tự tổng hợp khác.

Thử trên nền thực tế. Sau đó bỏ lần lượt mix-blend-mode, bộ lọc, mặt nạ và độ không trong suốt (opacity) của nhóm trên bản sao. Nếu nơi nhận không giữ được hiệu ứng thiết yếu, chọn cách xử lý vector đơn giản hóa hoặc tài nguyên bàn giao đã làm phẳng. Đừng làm phẳng các phần thiết kế không liên quan.

Hình chữ nhật trắng hoặc có màu phía sau tác phẩm là trường hợp riêng. Hướng dẫn SVG nền trong suốt cho thấy cách phân biệt hình nền thực với vùng vẽ trống.

Nguyên nhân 5: nơi nhận chỉ nhập một phần SVG

SVG là tiêu chuẩn web, nhưng nhiều công cụ máy tính, in, cắt, trình chiếu và xây dựng trang chuyển nó sang mô hình đối tượng riêng. Hỗ trợ có thể khác theo ứng dụng và bản phát hành. Tránh quy tắc kiểu “ứng dụng này không bao giờ hỗ trợ chuyển sắc” trừ khi tài liệu chính thức hiện tại nói vậy và đúng phiên bản bạn dùng.

Thay vào đó, dùng phép thử nhập có kiểm soát:

1. nhập một đường dẫn tô màu đơn;
2. thêm chuyển sắc gốc;
3. thêm độ trong suốt;
4. thêm hòa trộn hoặc bộ lọc;
5. dừng ở phiên bản đầu tiên bị đổi.

Giờ bạn biết giới hạn của nơi nhận đó. Giữ bản gốc đầy đủ và xuất bản bàn giao nằm trong giới hạn đã thử. Nếu đường viền là phần biến mất, làm theo chẩn đoán xuất riêng cho đường viền thay vì chuyển mọi đường thành hình tô.

Chọn cách sửa an toàn nhỏ nhất

PerfectVector phù hợp ở đâu

PerfectVector hữu ích khi nguồn vector đã mất hoặc không dùng được và tác phẩm tốt nhất còn lại là ảnh raster. Bạn có thể chuyển ảnh đó thành hình vector chỉnh sửa được, rồi kiểm tra bảng màu, độ trong suốt và đường dẫn trước khi mở kết quả ở nơi nhận.

Công cụ không sửa CSS kế thừa, khôi phục định nghĩa chuyển sắc bị thiếu, lấy lại hồ sơ màu của ứng dụng thiết kế, giữ chế độ hòa trộn không được hỗ trợ hoặc đổi bộ phân tích của công cụ nhập. Nếu SVG vẫn có đường dẫn và chỉ dẫn màu tô tốt, sửa tệp thay vì đồ lại ảnh chụp màn hình. Điều đó giữ được nhiều cấu trúc gốc hơn.

Danh sách kiểm tra khi bàn giao

• Giữ bản gốc chỉnh sửa được và sửa trên bản sao.
• So sánh tệp đã xuất trên trình duyệt và nơi nhận thực tế với cùng nền.
• Kiểm tra giá trị fill và stroke đã ghi có đổi không.
• Tìm currentColor, lớp chung và ID lặp.
• Đối chiếu mọi tham chiếu url(#id) với định nghĩa.
• Thử riêng độ không trong suốt (opacity) của nhóm, chế độ hòa trộn, bộ lọc và mặt nạ.
• Chỉ đơn giản hóa tính năng nơi nhận không tái tạo được.
• Mở lại hoặc nhập lại tệp bàn giao cuối trước khi thay phiên bản trước.

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

Vì sao SVG đúng trên trình duyệt nhưng sai sau khi nhập? Tệp có lẽ dùng tính năng hoặc ngữ cảnh định kiểu mà nơi nhận chuyển đổi khác. Nhập một đường dẫn màu đơn, rồi thêm lại lần lượt chuyển sắc, độ trong suốt, hòa trộn hoặc bộ lọc. Bước lỗi đầu tiên xác định giới hạn nơi nhận mà không làm hỏng bản gốc.

Tệp SVG luôn là RGB không? Màu hex và rgb() thông thường là sRGB, còn CSS hiện đại có thể biểu diễn không gian như Display P3. Ứng dụng thiết kế và in có thể chuyển màu khi xuất hoặc nhập. Kiểm tra màu đã ghi và dùng định dạng sản xuất nhà in yêu cầu cho công việc CMYK hoặc màu pha.

Vì sao SVG thành màu đen sau khi xuất? Kiểm tra tệp có dùng currentColor, mất quy tắc CSS hoặc tham chiếu đến chuyển sắc hay ID màu tô bị thiếu không. Đen có thể là màu kế thừa hoặc triệu chứng dự phòng, thay vì màu tô gốc bị thay. So sánh tệp mở riêng với bản nhúng hoặc đã nhập.

Có nên thay mọi giá trị hex khi màu trông sai không? Không. Trước tiên xác định giá trị có đổi khi xuất không. Nếu các số nguyên vẹn, thay chúng có thể che vấn đề CSS, tham chiếu màu tô, hòa trộn, nền hoặc công cụ nhập, và làm tệp kém chính xác ở nơi khác.

PerfectVector có sửa SVG bị đổi màu sau khi xuất không? Không khi SVG chỉ cần sửa CSS, chuyển sắc, độ trong suốt, hồ sơ màu hoặc hành vi công cụ nhập. PerfectVector phù hợp khi vector gốc đã mất và bạn cần dựng lại tác phẩm raster phẳng phù hợp thành hình vector chỉnh sửa được.

Nguồn tham khảo

1. W3C — Định kiểu SVG 2 — định nghĩa định kiểu CSS, thuộc tính lớp và kiểu, thuộc tính trình bày, hành vi phân tầng và kế thừa trong SVG.
2. MDN — Thuộc tính color của SVG — giải thích cách currentColor cung cấp giá trị cho tô màu, đường viền, điểm dừng chuyển sắc và thuộc tính liên quan.
3. W3C — Nguồn màu tô SVG 2 — định nghĩa chuyển sắc tuyến tính và xuyên tâm, tham chiếu màu tô, hệ tọa độ, phép biến đổi và nội suy màu.
4. W3C — CSS Color Module cấp 4 — định nghĩa cú pháp màu sRGB và các không gian được định nghĩa sẵn rộng hơn, gồm Display P3.
5. W3C — Tổng hợp và hòa trộn cấp 1 — định nghĩa nhóm có độ không trong suốt (opacity), thứ tự tổng hợp, nền phía sau và chế độ hòa trộn cho SVG và CSS.

Nếu nguồn tốt nhất còn lại là PNG hoặc JPG, dựng lại thành SVG bằng PerfectVector, rồi so sánh kết quả trên trình duyệt mở riêng và nơi sử dụng cuối trước khi thay tệp cũ.