Quy trình· Đọc mất 6 phút

Chỉnh sửa SVG trực tuyến: không cài phần mềm vẫn đổi màu và xóa nền

Không muốn cài Illustrator mà vẫn chỉnh sửa SVG? Bài này giới thiệu cách đổi màu, xóa nền một cú nhấp, bấm xóa đường, vẽ bằng cọ, xóa bằng công cụ tẩy và xuất file trong trình chỉnh sửa SVG trực tuyến, miễn phí và không cần cài đặt.

1. Trình chỉnh sửa SVG trực tuyến làm được gì

Nhiều người khi nói tới chỉnh sửa SVG lại nghĩ ngay tới việc cài Illustrator, nhưng với các nhu cầu nhẹ như đổi màu, xóa nền hay xóa thành phần thì trình chỉnh sửa trực tuyến là đủ dùng. Trình chỉnh sửa SVG trực tuyến của PolySVG chạy trong trình duyệt, miễn phí, không cần cài đặt hay đăng ký, và hỗ trợ thao tác ở mức đường: bấm chọn xóa, xóa nền một cú nhấp, vẽ bằng cọ, xóa bằng mặt nạ, đổi màu, hoàn tác và làm lại, cuối cùng xuất ra SVG hoặc PNG. Bạn có thể tải file SVG lên trực tiếp, hoặc lấy kết quả chuyển đổi từ công cụ chuyển ảnh sang SVG chỉ một cú nhấp. Với nhà thiết kế, nó hợp để dọn dẹp lần cuối trước khi bàn giao; với lập trình viên, nó hợp để chỉnh nhanh màu và kích thước biểu tượng trước khi đưa vào trang mà không phải chuyển qua lại với công cụ thiết kế.

2. Đổi màu: đưa biểu tượng sang màu chủ đề mới

Bấm vào một khối màu trên canvas để chọn đường tương ứng, rồi đổi màu tô trong bảng màu. Các tình huống thường gặp: chuyển một bộ biểu tượng giữa chủ đề sáng và tối, hiệu chỉnh logo đã vector hóa về đúng màu thương hiệu, hoặc thống nhất bảng màu giữa các tài nguyên từ nhiều nguồn khác nhau. So với việc mở mã tìm thuộc tính fill, cách bấm chọn để đổi màu trực quan hơn nhiều và ít khi làm hỏng các đường khác.

3. Xóa nền: tự động rồi bấm xóa thủ công

Bấm "xóa nền một cú nhấp", engine sẽ nhận diện màu chủ đạo ở viền và loại bỏ lớp nền, file SVG nền trắng trở nên trong suốt trong vài giây. Đường nền còn sót lại thì bấm chuột chọn rồi xóa là xong. Nếu bạn vẫn đang có ảnh bitmap, hãy dùng công cụ ảnh sang vector nền trong suốt để chuyển và xóa nền trong một bước, sau đó vào trình chỉnh sửa làm nốt phần dọn dẹp tinh tế.

4. Cọ và công cụ tẩy: vẽ thêm và xóa bớt

Cọ là phép cộng: vẽ các nét bị thiếu, nét vẽ được vector hóa thành đường mới tự động và hòa vào hình gốc, rất hợp để vá nét đứt của logo sau khi vector hóa. Công cụ tẩy là phép trừ: che một vùng bằng mặt nạ mà không phá dữ liệu đường gốc, xóa nhiều quá thì hoàn tác lại được. Cả hai cùng dùng với hoàn tác/làm lại nên bạn có thể dám thử. Nét cọ được thêm vào file như những đường độc lập và sau này vẫn bấm chọn đổi màu được; hiệu ứng mặt nạ của công cụ tẩy được áp dụng khi xuất, nên file SVG xuất ra giống hệt những gì bạn thấy trên canvas.

5. Hoàn tác, làm lại và xuất file

Trình chỉnh sửa giữ lại toàn bộ lịch sử thao tác, sai thì hoàn tác, đổi ý thì làm lại. Xong việc thì xuất SVG để dùng cho web hoặc chỉnh sửa tiếp, hoặc xuất PNG để chèn vào tài liệu, làm ảnh xem trước. Cách mở và xem file SVG xem ở cách mở file SVG; lối vào trực tiếp của trình chỉnh sửa là /editor. Khi xuất PNG hãy chọn độ phân giải đủ lớn để không bị mờ khi chèn vào tài liệu; dùng cho web thì nên xuất SVG để giữ đặc tính vector.

6. Tra cứu nhanh các tình huống chỉnh sửa thường gặp

  • Đổi màu chủ đề cho biểu tượng: bấm chọn đường rồi đổi màu tô, xuất một bản cho chủ đề sáng và một bản cho chủ đề tối;
  • Biến tài nguyên nền trắng thành trong suốt: xóa nền một cú nhấp, bấm xóa các đường còn sót, xuất SVG nền trong suốt;
  • Vá nét đứt cho logo: dùng cọ vẽ dọc theo chỗ hở để nét được vector hóa tự động, sau đó đổi màu thống nhất;
  • Xóa thành phần thừa: bấm chọn từng khối màu không cần rồi xóa, dùng công cụ tẩy cho chi tiết ở biên;
  • Hình minh họa cho tài liệu: chỉnh xong thì xuất PNG rồi chèn vào Word, PowerPoint hoặc cửa sổ chat.

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

Chỉnh sửa SVG trực tuyến có cần đăng ký không?

Không. Trình chỉnh sửa trực tuyến của PolySVG miễn phí, không cần đăng ký, mở trình duyệt là dùng được ngay.

Công cụ tẩy có làm hỏng đường gốc không?

Không. Công cụ tẩy hoạt động bằng mặt nạ nên dữ liệu đường gốc được giữ nguyên, có thể hoàn tác bất cứ lúc nào.

Thử ngay bây giờ

Đã đọc xong hướng dẫn? Hãy luyện tập với các công cụ miễn phí của PolySVG:

Đọc tiếp