Cách sửa tệp SVG: dùng trình chỉnh sửa hoặc sửa mã

Để sửa tệp SVG, hãy mở bản sao trong trình chỉnh sửa trực quan khi cần đổi hình, màu hoặc đường cong, hoặc trong trình chỉnh sửa văn bản khi cần sửa ít mã đánh dấu. Lưu thành SVG, rồi mở lại tệp đã lưu để kiểm tra. Cách phù hợp phụ thuộc vào thay đổi cần làm và các đối tượng bên trong tệp.

Trước khi dùng lệnh làm thay đổi mạnh cấu trúc, hãy xác định đối tượng đã chọn. Một nhóm, một đường dẫn gồm nhiều phần và một PNG nhúng đều có thể trông như một đối tượng trên khung vẽ. Mỗi loại cần cách xử lý khác nhau.

Chuẩn bị bản sao và xác định đối tượng SVG

Bạn cần tệp SVG, bản sao làm việc, trình chỉnh sửa và trình xem hỗ trợ SVG. Giữ bản gốc cho đến khi kiểm tra xong bản xuất.

SVG là viết tắt của Scalable Vector Graphics. Mã XML có thể mô tả hình và đường dẫn vector, nhưng cũng có thể chứa ảnh nhúng. Đường dẫn mô tả một đường hoặc hình; nút là điểm có thể chỉnh sửa trên đường dẫn trong công cụ vector. Chỉ riêng đuôi SVG không cho biết hình nhìn thấy có những điểm đó hay không.

Mở bản sao và xem đối tượng được chọn trong bảng Layers hoặc Objects. Nếu cần, xem mã trong trình chỉnh sửa văn bản. Xác định đúng loại trước khi thay đổi cấu trúc:

Phần tử <image> có thể tham chiếu nội dung PNG hoặc JPEG. Pixel không trở thành đường dẫn chỉ vì tệp bên ngoài có đuôi .svg. Cạnh vuông khi phóng lớn là một dấu hiệu; bảng đối tượng và tham chiếu nguồn giúp chẩn đoán cụ thể hơn. Một số trình chỉnh sửa cũng chèn SVG vector hợp lệ thành một đối tượng đồ họa, nên việc chọn được một đối tượng duy nhất không chứng minh nhiều điều.

Đường dẫn ghép có thể giữ lỗ, chẳng hạn phần giữa chữ “O”. Phân tách có thể làm thay đổi lỗ. Dùng hướng dẫn chẩn đoán loại đối tượng SVG khi Ungroup không có hoặc không có tác dụng.

Chọn trình chỉnh sửa trực quan hoặc mã

Inkscape miễn phí và có mã nguồn mở, chạy trên macOS, Windows và Linux, dùng SVG làm định dạng chính. Illustrator là lựa chọn khác nếu bạn đã dùng nó trong công việc. Figma có thể chuyển tài nguyên giữa công cụ thiết kế bằng SVG, nhưng hướng dẫn nhập không hỗ trợ phần tử marker và pattern của SVG. Kiểm tra một tệp phức tạp trước khi quyết định dùng trình chỉnh sửa nào.

Quy trình sửa SVG được Canva công bố bao gồm đổi màu và bố cục cơ bản. Công cụ trên trình duyệt có thể phù hợp với việc nhỏ. Kiểm tra hỗ trợ màu tô, nét, chữ, hiệu ứng của tệp và điều kiện xuất hiện tại. Với việc hẹp hơn là tách màu tô đồng nhất được hỗ trợ thành các tệp giữ căn chỉnh theo đúng màu, dùng SVG Color Separator; dùng trình chỉnh sửa vector khi cần đổi hình đường dẫn.

Sửa hình trực quan rồi kiểm tra tệp xuất

Tên lệnh khác nhau giữa các công cụ, nhưng thứ tự công việc như sau:

1. Mở bản sao làm việc. So sánh thiết kế nhập với bản gốc. Dừng lại nếu chữ, hoa văn hoặc hiệu ứng đã thay đổi.
2. Chọn đối tượng cần sửa. Chỉ đi vào hoặc tách nhóm khi bảng xác nhận đó là nhóm. Nếu là đường dẫn, chuyển sang công cụ nút hoặc chọn trực tiếp.
3. Thực hiện một thay đổi. Đổi màu tô, di chuyển một phần hoặc điều chỉnh vài nút. Khi đổi kích thước, giữ tỷ lệ khung hình trừ khi cố ý kéo giãn.
4. Kiểm tra vùng đã đổi. Xem kỹ đường cong và khe nhỏ ở gần, rồi xem toàn bộ thiết kế ở kích thước sử dụng.
5. Lưu hoặc xuất SVG mới. Mở lại trong trình xem và ứng dụng sẽ sử dụng tệp. Xác nhận phần đã sửa, kích thước tổng thể và các đối tượng cần chọn riêng.

Khi đổi màu, phân biệt fill, màu bên trong hình, với stroke, màu dọc đường viền. Một màu nhìn thấy có thể nằm trên nhiều đối tượng. Chức năng chọn cùng màu tô có thể giúp, nhưng hãy kiểm tra lựa chọn trước khi đổi; phần khác cũng có thể dùng màu đó. Hướng dẫn sửa màu SVG giải thích kiểu kế thừa và màu không chịu thay đổi.

Giữ bản làm việc có thể chỉnh sửa nếu công cụ dùng định dạng riêng hoặc thêm siêu dữ liệu. Tùy chọn lưu SVG của Adobe có cài đặt phông chữ, thuộc tính CSS, ảnh raster và dữ liệu chỉnh sửa Illustrator. Tệp trông đúng sau khi xuất vẫn có thể có mã khác hoặc nội dung đã raster hóa. So sánh cả đối tượng, điểm liên kết cần thiết và hình ảnh.

Sửa mã SVG cho một thay đổi nhỏ có kiểm soát

Mở bản sao SVG trong VS Code hoặc trình chỉnh sửa văn bản thuần khác. Giữ nguyên namespace, tên phần tử và dấu ngoặc kép. Sửa một chỗ rồi hiển thị tệp trước khi sửa tiếp.

Thử đổi màu tô mà không đổi đường dẫn

Lưu ví dụ này thành triangle.svg rồi mở trong trình xem hỗ trợ SVG:

<svg xmlns="http://www.w3.org/2000/svg"
     width="48" height="48" viewBox="0 0 48 48">
  <path id="triangle" class="icon-shape" fill="#3b82f6"
        d="M24 8 L40 40 H8 Z" />
</svg>

1. Thay #3b82f6 bằng #f97316 trong thuộc tính fill của đường dẫn.
2. Lưu rồi mở lại hoặc làm mới tệp.
3. Kiểm tra tam giác đã thành màu cam và đường bao không đổi. Dữ liệu đường dẫn d, id và class phải vẫn giống bản gốc.

Nếu màu không đổi, xem thuộc tính style, quy tắc lớp, màu kế thừa hoặc nét có thể đang điều khiển hình nhìn thấy. Sửa quy tắc màu chịu trách nhiệm thay vì thay mọi lần xuất hiện của một màu trong tệp.

Ghi chú phương pháp: chúng tôi hiển thị ví dụ này trước và sau khi đổi màu tô bằng trình kết xuất SVG rồi kiểm tra pixel kết quả. Tam giác đổi màu còn dữ liệu đường dẫn, ID và lớp giữ nguyên. Ví dụ nhỏ này không kiểm tra việc nhập hoặc xuất SVG phức tạp trong ứng dụng thiết kế.

Bỏ lề trống bằng viewBox

viewBox ở phần tử gốc có bốn số: x nhỏ nhất, y nhỏ nhất, chiều rộng và chiều cao. Chúng xác định hình chữ nhật trong không gian tọa độ SVG được ánh xạ vào vùng hiển thị.

Trong ví dụ, tam giác nằm từ x=8 đến 40 và y=8 đến 40. Đổi viewBox="0 0 48 48" thành viewBox="8 8 32 32", giữ nguyên dữ liệu đường dẫn. Lưu và kết xuất lại. Tam giác chiếm nhiều hơn trong cùng vùng hiển thị 48×48 vì lề trống đã được bỏ.

Thay đổi đó sửa ánh xạ khung, không sửa hình học đường dẫn hay width và height gốc. Với hình thật, chừa khoảng cho nét và hiệu ứng; khung khít theo hình học có thể cắt mất chúng. Cách trực quan an toàn hơn thường là khớp trang hoặc artboard với hình rồi kiểm tra bản xuất. Nếu tệp nhập có kích thước vật lý sai, xem hướng dẫn kích thước SVG và viewBox.

Nếu hình biến mất, bị cắt hoặc giãn, khôi phục viewBox gốc rồi kiểm tra bốn giá trị và tỷ lệ. Đừng “sửa” lỗi khung bằng cách di chuyển mọi nút.

Khi SVG đồ lại cần được dọn dẹp

Ảnh raster lưu pixel trên lưới. Vector hóa dựng lại hình học từ pixel, nên tệp đồ lại có thể tổ chức màu và đường bao khác thiết kế ban đầu.

Một phần nhìn thấy có thể nằm rải rác trên các đường dẫn nhỏ. Một màu cũng có thể trải trên nhiều vùng rời nhau. Nút dày, đốm nhỏ, hình nền và đường bao chồng nhau khiến thao tác đơn giản trở nên chậm. Kiểm tra các đặc tính đó thay vì chỉ đánh giá độ sắc nét ở một mức phóng đại.

Cấu trúc nhiều mảnh

Cấu trúc đơn giản hơn

Các minh họa giải thích công sức chỉnh sửa; chúng không phải mẫu chuyển đổi hay so sánh sản phẩm được đo lường. Nếu bản đồ lại đáng giữ, sửa vùng bị ảnh hưởng và chỉ đơn giản hóa nơi đường bao vẫn chính xác. Nếu nó được tạo từ raster và cần quá nhiều dọn dẹp, thử vector hóa ảnh gốc lần nữa. Giữ hình học vector gốc có thể dùng thay vì đồ lại ảnh chụp màn hình của nó.

Áp dụng với PerfectVector

PerfectVector phù hợp khi cần tạo đường dẫn từ hình raster, chẳng hạn PNG hoặc JPEG gốc hay ảnh raster bên trong SVG. Dùng các phương pháp chỉnh sửa chung ở trên cho hình vector có sẵn cần giữ.

Với chuyển đổi của mình, hãy làm theo thứ tự:

1. Tải nguồn raster lên và so sánh bản xem trước vector. Tìm chi tiết thiếu, vùng không mong muốn và đường bao khác nguồn.
2. Mở khóa kết quả trước khi sửa hoặc xuất. Chuyển đổi và xem trước miễn phí, không giới hạn; chính sách giá công khai hiện tại quy định một tín dụng để mở khóa mỗi kết quả duy nhất và tải lại kết quả đã mở khóa miễn phí.
3. Kiểm tra và sửa hình học đã mở khóa. Xem hình, nút cần thiết, điều chỉnh bảng màu khi hữu ích và so sánh kết quả ở kích thước dùng.
4. Xuất và kiểm tra trong ứng dụng tiếp theo. Mở lại SVG, chọn phần cần dùng, kiểm tra kích thước và chi tiết nhỏ. Bản xem trước không đủ chứng minh tệp sẵn sàng cho mọi trình chỉnh sửa, máy in hoặc máy cắt.

Chữ raster được dựng lại thành hình học, vì vậy đừng mong nó trở thành văn bản có thể gõ sửa. Giữ phương án sửa tay hoặc vẽ lại khi chữ, đường cong hay khe nhỏ quan trọng không còn đúng sau khi đồ lại.

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

Làm thế nào để sửa SVG miễn phí? Dùng Inkscape để sửa trực quan hoặc trình chỉnh sửa văn bản thuần để sửa mã. Công cụ trình duyệt cũng có thể có tính năng miễn phí; kiểm tra điều kiện xuất hiện tại và hỗ trợ những tính năng SVG trong tệp.

Có thể sửa SVG trong VS Code không? Có. Sửa mã XML để thay đổi nhỏ màu tô, kích thước, viewBox hoặc ID và lớp cần giữ. Lưu bản sao và kết xuất sau đó. Dùng trình chỉnh sửa trực quan để đổi hình đường cong.

Vì sao tôi không chọn được từng hình trong SVG? Kiểm tra loại đối tượng. Nó có thể là nhóm, một đường dẫn gồm nhiều đường dẫn con, hình có clip hoặc ảnh nhúng. Đi vào hoặc tách nhóm thật; sửa nút đường dẫn cho hình học; chỉ vector hóa raster khi cần đường dẫn.

Có thể sửa SVG trong Canva không? Quy trình SVG của Canva bao gồm sửa màu và bố cục cơ bản. Kiểm tra tệp nhập và điều kiện tải SVG hiện tại. Dùng công cụ vector hoặc mã khi cần thay đổi đường bao chính xác hoặc kiểm soát ID và lớp.

Có thể sửa kết quả PerfectVector trước khi mở khóa không? Với chuyển đổi của mình, hãy so sánh bản xem trước trước, rồi mở khóa kết quả để dùng điều khiển sửa và xuất. Kiểm tra SVG đã xuất trong ứng dụng sẽ dùng tệp.

Nguồn tham khảo

1. W3C — Scalable Vector Graphics (SVG) 2 — mô hình tài liệu, hình, đường dẫn và kiểu SVG.
2. W3C — Nội dung nhúng SVG — ảnh raster có thể còn nằm bên trong tài liệu SVG.
3. W3C — Hệ tọa độ, phép biến đổi và đơn vị SVG — ánh xạ viewBox và khác biệt giữa kích thước hình học với vùng hiển thị.
4. Inkscape — Giới thiệu — thông tin chính thức về nền tảng, định dạng SVG và mã nguồn mở.
5. Adobe — Cách lưu hình trong Illustrator — thiết lập xuất SVG và dữ liệu chỉnh sửa Illustrator được giữ.
6. Figma — Sao chép tài nguyên giữa công cụ thiết kế — quy trình chuyển SVG và hạn chế nhập marker/pattern.
7. Canva — Trình chỉnh sửa SVG — quy trình cơ bản về màu, kích thước và bố cục.
8. PerfectVector — Chính sách giá — điều kiện xem trước, mở khóa và tải lại hiện tại.

Giữ SVG dùng được và sửa hình học sẵn có. Nếu nguồn là raster hoặc cần thay bản đồ lại, thử ảnh gốc trong PerfectVector, so sánh xem trước với nguồn, mở khóa trước khi sửa rồi kiểm tra hình và kích thước đã xuất trong ứng dụng tiếp theo.