Nét viền SVG biến mất sau khi xuất: Tìm nguyên nhân

Khi nét viền SVG biến mất sau khi xuất, trước tiên hãy xác định hình học đường dẫn còn tồn tại không. Một đường trông như bị mất có thể không có màu nét viền, trùng màu nền, trở nên quá mảnh ở tỷ lệ mới, nằm ngoài viewBox hoặc bị cắt ở mép trang. Nó cũng có thể dùng cọ, cấu hình độ rộng biến thiên, bộ lọc hoặc quy tắc CSS mà ứng dụng đích không hiểu.

Đừng lập tức đồ lại hình hoặc mở rộng mọi đối tượng. Giữ bản nguồn chỉnh sửa được, tạo bản thử và tách riêng một đường bị lỗi. Cách sửa nhỏ nhất thường giữ được nhiều cấu trúc gốc hơn.

Chẩn đoán nhanh

1. Mở cùng SVG trong trình duyệt hiện hành và một trình chỉnh sửa vector.
2. Chọn đường bị mất và xác nhận đường dẫn cùng các nút vẫn tồn tại.
3. Đặt màu nét nổi bật, độ đục hoàn toàn và tạm thời tăng độ rộng nét trong bản thử.
4. Di chuyển khỏi mép trang và lần lượt tắt giới hạn bằng mặt nạ cắt, mặt nạ, bộ lọc.
5. Bỏ phép biến đổi hoặc kiểm tra ảnh hưởng của chúng đến độ rộng nét.
6. Nếu chỉ một ứng dụng đích bị lỗi, thay kiểu hiển thị không được hỗ trợ trong bản giao.

Bốn kết quả của nét viền

Trước tiên, kiểm tra đường dẫn còn không

Mở bản sao SVG trong trình chỉnh sửa văn bản và tìm các phần tử hình thông thường như <path>, <line>, <polyline>, <circle> hoặc <rect>. Sau đó chọn đối tượng bị mất trong trình chỉnh sửa vector và chuyển sang chế độ đường viền hoặc khung dây.

• Nếu thấy nút và đường dẫn trong chế độ đường viền, hình học vẫn còn. Kiểm tra màu tô vẽ, giới hạn bằng mặt nạ cắt, phép biến đổi và khả năng hỗ trợ của ứng dụng.
• Nếu đối tượng còn nhưng khung giới hạn nằm xa ngoài trang, đưa nó trở lại hoặc sửa viewBox.
• Nếu đường mong muốn đã thành hình khép kín có màu tô, nó có thể đã được mở rộng thành đường dẫn tô kín.
• Nếu không có hình học tương ứng, kiểm tra tài liệu nguồn và cài đặt xuất. Công cụ xuất có thể đã bỏ qua đối tượng không được hỗ trợ.

So sánh hai bộ kết xuất trước khi chỉnh sửa. Nét nhìn thấy trong Chrome nhưng mất trong trình chỉnh sửa trên máy tính gợi ý giới hạn nhập hoặc sự phụ thuộc vào CSS. Đường mất ở mọi nơi có khả năng do màu tô vẽ không hợp lệ, giới hạn bằng mặt nạ cắt, khung giới hạn sai hoặc thiếu hình học. Nếu cả tài liệu trống chứ không chỉ các đường, làm theo hướng dẫn chẩn đoán SVG trống rộng hơn.

Nếu nét chỉ mất trong Penpot, dùng các bước kiểm tra nhập SVG vào Penpot để xác định vấn đề khi chuyển tệp.

Nguyên nhân 1: nét viền không có màu hiển thị

SVG coi tô màu và nét viền là các thuộc tính tô vẽ riêng. Một đường dẫn có thể tồn tại mà không hiển thị đường nét. Hướng dẫn tô màu và nét viền của MDN giải thích các thuộc tính cốt lõi, gồm stroke, stroke-width và độ không trong suốt (opacity).

Kiểm tra đối tượng đã chọn và các kiểu được kế thừa để tìm:

• stroke="none";
• thiếu stroke kết hợp với fill="none";
• stroke-width="0" hoặc độ rộng cực nhỏ;
• opacity="0" hoặc stroke-opacity="0";
• màu nét trùng với trang hoặc hình xung quanh;
• display="none" hoặc visibility="hidden" trên đối tượng hoặc nhóm cha;
• lớp CSS ghi đè các thuộc tính trình bày.

Trên bản thử, đặt màu bão hòa, độ đục 100% và tăng độ rộng nét lên vài lần. Nếu đường viền dày che phần mặt chữ được tô, so sánh thứ tự tô màu và nét viền SVG trước khi đổi đường dẫn. Đặt một hình chữ nhật tương phản phía sau. Nếu đường hiện ra, khôi phục màu mong muốn và chọn độ rộng vẫn đọc rõ ở kích thước giao.

Nhớ rằng kiểu khai báo trên phần tử vẫn có thể bị quy tắc stylesheet cụ thể hơn ghi đè. Kiểm tra kiểu đã tính toán trong công cụ lập trình viên của trình duyệt khi mã ghi một kiểu nhưng trình duyệt vẽ kiểu khác.

Nguyên nhân 2: đường bị cắt ở mép trang hoặc khung

Nét viền mở rộng sang cả hai phía của đường tâm. Nếu đường tâm nằm trên ranh giới viewBox, một nửa nét có thể nằm ngoài vùng hiển thị. Nét dày, đầu nét vuông, góc nối nhọn, làm mờ hoặc bóng đổ cần nhiều khoảng trống hơn tọa độ thuần của đường dẫn cho thấy; đặc tả tô vẽ SVG định nghĩa cách độ rộng nét, đầu nét, góc nối và giới hạn góc nhọn mở rộng kết quả tô vẽ quanh đường dẫn. Nếu hình khép kín cần nét nằm hoàn toàn trong hoặc ngoài đường dẫn, dùng hướng dẫn căn nét viền vào trong hoặc ra ngoài để so sánh phạm vi tô vẽ trước khi đổi kích thước vùng vẽ.

Thử bằng cách đưa đối tượng vào trong hoặc tạm mở rộng viewBox. Nếu phần bị mất trở lại, thêm lề có chủ đích quanh toàn bộ hình nhìn thấy. Đừng cứ mở rộng canvas một cách mò mẫm; tính đủ chỗ cho độ rộng nét tối đa, đầu nét, góc nối và hiệu ứng.

Cũng kiểm tra tham chiếu clipPath và mask. Vùng cắt có kích thước theo khung phần tô màu có thể cắt mất nét viền vượt khỏi khung đó. Các phần tử SVG lồng nhau có thể tạo vùng hiển thị riêng, và cách xử lý overflow có thể khác giữa trình duyệt và công cụ nhập của ứng dụng thiết kế.

Khi chỉ một góc biến mất, tìm tương tác với giá trị stroke-miterlimit cao. Góc nối nhọn có thể vươn rất xa khỏi đường dẫn. Đổi sang nối tròn hoặc vát có thể phù hợp hơn mở rộng vùng hiển thị, nhưng chỉ khi vẫn giữ đúng thiết kế mong muốn.

Nguyên nhân 3: đổi tỷ lệ hoặc phép biến đổi làm nét hiển thị sai

Phép biến đổi có thể đổi cả hình học của đối tượng lẫn nét viền nhìn thấy. Đường đủ rõ ở kích thước khi thiết kế có thể trở nên cực mảnh sau khi nhập, nhất là khi ứng dụng nhận diễn giải đơn vị hoặc các phép biến đổi lồng nhau khác đi.

Kiểm tra transform="scale(...)" trên đường dẫn và các nhóm cha trong SVG. So sánh viewBox, width và height của tài liệu, rồi thử ở mức phóng 100% và kích thước vật lý cuối cùng. Nếu cả thiết kế nhập vào sai kích thước, sửa ánh xạ tài liệu bằng phép thử tỷ lệ SVG với kích thước đã biết thay vì bù bằng độ rộng nét tùy ý.

SVG cũng hỗ trợ vector-effect="non-scaling-stroke". Như tài liệu vector-effect của MDN giải thích, giá trị thường dùng non-scaling-stroke giữ độ rộng nét được kết xuất không thay đổi theo các phép biến đổi của phần tử. Điều này có thể hữu ích cho sơ đồ giao diện và bản đồ; hãy xác minh trong công cụ nhập dự định dùng vì mức hỗ trợ ngoài trình duyệt tùy ứng dụng.

Đừng thêm non-scaling-stroke như cách sửa cho mọi trường hợp. Quyết định nét có nên đổi tỷ lệ cùng hình không. Nếu logo được phóng lớn để in, các nét thường nên lớn theo. Nếu đường trên bản đồ cần giữ một pixel màn hình khi thu phóng, nét không đổi tỷ lệ có thể là chủ đích.

Nguyên nhân 4: ứng dụng đích không tái tạo được kiểu hiển thị

Không phải mọi đường thấy trong ứng dụng thiết kế đều là nét SVG thông thường. Nó có thể là cọ nhạy lực, cấu hình độ rộng biến thiên, cọ hoa văn, hiệu ứng còn chỉnh sửa được, hòa trộn, bộ lọc hoặc chuỗi kiểu hiển thị riêng của ứng dụng. Công cụ xuất có thể mô phỏng cấu trúc đó, và ứng dụng thứ hai có thể bỏ qua bản mô phỏng.

Thử giản lược trên bản sao:

1. bỏ bộ lọc nhưng giữ nét cơ bản;
2. thay hoa văn hoặc cọ bằng nét đặc thông thường;
3. bỏ độ rộng biến thiên;
4. gộp các phép biến đổi lồng nhau;
5. xuất riêng đối tượng thành SVG tối giản;
6. mở tệp đó trong ứng dụng đích.

Bước giản lược đầu tiên giúp đường trở lại xác định tính năng không được hỗ trợ. Sau đó bạn có thể chọn cách thay thế tương thích thay vì gộp toàn bộ tài liệu.

CSS và tài nguyên bên ngoài là một nguy cơ tương thích khác. SVG nhúng trong website có thể kế thừa quy tắc lớp hoặc thuộc tính tùy chỉnh từ trang, trong khi cùng tệp mở riêng thì không. Ngược lại, trình chỉnh sửa trên máy tính có thể bỏ các bộ chọn không ánh xạ được vào mô hình đối tượng của nó. Với tệp giao độc lập, dùng các kiểu tự chứa mà ứng dụng đích đã được chứng minh là nhập được.

Giữ nét chỉnh sửa được hay chuyển thành đường dẫn tô kín?

Nét còn chỉnh sửa được giữ đường tâm cùng thiết lập độ rộng, đầu nét, góc nối, nét đứt và màu tô vẽ. Nó gọn và dễ điều chỉnh. Nét đã chuyển thành đường dẫn tô kín biến dải nhìn thấy thành hình học đường dẫn có màu tô. Điều đó cố định kiểu hiển thị nhưng mất đường tâm và các điều khiển nét ban đầu.

Chuyển thành đường viền trong bản giao khi ứng dụng đích không giữ được kiểu cọ hoặc độ rộng biến thiên thiết yếu, hoặc khi nhà cung cấp yêu cầu rõ hình học có màu tô. Tài liệu Expand objects của Adobe mô tả việc mở rộng nét thành các đối tượng thành phần.

Giữ bản gốc có nét chỉnh sửa được vì mở rộng có thể:

• tăng số nút và dung lượng tệp;
• khiến thay đổi độ rộng chậm hơn;
• biến phần chồng nhau thành hình học phức tạp;
• tạo các mảnh riêng cần hợp nhất;
• đổi ý nghĩa của đường dẫn mở trong vẽ bằng máy, khắc hoặc hoạt họa.

Mở rộng đặc biệt nguy hiểm khi máy vẽ bằng bút hoặc quy trình khắc yêu cầu dụng cụ đi theo đường tâm một lần. Nét đã chuyển thành đường dẫn tô kín cung cấp cho máy hai ranh giới. Với quy trình đó, hãy dùng hướng dẫn SVG nét đơn.

Chọn cách sửa theo nơi sử dụng

Thử đúng ứng dụng đích, không chỉ một trình chỉnh sửa khác của cùng nhà cung cấp. Trình duyệt, canvas thiết kế, quy trình in, máy cắt và công cụ nhập CAD đều có thể hỗ trợ các phần SVG khác nhau.

Trình tự sửa an toàn

Đi từ các kiểm tra có thể hoàn tác đến chuyển đổi cấu trúc:

1. giữ nguồn chỉnh sửa được và tạo bản sao;
2. xác nhận hình học tồn tại;
3. so sánh hai bộ kết xuất;
4. thử màu nét, độ rộng và độ không trong suốt (opacity) được khai báo rõ;
5. kiểm tra tương phản nền và CSS kế thừa;
6. kiểm tra giới hạn trang, vùng cắt, mặt nạ và vùng hiển thị lồng nhau;
7. kiểm tra phép biến đổi và kết xuất ở kích thước cuối;
8. lần lượt giản lược từng kiểu hiển thị không được hỗ trợ;
9. chỉ chuyển các nét cần thiết thành đường dẫn tô kín trong bản giao;
10. mở lại SVG đã giao và so sánh với nguồn.

Đừng dùng raster hóa làm bước sửa trung gian khi các đường dẫn tốt vẫn còn. Nó loại bỏ hình học bạn đang cố giữ và thêm bước đồ lại có thể làm mềm góc, đổi đường cong và tạo nút không cần thiết.

PerfectVector phù hợp ở đâu?

PerfectVector chỉ hữu ích khi hình học vector gốc đã mất hoặc không dùng được và nguồn tốt nhất còn lại là ảnh raster. Công cụ có thể dựng lại logo phẳng, biểu tượng hoặc minh họa phù hợp thành các hình vector chỉnh sửa được.

Nó không sửa CSS, khôi phục nét chỉnh sửa được đã bị bỏ qua hoặc chuyển cọ không được hỗ trợ mà vẫn giữ đường tâm chỉnh sửa được. Nếu đường dẫn vẫn còn, sửa màu tô vẽ, giới hạn, phép biến đổi hoặc kiểu hiển thị trong trình chỉnh sửa vector. Cách đó giữ nhiều thông tin hơn đồ lại ảnh chụp màn hình.

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

Vì sao nét SVG biến mất sau khi xuất? Đường dẫn có thể vẫn còn nhưng không có nét nhìn thấy, độ không trong suốt (opacity) bằng không, màu trùng nền, độ rộng cực mảnh, bị cắt, có vấn đề tỷ lệ hoặc kiểu hiển thị mà ứng dụng đích không nhập được. Xác nhận hình học trước, rồi tách riêng màu tô vẽ, giới hạn, phép biến đổi và khả năng hỗ trợ.

Làm sao biết đường dẫn vẫn tồn tại? Chọn đối tượng bị mất trong trình chỉnh sửa vector và chuyển sang chế độ đường viền hoặc khung dây. Bạn cũng có thể mở SVG dạng văn bản và tìm phần tử đường dẫn hoặc hình tương ứng. Có nút nhưng không thấy đường gợi ý vấn đề kết xuất hoặc kiểu hiển thị thay vì thiếu hình học.

Vì sao nét bị cắt ở mép SVG? Nét mở rộng ra ngoài đường tâm, nên đường dẫn nằm trên ranh giới viewBox có thể mất một nửa độ rộng. Đầu nét, góc nối, bộ lọc, vùng cắt và mặt nạ cũng có thể cần thêm lề. Đưa đường dẫn vào trong hoặc chủ động đặt kích thước vùng hiển thị và vùng cắt quanh toàn bộ kiểu hiển thị.

Có nên mở rộng nét SVG trước khi xuất không? Chỉ khi ứng dụng đích không giữ được kiểu nét thiết yếu hoặc yêu cầu rõ hình học có màu tô. Mở rộng bản giao và giữ bản gốc có nét chỉnh sửa được. Mở rộng thêm hình học và không phù hợp khi máy vẽ hoặc dụng cụ khắc cần đi theo một đường tâm.

PerfectVector có khôi phục nét SVG bị mất không? Không, nếu SVG chỉ cần sửa đường dẫn hoặc kiểu hiển thị. PerfectVector có thể dựng lại hình nhìn thấy từ raster tốt nhất còn lại khi không còn hình học vector gốc, nhưng không khôi phục CSS, thiết lập cọ hoặc đường tâm chỉnh sửa được ban đầu.

Nguồn tham khảo

1. W3C — Tô vẽ SVG 2 — định nghĩa tô màu, nét viền, độ rộng nét, đầu nét, góc nối và hiệu ứng vector.
2. W3C — Hệ tọa độ SVG 2 — tài liệu về vùng hiển thị, viewBox, đơn vị và phép biến đổi.
3. MDN — vector-effect — giải thích cách hoạt động của non-scaling-stroke.
4. Adobe Illustrator — Nhóm và mở rộng đối tượng — tài liệu về mở rộng nét thành các đối tượng thành phần chỉnh sửa được.

---

Khi hình học vector gốc đã mất và nguồn tốt nhất còn lại là raster, hãy dựng lại hình thành đường dẫn vector sạch bằng PerfectVector, rồi xác minh trong ứng dụng đích. Nếu đường dẫn vẫn còn, sửa SVG thay vì đồ lại.