Chữ SVG trên đường dẫn: Tạo lại chữ huy hiệu chỉnh sửa được

Để đặt chữ SVG trên đường dẫn, định nghĩa đường dẫn có ID, tham chiếu từ <textPath> trong <text> rồi viết nội dung giữa các thẻ. Để căn giữa chữ, kết hợp startOffset="50%" với text-anchor="middle". Giữ biểu tượng trong nhóm riêng để đổi nội dung mà không dựng lại phần hình.

Sự tách biệt đó hữu ích khi phục hồi huy hiệu câu lạc bộ, biểu trưng cửa hàng hoặc logo sự kiện. Bạn có thể cần đường dẫn vector cho biểu tượng giữa nhưng vẫn cần sửa ngày hoặc đổi tên. Dò nét cả huy hiệu tạo hình chữ, không tạo chuỗi văn bản chỉnh sửa được. Tạo lại kiểu chữ thành văn bản còn chỉnh sửa được khi nội dung cần sửa sau này.

Với chữ ngang cạnh biểu tượng, làm nhãn SVG thẳng vừa bằng textLength và đối chiếu thay đổi khoảng cách trước khi chỉnh tỷ lệ ký tự.

Bắt đầu với ba phần riêng

Huy hiệu cần biểu tượng, đường dẫn hướng và văn bản đi theo đường đó. Đường dẫn hướng kiểm soát vị trí chữ; không cần hiện trong thiết kế cuối. Tài liệu textPath của MDN mô tả kết nối href giữa văn bản và đường dẫn.

Với ví dụ dưới, chúng tôi vẽ cây thông đơn giản và đường dẫn hướng bán tròn bằng mã SVG. Cả hai là hình minh họa tự tạo, không phải đầu ra chuyển đổi PerfectVector. Huy hiệu có chữ PINE TRAIL CLUB; phần chữ vẫn là chuỗi văn bản suốt các bước dựng.

Dựng huy hiệu chỉnh sửa được

Lưu mã này thành badge.svg và mở trong trình duyệt. Giữ tệp làm bản gốc chỉnh sửa được. Nếu chưa quen định dạng, hướng dẫn tệp SVG giải thích khác biệt giữa văn bản, đường dẫn và ảnh nhúng.

<svg xmlns="http://www.w3.org/2000/svg"
     width="400" height="400" viewBox="0 0 400 400"
     role="img" aria-labelledby="badge-title">
  <title id="badge-title">Pine Trail Club badge</title>
  <defs>
    <path id="badge-arc"
          d="M70 215 A130 130 0 0 1 330 215" />
  </defs>
 
  <circle cx="200" cy="205" r="166"
          fill="#f8f3e7" stroke="#214b41" stroke-width="6" />
  <g id="emblem" fill="#214b41">
    <path d="M200 150 148 220 175 220 133 273
             267 273 225 220 252 220Z" />
    <path d="M188 269H212V303H188Z" />
  </g>
 
  <text fill="#214b41" font-family="Georgia, serif"
        font-size="29" text-anchor="middle">
    <textPath href="#badge-arc" startOffset="50%">PINE TRAIL CLUB</textPath>
  </text>
</svg>

Đường dẫn bắt đầu tại (70, 215) và đi theo bán tròn phía trên đến (330, 215). Bán kính là 130 đơn vị. Đặt đường dẫn trong <defs> cho phép tham chiếu mà không vẽ đường viền nhìn thấy. Vòng ngoài nhạt là hình được tô riêng.

Đổi PINE TRAIL CLUB thành tên ngắn của bạn, lưu và tải lại. Cây cần giữ nguyên trong khi từ mới theo cùng đường dẫn hướng. Tên dài hơn cần kiểm tra vừa lại; căn giữa không làm văn bản bất kỳ vừa cung.

Căn giữa bằng cả độ lệch và điểm neo

startOffset="50%" đặt vị trí tham chiếu văn bản tại giữa chiều dài đường dẫn. text-anchor="middle" căn tâm văn bản ở vị trí đó. Một thuộc tính chọn vị trí trên đường cong; thuộc tính kia chọn phần văn bản nằm ở đó. Tài liệu startOffset và tài liệu text-anchor mô tả các điều khiển đó.

Thử chỉ đổi text-anchor thành start. Với văn bản trái sang phải này, nội dung giờ bắt đầu tại giữa cung và tiếp tục về điểm cuối bên phải. Trong thử nghiệm trình duyệt, điều này chuyển chữ sang phía phải và để một phần cụm từ vượt cung dùng được. Khôi phục middle trước khi chỉnh cỡ phông.

Với huy hiệu đối xứng, kiểm tra bằng mắt sau khi căn giữa bằng toán học. Chữ có hình dạng và khoảng bên khác nhau; chiều dài bố trí văn bản được căn giữa vẫn có thể cần chỉnh thị giác nhỏ. Chủ động thực hiện điều chỉnh đó thay vì đổi nhiều tọa độ không liên quan đến khi kết quả gần đúng.

Kiểm tra hướng đường dẫn trước khi di chuyển chữ

Đảo chính cung trên này bằng cách thay giá trị d bằng:

d="M330 215 A130 130 0 0 0 70 215"

Điểm đầu và cuối đổi chỗ, còn cờ sweep của cung thay đổi. Để xem hướng dẫn trực quan về cả hai cờ cung, xem bốn tổ hợp cờ cung SVG. Đường cong hình học vẫn cùng vị trí nhưng văn bản đi theo hướng ngược lại. Trong thử nghiệm trình duyệt, đảo hướng làm thay đổi hướng chữ. Khôi phục đường dẫn gốc để chữ đúng chiều dọc theo cung phía trên huy hiệu này.

Đảo đường dẫn khác với đảo cách viết từ hoặc đặt hướng viết của ngôn ngữ. Giữ nguyên nội dung chữ. Đặc tả bố trí văn bản SVG giải thích cách đặt ký tự dọc đường dẫn. Với dòng dưới, tạo và thử đường dẫn hướng dưới riêng thay vì di chuyển chữ trên đến khi nó đi qua biểu tượng.

Chọn phông trước khi chốt khoảng cách

Ví dụ yêu cầu Georgia, sau đó phông dự phòng serif chung. Yêu cầu đó không nhúng phông trong SVG. Bộ kết xuất chọn kiểu có sẵn từ danh sách họ phông, như tài liệu font-family của MDN mô tả.

Trong minh họa Chromium, đổi cùng nội dung từ Georgia, serif sang Arial, sans-serif thay đổi chiều dài bố trí văn bản đo được. Cung và biểu tượng giữ nguyên. Điều cần kiểm tra là độ trải chiếm chỗ và diện mạo chữ, không phải một chiều rộng cụ thể mà máy khác có thể hiển thị khác.

Với huy hiệu thật, chốt phông và độ đậm dự định trước khi chỉnh cỡ hoặc khoảng cách chữ. Sau đó mở lại SVG trong môi trường sẽ dùng. Nếu phông đổi ở đó, dùng hướng dẫn xử lý phông chữ SVG để cô lập việc thay thế hoặc cách nhập.

Nếu nội dung vượt cung, thử cụm từ ngắn hơn, cỡ phông nhỏ hơn hoặc đường dẫn hướng rộng hơn. Kiểm tra cả huy hiệu sau mỗi thay đổi. Tăng bán kính đường hướng có thể đẩy chữ gần viền ngoài; giảm cỡ chữ có thể khiến huy hiệu in nhỏ khó đọc hơn. Tránh kéo giãn chữ chỉ để lấp độ trải cố định trừ khi biến dạng đó thuộc thiết kế.

Chỉ khôi phục phần hình cần dò nét

Nếu biểu tượng chỉ có trong PNG hoặc JPG, tách nhiệm vụ khôi phục khỏi nhiệm vụ kiểu chữ. Dùng bản sao nguồn cô lập biểu tượng sạch nhất có thể. Giữ toàn bộ bản gốc làm tham chiếu thị giác để tạo lại huy hiệu.

Vector hóa biểu tượng raster bằng PerfectVector, rồi đối chiếu đường bao, khe trong và chi tiết nhỏ với nguồn. Dùng hình SVG đã chấp nhận trong nhóm biểu tượng và tạo lại nội dung riêng bằng phông dự định. PerfectVector tạo đường dẫn vector từ ảnh; quy trình này không phụ thuộc OCR, nhận diện phông hay tự tái dựng chữ cong chỉnh sửa được.

Khi biểu tượng vector gốc còn, tái sử dụng nó. Khi chữ được vẽ riêng và hình dạng không đều là quan trọng, làm theo quy trình chữ viết tay thành vector thay vì thay bằng phông. Hướng dẫn vector hóa logo trình bày quyết định rộng hơn giữa dò nét, gõ lại và sửa thủ công.

Cây đơn giản trong ví dụ tránh một vấn đề nhập: biểu tượng sẵn có có thể dùng hệ tọa độ khác hoặc chứa phép biến đổi. Co giãn và đặt nhóm đó trong viewBox của huy hiệu, rồi kiểm tra lại khi chữ hiển thị. Đừng sửa đường dẫn hướng chữ để bù cho biểu tượng đặt sai.

Giữ bản gốc chỉnh sửa được và tạo bản bàn giao

Văn bản còn chỉnh sửa được là bản gốc hữu ích khi tên, ngày hoặc nội dung có thể đổi. Với huy hiệu cố định gửi sang trình chỉnh sửa hoặc công cụ sản xuất khác, bản có chữ dạng đường bao loại nhu cầu người nhận tái tạo hình dạng ký tự của phông. Các từ trở thành đường dẫn vector và mất chỉnh sửa văn bản thông thường.

Trong tùy chọn lưu SVG của Illustrator, Convert To Outlines chuyển chữ thành đường dẫn. Adobe cũng cảnh báo chữ xuất trên đường dẫn có thể hiển thị khác trong trình xem SVG. Đó là lý do kiểm tra bản xuất tại đích, không phải đảm bảo mọi công cụ sau đó tái tạo cả huy hiệu. Xem tài liệu lưu SVG của Adobe.

Dùng trình tự bàn giao này:

1. Lưu bản gốc văn bản còn chỉnh sửa được trước khi chuyển bất cứ thứ gì thành đường bao.
2. Xác nhận nội dung, phông, hướng đường dẫn, căn giữa và khoảng cách.
3. Tạo bản bàn giao riêng và chuyển văn bản thành đường bao trong trình chỉnh sửa.
4. Mở lại bản đó và đối chiếu mọi chữ, lòng chữ, khe cùng biểu tượng.
5. Kiểm tra huy hiệu ở kích thước đầu ra dự định trong ứng dụng tiếp nhận.

Chuyển thành đường bao cố định diện mạo phông hiện tại. Nếu phông dự phòng sai đang hoạt động lúc chuyển, bạn cố định chữ sai. Với ảnh web, cũng giữ tên hỗ trợ trợ năng hữu ích; riêng hình chữ dạng đường bao không mang chuỗi văn bản gốc.

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

Vì sao chữ SVG không căn giữa trên đường dẫn? Dùng startOffset="50%" cùng text-anchor="middle" cho ví dụ căn giữa. Độ lệch 50% với điểm neo start bắt đầu cụm từ tại giữa đường hướng. Cũng kiểm tra hình dạng đường dẫn và toàn nội dung có vừa không.

Vì sao chữ bị lộn ngược? Kiểm tra hướng đường dẫn hướng. Văn bản theo đường như cách nó được vẽ, nên đảo đường có thể đổi hướng chữ. Thử hướng đường trước khi di chuyển văn bản hoặc đổi cách viết.

Vector hóa huy hiệu có tạo chữ cong chỉnh sửa được không? Vector hóa tái dựng hình chữ nhìn thấy thành phần hình. Với nội dung chỉnh sửa được, tạo lại văn bản riêng bằng phông dự định và đường dẫn hướng textPath. Giữ bản gốc văn bản còn chỉnh sửa được trước khi tạo bản bàn giao đường bao.

Nguồn tham khảo

1. MDN — textPath — Kết nối văn bản còn chỉnh sửa được với đường dẫn tham chiếu.
2. MDN — startOffset — Đặt vị trí văn bản dọc đường hướng.
3. MDN — text-anchor — Căn văn bản tương đối với vị trí tham chiếu.
4. W3C — Văn bản SVG 2 — Đặt ký tự và quy tắc bố trí chữ trên đường dẫn.
5. MDN — font-family — Phông có sẵn và chọn họ phông dự phòng.
6. Adobe — Lưu hình trong Illustrator — Chuyển chữ SVG thành đường bao và giới hạn xuất chữ trên đường dẫn.

Dựng phần chữ quanh biểu tượng đã duyệt và giữ nội dung chỉnh sửa được đến khi huy hiệu hoàn thiện. Nếu biểu tượng bị kẹt trong ảnh raster, hãy khôi phục đường dẫn vector, kiểm tra chi tiết nhỏ và dùng phần hình đã chấp nhận trong bản gốc huy hiệu.