Cách đổi màu SVG và sửa vấn đề thường gặp

Có ba cách thực sự đổi màu tệp SVG và tất cả đều miễn phí. Tải lên công cụ đổi màu SVG trực tuyến và bấm mẫu màu muốn thay. Mở trong ứng dụng vector như Inkscape, chọn hình và chọn màu tô mới. Hoặc mở trong trình sửa văn bản và thay mã hex vì SVG chỉ là văn bản. Đổi màu vector cũng không mất chất lượng: bạn viết lại chỉ dẫn, không tô lại pixel, nên không có gì mờ hay giảm chất lượng.

Cách chọn phụ thuộc nội dung tệp. Khi SVG không chịu đổi màu, nội dung bên trong gần như luôn là nguyên nhân, không phải công cụ đang dùng. Hướng dẫn này trình bày ba cách trước, rồi chẩn đoán: sáu lý do phổ biến khiến đổi màu không có tác dụng, gồm trường hợp không công cụ màu nào sửa được.

SVG lưu màu ở đâu

Tệp SVG là danh sách hình viết dưới dạng văn bản. Mỗi hình có thể mang fill cho bên trong và stroke cho đường viền theo hướng dẫn vùng tô và nét SVG của MDN. Không có một “màu ảnh” duy nhất để đổi tại một nơi. Thiết kế trông một màu trên màn hình có thể là một đường dẫn gọn hoặc bốn mươi đường riêng cùng màu tô.

Đó là cốt lõi. Mỗi phương pháp đổi màu dưới đây chỉ là cách khác nhau để tìm hình và viết lại fill hoặc stroke. Đó cũng là lý do kết quả giữa các tệp khác nhau nhiều: hình càng ít, càng sạch thì đổi màu càng dễ.

Chọn phương pháp

Phương pháp 1: công cụ đổi màu SVG trực tuyến

1. Mở công cụ màu SVG miễn phí trong trình duyệt và tải tệp (công cụ tốt cũng nhận mã SVG dán vào).
2. Công cụ liệt kê màu tìm thấy. Loại hữu ích nhóm vùng tô giống nhau, nên “màu xanh” là một mẫu dù phủ hàng chục hình.
3. Bấm mẫu, chọn màu thay và xem bản xem trước.
4. Tải kết quả và mở một lần trong tab trình duyệt để xác nhận.

Đây là cách phù hợp cho phần lớn người dùng trong phần lớn trường hợp. Kiểm tra hai điều trước khi tin công cụ cho việc thật: có liệt kê màu nét không và xử lý chuyển sắc thế nào. Nếu hiện ít màu hơn bạn thấy trên màn hình, một phần tệp là chuyển sắc hoặc ảnh nhúng, và đổi mẫu màu đơn giản không tác động được.

Phương pháp 2: ứng dụng thiết kế vector

Inkscape miễn phí và làm mọi thứ công việc này cần; Illustrator và Figma hoạt động tương tự.

1. Mở SVG và bấm phần muốn đổi. Nếu cả thiết kế được chọn như một khối, nó đã được nhóm: bấm đúp để vào nhóm hoặc bỏ nhóm.
2. Đổi vùng tô trong bảng Fill & Stroke (Inkscape) hoặc mẫu tô (Illustrator, Figma).
3. Khi một màu nhìn thấy được chia trên nhiều hình, đừng bấm từng hình. Bấm phải hình và dùng Select Same → Fill Color trong Inkscape hoặc Select → Same → Fill Color được Illustrator ghi nhận. Mọi hình cùng vùng tô được chọn và một thay đổi đổi màu tất cả.
4. Xuất hoặc lưu dạng SVG thuần.

Ứng dụng thiết kế cũng là nơi làm nhiều hơn màu như di chuyển hình hoặc sửa đường cong. Xem bộ công cụ rộng hơn trong hướng dẫn chỉnh SVG.

Phương pháp 3: trình sửa văn bản

Vì SVG là văn bản, trình sửa nào cũng được: Notepad, TextEdit, VS Code.

1. Mở .svg và tìm fill=.
2. Đổi giá trị, ví dụ fill="#1e3a5f" thành fill="#c2410c", rồi lưu.
3. Làm mới tệp trong tab trình duyệt để kiểm tra.

Có ba lưu ý. Màu có thể viết bằng tên (fill="black") cũng như hex. Đường viền nằm trong stroke=, không phải fill=. Nhiều tệp xuất không đặt màu trên hình: chúng dùng lớp CSS với hex thực trong khối <style> gần đầu (.st0{fill:#1e3a5f;}). Sửa hex trong khối kiểu và mọi hình mang lớp đó thay đổi theo.

Cách này tốt cho biểu tượng một màu, nơi một lần tìm-thay làm xong, và thao tác hàng loạt trong thư mục. Với minh họa bốn mươi màu, đây là cách chậm.

Nếu SVG nằm trên trang web

Có thể đổi màu SVG bằng CSS không? Cách trực tiếp nhất là mã SVG nội tuyến trong HTML. Khi đó fill hoạt động như thuộc tính CSS, đặt vùng tô thành currentColor cho biểu tượng kế thừa màu chữ xung quanh. SVG tải dưới dạng <img> bên ngoài được xem là ảnh; MDN lưu ý JavaScript không thể thao tác cấu trúc SVG trong cách đó, và kiểu trang không trực tiếp chọn đường dẫn bên trong.

Nếu không thể nội tuyến, quay lại phương pháp chỉnh tệp: đổi màu trong chính SVG rồi tải lại. Để chọn cách bàn giao, so sánh SVG nội tuyến với ảnh bên ngoài bằng cùng tác phẩm và phép thử CSS trang.

Với hình bóng giao diện một màu, mặt nạ CSS SVG và hình biểu tượng trong suốt cho cách khác: tô phần tử biểu tượng bằng CSS trong khi giữ nguyên màu đường dẫn ảnh nguồn.

Với hiệu ứng màu có thể hoàn tác, so sánh feColorMatrix với sửa vùng tô trực tiếp. Bộ lọc đổi màu kết xuất nhưng giữ màu nguồn, điều quan trọng khi bàn giao tác phẩm có thể chỉnh sửa.

Vì sao SVG không đổi màu

Đây là phần hướng dẫn thường bỏ qua và nơi phần lớn đổi màu thất bại. Kiểm tra lần lượt bảng sau.

Hai trường hợp cần xem kỹ hơn.

Hộp nền bất ngờ

Một số SVG chứa hình chữ nhật nền toàn kích thước mà bạn không thấy trên trang trắng. Đổi màu “mọi thứ” và hộp hiện thành khối màu sau thiết kế; một số ứng dụng cũng chọn nó khi bấm. Nó là hình bình thường, nên chọn và xóa hoặc đặt đúng màu muốn. Nếu hộp hiện trắng trong phần mềm khác, đó là vấn đề liên quan nhưng khác, được giải thích trong hướng dẫn giữ nền trong suốt.

SVG không phải vector

Trường hợp khó có dạng: không hình nào chọn được, mọi chỉnh vùng tô không có tác dụng và khi phóng lớn mép lộ pixel. Mở trong trình sửa văn bản và thay vì phần tử <path>, bạn thấy một thẻ <image> chứa cả khối base64. Đó là ảnh raster bọc trong vỏ .svg. Công cụ không thực sự đồ tạo tệp này và không công cụ màu nào giúp vì không có hình để tô lại. Bộ lọc “tô màu” chỉ nhuộm pixel, thường kém. Hai tệp giống trên màn hình nhưng khác biệt rõ trong mã:

<!-- A real vector: a shape with a fill you can change -->
<path fill="#1e3a5f" d="M12 2 L22 20 H2 Z" />
 
<!-- A raster in an .svg shell: one sealed picture, no shapes -->
<image href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg..." />

Cách sửa là quay về chính ảnh, tốt nhất là PNG hoặc JPG gốc, và chuyển thành vector thực với đường dẫn thực. Hướng dẫn SVG vẫn vỡ hạt giải thích cách tệp giả xuất hiện và phát hiện trước khi dựa vào nó. Khi có hình thực, mọi phương pháp trong hướng dẫn bắt đầu hoạt động.

Đổi màu tệp cắt: mỗi màu là một lớp

Cricut hoặc Silhouette xem mỗi màu trong SVG là một lớp; mỗi lớp nghĩa là thêm lượt chạy, thêm tấm vật liệu và công bóc. Vì vậy đổi màu tệp cắt thực chất là lên kế hoạch lớp: cho hai thành phần cùng màu tô gộp chúng vào một lượt cắt, còn tách màu tạo lớp mới.

Điều đó khiến gộp màu gần trùng đặc biệt hữu ích cho người làm thủ công. Tác phẩm đã đồ thường chứa ba màu xanh gần giống thêm lớp mà không thêm gì nhìn thấy. Gộp thành một giúp cắt nhanh và bóc dễ hơn nhiều. Quy trình giảm bảng màu SVG chỉ cách gộp theo vai trò trực quan mà không xóa tương phản hoặc ý nghĩa thao tác. Nếu chủ động dựng thiết kế nhiều lớp, hướng dẫn SVG nhiều lớp bao quát toàn quy trình, còn trang SVG Cricut hướng dẫn chuẩn bị tác phẩm cho máy cắt từ đầu đến cuối.

Nếu cần tải riêng sau đổi màu, hãy lưu mỗi màu chính xác thành tệp SVG được căn đồng bộ.

Quy trình này trong PerfectVector

Trước hết là giới hạn cần nói rõ: PerfectVector không chỉnh tệp SVG bạn đã có. Nó chuyển ảnh (PNG, JPG, WebP) thành SVG. Nhưng nhiều khó khăn “làm sao đổi màu SVG” bắt nguồn từ bước chuyển đó: tệp gây khó thường là kết quả đồ lại rối hoặc không phải vector thực.

Vì vậy, khi SVG đến từ ảnh hoặc bạn vẫn có ảnh gốc, đổi màu sạch nhất ở nguồn. Chuyển ảnh thành SVG được xây dựng để chỉnh: đường dẫn sạch, ít nút và mỗi màu giữ thành hình riêng có thể chỉnh sửa. Sau đó dùng trình chỉnh màu tích hợp trước tải xuống để thay màu hoặc gộp màu tương tự theo màu thay vì tìm đường dẫn. Bạn có bảng màu muốn và tệp đơn giản hơn trong cùng thao tác; những lần chuyển đầu miễn phí, không cần thẻ tín dụng.

Những gì đổi màu không làm được

• Chuyển sắc không phải một mẫu. Chuyển sắc là dải giữa các điểm dừng màu. Bạn sửa được điểm dừng, nhưng lần “thay màu này” đơn giản có thể chỉ đổi một phần dải, khiến tác phẩm chuyển sắc lạ sau thay thiếu cân nhắc.
• Màu màn hình không phải màu in. SVG lưu chỉ dẫn màu hướng màn hình, còn công việc in có thể cần màu thương hiệu, màu pha hoặc cách tạo đen chính xác. Nếu xuất đổi diện mạo, chẩn đoán lệch màu SVG trước khi thay bảng màu; định dạng sản xuất nhà in yêu cầu vẫn là nguồn chuẩn màu.
• Đổi màu không dọn hình học. Màu tô mới không gộp mảnh mỏng, đóng khe hoặc giảm nút. Kết quả đồ lại rối với màu mới vẫn rối.

Trước khi lưu

• Mở mới tệp đã đổi màu trong tab trình duyệt và so với bản gốc.
• Kiểm tra đường viền: nét có đổi cùng vùng tô ở nơi nên đổi không?
• Tìm hình chữ nhật nền rời có thể vô tình đổi màu.
• Với tệp cắt, đếm lớp sau gộp màu; ít hơn gần như luôn tốt hơn.
• Giữ bản gốc chưa thay đổi.

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

Làm sao đổi màu SVG không có Illustrator hoặc Photoshop? Dùng công cụ đổi màu SVG trực tuyến miễn phí (tải lên, bấm mẫu, tải xuống) hoặc Inkscape, trình vector máy tính miễn phí. Với biểu tượng một màu, mở trong trình sửa văn bản và đổi hex sau fill= cũng được. Không cách nào tốn phí.

Vì sao SVG luôn đen dù tôi thử gì? Nếu trên web, CSS không định kiểu lại SVG tải qua thẻ img; nội tuyến hoặc sửa tệp. Nếu trong trình biên tập, kiểm tra nhóm cản chọn, nét tạo màu hoặc màu định nghĩa trong khối kiểu. Nếu không chọn được gì và phóng lớn thấy pixel, tệp là raster bọc .svg, không có hình đổi màu.

Có thể đổi màu SVG trong Canva không? Trình SVG chuyên dụng của Canva nói bạn có thể tải lên, đổi màu và tải SVG miễn phí không có hình mờ. Tính năng SVG phức tạp vẫn có thể kết xuất khác giữa các trình biên tập, nên kiểm tra tệp tải trước khi thay bản gốc.

Một SVG có thể dùng nhiều màu không? Có. Mỗi hình mang vùng tô và nét riêng, nên SVG có thể chứa nhiều màu như số hình, cộng chuyển sắc. Đó cũng là lý do đổi màu tác phẩm nhiều màu nghĩa là đổi nhiều vùng tô, không phải một thiết lập chung.

Làm sao đổi màu SVG cho dự án Cricut? Bạn đổi màu lớp trong Cricut Design Space được, nhưng theo lớp, không theo hình. Để tổ chức lại phần nào cùng màu và cắt cùng nhau, chỉnh SVG trước tải: gộp màu muốn trên một lớp và đặt màu tô riêng cho phần nên cắt riêng.

Đổi màu SVG có giảm chất lượng không? Không. Màu vector là chỉ dẫn văn bản, nên đổi là viết lại chỉ dẫn mà không chạm hình học. Khác chỉnh PNG, bạn có thể đổi màu SVG bao nhiêu lần tùy ý mà không mất chất lượng.

Nguồn tham khảo

1. MDN: Vùng tô và nét SVG — Giải thích fill, stroke, độ không trong suốt (opacity) và thuộc tính màu SVG liên quan.
2. MDN: Thêm đồ họa vector vào web — So sánh SVG nội tuyến với SVG tải qua <img>.
3. Adobe Illustrator: Chọn đối tượng cùng vùng tô và nét — Ghi nhận chọn tác phẩm theo thuộc tính màu chung.
4. W3C: Nội dung nhúng SVG 2 — Định nghĩa nội dung raster <image> trong tài liệu SVG.
5. Canva: Trình biên tập SVG — Nguồn hiện hành về tuyên bố tải lên, đổi màu và tải xuống SVG của Canva.

Đổi màu SVG nhanh khi tệp phù hợp: chọn cách khớp tệp bạn có và chẩn đoán trước khi mất công với công cụ. Nếu chính tệp là vấn đề, hãy chuyển ảnh gốc thành SVG sạch, có thể chỉnh sửa và chọn màu khi vẫn dễ làm.