Chuyển TTF sang SVG

Trang này chuyển font TrueType thành font SVG: một file XML trong đó mỗi ký tự là một phần tử <glyph> với đường viền được ghi bằng dữ liệu path SVG. Định dạng này hữu ích cho công cụ icon font và trình chỉnh sửa font chữ, nhưng nó không phải là hình ảnh chứa đoạn chữ của bạn.

hoặc thả tệp TTF, OTF, WOFF … vào đây ·

Tối đa 95 MB mỗi tệp· Tối đa 20 tệp· Xóa sau 30 phút

Đầu ra

Chuyển sang

Tệp được xử lý trên máy chủ của chúng tôi và bị xóa sau 30 phút.

Cách sử dụng công cụ này

1
Tải lên file TTF
Thêm một hoặc nhiều tệp .ttf, tối đa 20 tệp mỗi lượt và mỗi tệp tối đa 95 MB. Cả phông chữ biểu tượng lẫn phông chữ văn bản đều dùng được.
2
Giữ font SVG làm định dạng đầu ra
Chuyển sang được đặt là SVG font. Hinting không áp dụng cho đầu ra SVG nên tùy chọn này sẽ biến mất; mục Tên họ phông chữ trong Cài đặt nâng cao vẫn cho phép đổi tên phông chữ.
3
Chuyển sang SVG
Nhấn Chuyển sang SVG rồi tải xuống tệp .svg. Mở tệp bằng trình soạn thảo văn bản, Inkscape hoặc FontForge để truy cập các đường path của glyph.

Font SVG khác gì ảnh SVG chứa chữ

Khi tìm TTF sang SVG, bạn sẽ gặp hai mục đích khác nhau bị trộn lẫn. Một là SVG font: định dạng phông chữ được định nghĩa trong khuyến nghị SVG 1.0 của W3C năm 2001, trong đó phần tử <font> chứa một <glyph> cho mỗi ký tự với giá trị Unicode, độ rộng tiến và đường viền dạng path. Hai là hình SVG của một đoạn chữ, như chữ của logo hoặc một cái tên đã dàn thành dòng và lưu dưới dạng hình khối. Công cụ này tạo loại thứ nhất. Nếu bạn có ảnh logo chứ không phải phông chữ, PNG sang SVG sẽ dò ảnh thành các path.

Chuyển đường viền TrueType sang dữ liệu path SVG không làm mất gì về hình dạng. Path SVG hỗ trợ cùng loại đường cong bậc hai mà TrueType dùng, nên mỗi đường viền được ghi nguyên vẹn. Thứ không giữ lại được là mọi thứ xung quanh đường viền: lệnh hinting, tính năng OpenType ngoài kerning đơn giản, và các bảng nhị phân mà hệ điều hành cần để cài phông chữ. SVG font không thể cài trên Windows hay macOS.

Cấu trúc của một file font SVG

Ví dụ rút gọn về mã đánh dấu trong một SVG font

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <font id="BrandSans" horiz-adv-x="1229">
      <font-face font-family="Phông Thương Hiệu" units-per-em="2048" ascent="1638" descent="-410" />
      <glyph unicode="L" glyph-name="L" horiz-adv-x="1100" d="M180 0V1456H360V160H1040V0Z" />
    </font>
  </defs>
</svg>

Thứ trang này tạo ra: một tệp, mỗi ký tự một <glyph>, theo đơn vị phông chữ với trục y hướng lên.

Mở được trong FontForge, Inkscape và các công cụ phông chữ biểu tượng
Không cài được lên máy tính
Chrome, Edge và Firefox hiện nay không tải

Một tệp OTF hoặc TTF thông thường có thêm bảng SVG chứa các glyph nhiều lớp, có màu.

Cài như mọi phông chữ khác
Dùng cho emoji và chữ nhiều màu
Mức hỗ trợ khác nhau tùy ứng dụng và trình duyệt

Nguồn gốc và số phận của font SVG

SVG 1.0 định nghĩa phần tử font: 2001
phiên bản Safari trên iPhone cuối cùng cần SVG web font: iOS 4.1
gỡ SVG font năm 2014: Chrome 38
bỏ chương về phông chữ: SVG 2

TTF

Phông chữ TrueType

TTF là định dạng phông chữ TrueType do Apple phát triển vào cuối thập niên 1980 và phát hành năm 1991, sau đó cấp phép cho Microsoft. Định dạng mô tả đường nét ký tự bằng đường cong bậc hai và chứa chỉ dẫn hinting giúp chữ hiển thị sắc nét trên màn hình. TrueType được mọi hệ điều hành máy tính, trình soạn thảo văn bản và ứng dụng thiết kế hỗ trợ. Định dạng thiếu một số tính năng typography nâng cao của OpenType và lớn hơn các định dạng phông chữ web.

Nén: Không mất dữ liệu
Độ trong suốt: –
Ảnh động: –
Ra mắt: 1991 · Apple

Công cụ chuyển đổi TTF

SVG

Đồ họa vector SVG

SVG là định dạng vector dựa trên XML được W3C chuẩn hóa năm 2001. Thay vì điểm ảnh, SVG mô tả hình khối, đường path và văn bản, nên luôn sắc nét ở mọi kích thước và thường rất nhỏ với logo và biểu tượng. Định dạng hỗ trợ nền trong suốt, định kiểu bằng CSS, script và ảnh động, và mọi trình duyệt đều hiển thị nguyên bản. SVG không phù hợp cho ảnh chụp, và các hình minh họa phức tạp có thể hiển thị chậm. Illustrator, Inkscape, Figma và trình duyệt đều mở và chỉnh sửa được SVG.

Nén: –
Độ trong suốt: Có
Ảnh động: Có
Ra mắt: 2001 · W3C

Công cụ chuyển đổi SVG

Chuyển TTF sang SVG ghi đường viền của từng glyph thành dữ liệu path SVG có thể chỉnh sửa bên trong một SVG font, được các công cụ phông chữ biểu tượng, trình chỉnh sửa phông chữ và bộ webfont cũ sử dụng; đây không phải cách để tải phông chữ trên các trang web hiện đại.

Câu hỏi thường gặp về chuyển TTF sang SVG

Hiện nay có dùng font SVG trong CSS @font-face được không?

Hầu hết trình duyệt đều không hỗ trợ. Chrome đã gỡ hỗ trợ SVG font từ phiên bản 38 năm 2014, còn Firefox và Internet Explorer chưa từng hỗ trợ. Với website, hãy chuyển TTF bằng TTF sang WOFF2.

Vì sao glyph bị lộn ngược khi dán vào bản vẽ?

SVG font dùng hệ tọa độ riêng của phông chữ, trong đó trục y hướng lên từ đường cơ sở, còn hình vẽ SVG thông thường tính y hướng xuống từ phía trên. Hãy lật path theo chiều dọc, ví dụ bằng phép biến đổi scale(1,-1), là hiển thị đúng.

Làm sao chuyển chữ thành path SVG cho Cricut hoặc máy cắt laser?

Cài TTF, gõ chữ trong Inkscape hoặc Illustrator rồi chuyển văn bản thành đường viền: Path › Object to Path trong Inkscape, Type › Create Outlines trong Illustrator. Sau đó lưu thành SVG. SVG font lưu từng chữ cái riêng biệt và không được dàn thành từ.

Font SVG có giữ kerning và chữ ghép (ligature) không?

Chỉ một phần. Định dạng SVG font có thể lưu cặp kerning bằng phần tử hkern và glyph nhiều ký tự, nhưng không có tương đương với các bảng tính năng OpenType như small caps, alternates hay quy tắc theo ngữ cảnh. Nếu cần các tính năng đó, hãy giữ lại tệp TTF.

Font SVG đầu ra có hữu ích cho icon font không?

Có, đó là công dụng chính hiện nay. Các công cụ phông chữ biểu tượng như IcoMoon nhập được SVG font, giúp bạn lấy biểu tượng ra từ phông chữ biểu tượng cũ, chỉnh sửa, tạo bộ mới hoặc xuất từng biểu tượng thành SVG riêng.