Thứ tự tô vẽ SVG: Giữ đường viền dày phía sau chữ

Đặt paint-order="stroke fill" trên phần tử văn bản hoặc hình SVG để vẽ đường viền trước màu tô. Với màu tô không trong suốt, màu tô che phần đường viền hướng vào trong, nên viền dày không lấn vào mặt chữ có màu. Bạn cũng có thể viết paint-order: stroke fill; trong CSS.

Đường dẫn, cỡ chữ và độ rộng đường viền giữ nguyên. Đây là thiết lập diện mạo, hữu ích khi logo chữ có viền trở nên nặng hoặc khó đọc sau khi tăng độ rộng viền. Nó không tạo đường viền căn ngoài hay đường bao cắt mới.

Vì sao đường viền mặc định lấn chữ

SVG thường vẽ màu tô của phần tử, rồi đường viền, rồi marker. Đường viền được căn giữa trên đường dẫn và trải sang hai phía của ranh giới hình được tô. Vẽ viền sau cùng che một phần màu tô. Trên thân chữ hẹp, viền lớn có thể che phần lớn màu mặt chữ.

Đảo hai thao tác đầu cho màu tô che phần chồng lấp đó. Đặc tả tô vẽ SVG định nghĩa thứ tự, và tài liệu thuộc tính SVG của MDN mô tả cả thuộc tính lẫn thuộc tính CSS tương ứng. Giá trị ngắn stroke có cùng thứ tự với stroke fill markers: các thao tác bỏ qua sẽ theo sau theo thứ tự tương đối thông thường.

Hiệu ứng cần màu tô nhìn thấy. Đường dẫn có fill="none" không có gì vẽ đè lên đường viền trong. Màu tô bán trong suốt có thể để viền hiện xuyên qua, nên dùng màu tô không trong suốt cho kết quả minh họa ở đây.

So sánh cùng hình ở hai kích thước

Chúng tôi tạo logo chữ BOLD ngắn bằng văn bản còn chỉnh sửa được và biểu tượng đường dẫn tam giác nhỏ. So sánh trình duyệt bên dưới chỉ thay thứ tự tô vẽ trong từng cặp. Nó dùng độ rộng viền 4 và 8 đơn vị người dùng SVG, rồi hiển thị cùng viewBox 400 × 110 ở chiều rộng 400 và 200 pixel CSS.

Ở thiết lập 8 đơn vị, logo chữ dùng thứ tự thường mất nhiều mặt chữ vàng. Vẽ màu tô cuối giữ các thân chữ vàng nhìn thấy. Hiệu ứng vẫn rõ ở phiên bản 200 pixel, nhưng các lỗ nhỏ vẫn chật. Lỗ trong rất nhỏ của biểu tượng cũng khó phân biệt với đường viền đậm hơn.

Chi tiết cuối đó quan trọng: thứ tự tô vẽ có thể giữ mặt chữ mà không làm mọi lỗ hoặc khe dễ nhìn. Viền vẫn lấn vào vùng không tô. Nếu lỗ đóng lại ở kích thước hiển thị dự định, giảm viền hoặc đơn giản hóa hình. Phóng to bản xem trước trong trình duyệt không thay thế việc kiểm tra kích thước người đọc thực sự thấy.

Đây là ví dụ hình vẽ gốc, không phải kết quả chuyển đổi PerfectVector. Logo chữ dùng phông Arial đã cài với sans-serif dự phòng; phông khác thay đổi dáng chữ và khoảng cách.

Thử SVG đầy đủ

Lưu đoạn này thành wordmark.svg rồi mở trực tiếp trong trình duyệt. Ví dụ giữ đủ chỗ quanh các hình cho viền nhìn thấy. Đổi paint-order thành normal để so sánh, rồi thử stroke-width="4".

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 110" width="400" height="110">
  <g fill="#ffd76a" stroke="#263b55" stroke-width="8"
     stroke-linejoin="round" paint-order="stroke fill">
    <path d="M22 72 L40 28 L58 72 Z M34 60 H46 L40 44 Z" fill-rule="evenodd"/>
    <text x="78" y="76" font-family="Arial, sans-serif"
          font-size="64" font-weight="700">BOLD</text>
  </g>
</svg>

Nhóm truyền các thuộc tính màu đến đường dẫn và văn bản. Mỗi phần tử con dùng thứ tự yêu cầu cho kết xuất riêng. fill-rule="evenodd" tạo lỗ trong biểu tượng; nó độc lập với thứ tự tô vẽ.

Để tái lập các ví dụ nhỏ, đổi width và height thành 200 và 55, giữ nguyên viewBox. Vì tệp không có đường viền không co giãn, hình và viền co giãn cùng nhau. Viền 8 đơn vị thành rộng 4 pixel CSS ở ánh xạ nửa kích thước đó, trước khi tính phần bị màu tô che.

Với phiên bản dùng biểu định kiểu, gán class cho đích rồi đặt:

.outlined-wordmark {
  paint-order: stroke fill;
}

Khi cả thuộc tính trình bày và khai báo CSS cùng chỉ định thuộc tính, CSS được ưu tiên. Nếu đổi thuộc tính có vẻ không tác động, kiểm tra các quy tắc áp dụng. Tài liệu CSS của MDN cũng giải thích kế thừa và các tổ hợp từ khóa cho phép.

Những gì thiết lập này không thay đổi

Căn chỉnh đường viền. Viền vẫn theo cùng đường tâm. Vẽ màu tô lên một phần viền tạo đường biên trông như nằm ngoài vùng tô, nhưng không dịch hình học viền ra ngoài. Ở mép lỗ, phần viền còn nhìn thấy có thể lấn vào lỗ.

Xếp chồng đối tượng riêng. Đặt thứ tự tô vẽ trên một phần tử không đưa nó xuống sau hình lân cận. Đối tượng chồng lấp xuất hiện sau vẫn có thể che nó. Đổi thứ tự đối tượng khi đó là vấn đề. Ví dụ, xem vì sao z-index SVG không đổi thứ tự đường dẫn logo.

Đường cắt hoặc độ dịch biên. Máy cắt hoặc công cụ hình học cần đường bao phù hợp. Không thể mặc định nó hiểu đường viền đẹp trong trình duyệt là một biên nối liền. Tạo và kiểm tra riêng hình học cần thiết nếu công việc bàn giao yêu cầu.

Khả năng dùng phông ở nơi khác. Mẫu chứa văn bản còn chỉnh sửa được. Đổi thứ tự tô vẽ không đóng gói phông hay cố định dáng ký tự. Dùng kiểm tra phông SVG thay đổi nếu logo chữ đổi khi mở lại ở nơi khác.

Giữ riêng những khác biệt đó khi chỉnh sửa. Đổi paint-order dễ hoàn tác; mở rộng viền hoặc chuyển chữ thành đường dẫn thay đổi cấu trúc chỉnh sửa của tài liệu.

Kiểm tra bản bàn giao ở đích đến

Bắt đầu từ kết quả trình duyệt, rồi mở tệp đã lưu trong ứng dụng hoặc trình kết xuất sẽ dùng nó. Chỉ bản xem trước trình duyệt không xác nhận trình chỉnh sửa, công cụ chuyển PDF hay quy trình sản xuất giữ diện mạo.

1. So sánh màu mặt chữ và biên ngoài ở kích thước cuối. Nhìn trong B, O và mọi lỗ hẹp của biểu tượng.
2. Xác nhận phông mong muốn đã tải. Kiểm tra khoảng cách cùng dáng chữ.
3. Kiểm tra mép trang. Viền rộng hơn có thể cần thêm chỗ trong khung nhìn hoặc vùng cắt.
4. Mở lại tệp bàn giao đã xuất. Bản xuất có thể đổi kiểu hoặc cấu trúc đối tượng ngay cả khi tài liệu làm việc trông đúng.

Nếu đích đến thay đổi viền, rút tệp xuống một hình có màu tô và viền rồi so sánh với trình duyệt. Làm theo chẩn đoán đường viền SVG biến mất khi vấn đề là cắt, co giãn hoặc thiếu màu. Với xung đột quy tắc màu, hướng dẫn đổi màu SVG trình bày nơi màu tô và viền có thể được định nghĩa.

Nếu diện mạo được tạo bởi các thuộc tính tô vẽ không giữ được qua bàn giao, giữ bản gốc chỉnh sửa được và chuẩn bị bản bàn giao riêng có diện mạo cần thiết biểu diễn thành hình. Xác minh bản đó cả trực quan lẫn hình học; chỉ mở rộng viền được căn giữa trên đường dẫn không tự tái tạo mọi chồng lấp mong muốn hay tạo một đường bao ngoài.

Khi nguồn là logo raster

Dùng biểu tượng vector gốc và chữ còn chỉnh sửa được khi bạn có chúng. Chụp màn hình văn bản đang hoạt động rồi đồ lại chỉ để thêm viền không có lợi ích.

Nếu PNG hoặc JPG là biểu tượng duy nhất còn lại, quy trình vector hóa logo của PerfectVector có thể giúp chuẩn bị một bản SVG để đánh giá ở bước trước. Kiểm tra hình bao chuyển đổi và lỗ nhỏ trước khi áp dụng kiểu này. Chuyển đổi không đặt thứ tự tô vẽ, nhận diện phông gốc hay quyết định những hình nào cần dùng chung viền.

Khi có thể tái tạo chữ bằng đúng phông, giữ nó là đối tượng văn bản riêng trong lúc thiết kế. Hướng dẫn vector hóa logo rộng hơn giải thích cách chọn giữa khôi phục hình raster và dùng bản vector gốc hiện có.

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

Thứ tự tô vẽ SVG mặc định là gì? Mặc định là màu tô, rồi đường viền, rồi marker. Giá trị normal yêu cầu thứ tự đó.

paint-order="stroke" có khác "stroke fill" không? Chúng tạo cùng thứ tự ở đây: đường viền, màu tô, rồi marker. Thao tác không được liệt kê theo sau thao tác được liệt kê theo thứ tự tương đối thông thường.

paint-order có tạo viền ngoài không? Nó không di chuyển hay dịch biên viền. Màu tô không trong suốt che phần hướng vào trong của viền được căn giữa trên đường dẫn. Phần viền còn lại vẫn có thể lấn lỗ và khe.

Vì sao đường viền SVG vẫn trông quá nặng? Viền có thể quá rộng cho kích thước hiển thị, màu tô có thể trong suốt hoặc quy tắc CSS khác ghi đè thứ tự tô vẽ. Kiểm tra những điều kiện đó và xem các lỗ nhỏ ở kích thước cuối.

Nguồn tham khảo

1. W3C — Tô vẽ SVG 2 — Định nghĩa thứ tự tô vẽ và quan hệ giữa màu tô với viền.
2. MDN — Thuộc tính paint-order SVG — Mô tả thứ tự từ khóa, loại phần tử hỗ trợ và độ ưu tiên CSS so với thuộc tính trình bày.
3. MDN — Thuộc tính paint-order CSS — Giải thích kế thừa và chuỗi từ khóa rút gọn.

Bạn chỉ có biểu tượng raster? Chuẩn bị SVG logo chỉnh sửa được, kiểm tra các lỗ và thử viền ở kích thước dự định trước khi tạo bản bàn giao.