TTF转SVG转换器

Q: SVG字体会保留字距调整和连字吗？

只能部分保留。SVG 字体格式可以用 `hkern` 元素存储字距调整对以及多字符字形，但没有与小型大写字母、替代字形、上下文规则等 OpenType 特性表对应的功能。如需这些特性，请保留 TTF。

本页面可将TrueType字体转换为SVG字体：生成一个XML文件，其中每个字符都是一个<glyph>元素，轮廓以SVG路径数据写入。这对图标字体工具和字体编辑器很有用，但它并不等同于一张文字图片。

或将TTF, OTF, WOFF … 文件拖放到此处 ·

单个文件最大 95 MB· 最多 20 个文件· 30 分钟后删除

输出

转换为

文件在我们的服务器上处理，并在 30 分钟后删除。

使用方法

1
上传TTF文件
添加一个或多个 .ttf 文件，每批最多 20 个，每个不超过 95 MB。图标字体和文字字体都可以转换。
2
输出格式保持为SVG字体
转换为已设为 SVG 字体。字体微调（hinting）不适用于 SVG 输出，因此该选项不会显示；高级设置中的字体族名称仍可用来重命名字体。
3
转换为SVG
点击转换为 SVG并下载 .svg 文件。用文本编辑器、Inkscape 或 FontForge 打开，即可访问字形路径。

SVG字体与文字SVG图片的区别

搜索“TTF 转 SVG”，会发现混杂着两种不同的需求。一种是 SVG 字体：这是 W3C 在 2001 年的 SVG 1.0 推荐标准中定义的字体格式，<font> 元素内每个字符对应一个 <glyph>，带有 Unicode 值、字符宽度和路径形式的轮廓。另一种是文字的 SVG 图片，即已经排好的标志或名称文字，保存为图形。本转换器生成的是第一种。如果你手上的是标志图片而不是字体，可使用 PNG 转 SVG 将其描摹为路径。

将 TrueType 轮廓转换为 SVG 路径数据，形状不会有任何损失。SVG 路径支持 TrueType 使用的同类二次曲线，因此每条轮廓都按原样写出。无法保留的是轮廓之外的内容：字体微调指令、简单字距调整之外的 OpenType 特性，以及操作系统安装字体所需的二进制表。SVG 字体无法安装到 Windows 或 macOS 上。

SVG字体文件长什么样

SVG 字体标记的简化示例

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- 每个字形对应一个 glyph 元素 -->
    <font id="BrandSans" horiz-adv-x="1229">
      <font-face font-family="Brand Sans" units-per-em="2048" ascent="1638" descent="-410" />
      <glyph unicode="L" glyph-name="L" horiz-adv-x="1100" d="M180 0V1456H360V160H1040V0Z" />
    </font>
  </defs>
</svg>

本页生成的内容：一个文件，每个字符对应一个 <glyph>，采用字体单位，y 轴向上。

可在 FontForge、Inkscape 和图标字体工具中打开
无法安装到电脑上
当前的 Chrome、Edge 和 Firefox 不会加载

普通的 OTF 或 TTF，额外带有一个 SVG 表，存放彩色、分层的字形。

像普通字体一样安装
用于表情符号和多色字体
支持情况因应用和浏览器而异

SVG字体的由来与去向

SVG 1.0 定义了 font 元素: 2001
最后一个需要 SVG 网页字体的 iPhone Safari 版本: iOS 4.1
于 2014 年移除 SVG 字体: Chrome 38
删除了字体章节: SVG 2

TTF

TrueType 字体

TTF 是 TrueType 字体格式,由苹果在 20 世纪 80 年代末开发,1991 年发布,随后授权给微软。它用二次曲线定义字形轮廓,并包含让文字在屏幕上显示清晰的 hinting 指令。所有桌面操作系统、文字处理软件和设计应用都支持 TrueType。它缺少 OpenType 的一些高级排版功能,也比网页字体格式更大。

压缩方式: 无损
透明度: –
动画: –
发布年份: 1991 · Apple

TTF 转换器

SVG

可缩放矢量图形

SVG 是基于 XML 的矢量格式,2001 年由 W3C 标准化。它描述的是形状、路径和文本,而不是像素,因此在任何尺寸下都保持清晰,用于徽标和图标时通常很小。它支持透明、CSS 样式、脚本和动画,所有浏览器都能原生渲染。SVG 不适合照片,复杂的插画渲染也可能变慢。Illustrator、Inkscape、Figma 和浏览器都可以打开并编辑。

压缩方式: –
透明度: 支持
动画: 支持
发布年份: 2001 · W3C

SVG 转换器

TTF 转 SVG 会把每个字形的轮廓写成 SVG 字体中可编辑的 SVG 路径数据，供图标字体工具、字体编辑器和旧版网页字体套件使用；它不是在现代网页上加载字体的方法。

TTF转SVG常见问题

现在还能在CSS @font-face中使用SVG字体吗？

大多数浏览器不能。Chrome 在 2014 年的 38 版本中移除了 SVG 字体支持，Firefox 和 Internet Explorer 从未支持过。用于网站时，请改用 TTF 转 WOFF2 转换 TTF。

为什么把字形粘贴到绘图里会上下颠倒？

SVG 字体使用字体自身的坐标系，y 轴从基线向上；而普通 SVG 图形的 y 轴是从顶部向下计数。将路径垂直翻转即可正常显示，例如使用 scale(1,-1) 变换。

如何把文字转成SVG路径，用于Cricut或激光切割机？

先安装 TTF，在 Inkscape 或 Illustrator 中输入文字并将文字转为轮廓：Inkscape 中为“路径 › 对象转路径”，Illustrator 中为“文字 › 创建轮廓”，然后保存为 SVG。SVG 字体是把每个字母分开存放的，不会排成文字。

SVG字体会保留字距调整和连字吗？

只能部分保留。SVG 字体格式可以用 hkern 元素存储字距调整对以及多字符字形，但没有与小型大写字母、替代字形、上下文规则等 OpenType 特性表对应的功能。如需这些特性，请保留 TTF。

SVG字体输出对图标字体有用吗？

可以，这也是它如今的主要用途。IcoMoon 等图标字体工具可以导入 SVG 字体，让你从旧图标字体中提取图标、编辑后组成新图标集，或将每个图标导出为单独的 SVG。